Im using TurboTable with nested TurboTable. On row expand I will retrieve the data from service and bind result in inside the TurboTable. When I use nested TurboTable, TurboTable is not displaying. Im using primeng 5.2.0-rc.2
<p-table [columns]="cols" [value]="cars" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr>
<td>
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
</a>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td>
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>
</td>
</tr>
</ng-template>
</p-table>
Dont use the same value property for the main TurboTable and the nested TurboTable... try a different value for the nested turboTable.
You can take a look at this example:
https://stackblitz.com/edit/primeng-turbo-table-qaspj4?file=app%2Fexp-table%2Fexp-table.component.html
Related
I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
{{ title }}
</td>
<td>
{{ award }}
</td>
<td class="col-md-3">
{{ level }}
</td>
<td class="col-md-3">
<a
:href="result.displayUrl"
class="btn-sm btn-primary"
role="button"
>
<span class="sr-only">Read more about {{ title }}</span> Read
more</a
>
</td>
</tr>
</tbody>
</table>
You need to separate row from tbody to component. And do v-for only on this component and not on the entire table.
It will be look like:
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
</tbody>
</table>
And RowComponent will look like:
<td class="col-md-3">
{{ row.title }}
</td>
<td>
{{ row.award }}
</td>
<td class="col-md-3">
{{ row.level }}
</td>
<td class="col-md-3">
<a :href="row.displayUrl"
class="btn-sm btn-primary"
role="button">
<span class="sr-only">Read more about {{ row.title }}</span> Read
more</a>
</td>
<script>
export default {
name: "rowComponent",
props: ['row']
}
</script>
I need to add a sequence numbering column to order lines table in QWeb reports like [SO, Quotations, POs, delivery Slip &, etc..].
<table class="table table-condensed mt48" t-if="not o.move_line_ids">
<thead>
<tr>
<th><strong>Product</strong></th>
<th><strong>Ordered Quantity</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td t-foreach="not o.move_line_ids" t-as="i">
<t t-set="i" t-value="1" />
<span t-esc="i"/>
<t t-set="i" t-value="i+1"/>
</td>
<td><span t-field="move.product_id"/></td>
<td>
<span t-field="move.ordered_qty"/>
<span t-field="move.product_uom"/>
</td>
</tr>
</tbody>
</table>
Sadly, I couldn't make it work. It gives me an empty error.
<t t-set="i" t-value="1" />
<table class="table table-condensed mt48" t-if="o.move_line_ids">
<thead>
<tr>
<th><strong>#</strong></th>
<th><strong>Product</strong></th>
<th><strong>Ordered Quantity</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td t-foreach="o.move_line_ids" t-as="move">
<span t-esc="i"/>
<t t-set="i" t-value="i+1"/>
</td>
<td><span t-field="move.product_id.name"/></td>
<td>
<span t-field="move.ordered_qty"/>
<span t-field="move.product_uom"/>
</td>
</tr>
</tbody>
</table>
I am using PrimeNG TurboTable and I want to integrate p-dropdown component inside the input template within PrimeNG Turbotable. The problem is when I use the following code, the selected element can not be assigned to the value table.
<ng-template pTemplate="body" let-rowData let-row="rowIndex">
<tr>
<td>{{listRow[row]}}</td>
<ng-container *ngIf="edit">
<td pEditableColumn *ngFor="let col of listCol; let i = index">
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown [options]="eltList" [(ngModel)]="rowData[i]"></p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{rowData[i]}}
</ng-template>
</p-cellEditor>
</td>
</ng-container>
<ng-container *ngIf="!edit">
<td *ngFor="let col of listCol; let i = index">{{rowData[i]}}</td>
</ng-container>
</tr>
</ng-template>
Here's a working example:
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr>
<td [ngStyle]="{'width':'10%'}">{{rowIndex+1}}</td>
<td *ngFor="let col of columns" pEditableColumn [ngSwitch]="col.field">
<div *ngSwitchCase="'color'">
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown appendTo="body" [options]="colors" [(ngModel)]="rowData[col.field]" [style]="{'width':'100%'}"></p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
<div *ngSwitchDefault>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData[col.field]">
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
</td>
</tr>
</ng-template>
Plunker example
I'm trying to get the value qty of products shipped to display as an additional column in the invoice report. Not sure if its as simple as finding out what variable it is or what. Is there any easy way to reference what variables are available for the current views?
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th class="hidden">Source Document</th>
<th class="text-right">Ordered</th>
<th class="text-right">Shipped</th>
<th class="text-right">Backorder</th>
<th class="text-right">Unit Price</th>
<th t-if="display_discount" class="text-right">Disc.(%)</th>
<th class="text-right">Extended Price</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line_ids" t-as="l">
<td><span t-field="l.name"/></td>
<td class="hidden"><span t-field="l.origin"/></td>
<td class="text-right">
<span t-field="l.quantity"/>
<span t-field="l.uom_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="o.delivery_count"/>
</td>
<td class="text-right">
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td t-if="display_discount" class="text-right">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-options="{"widget": "monetary", "display_currency": o.currency_id}"/>
</td>
</tr>
</tbody>
I don't exactly know what you mean with "products shipped" but you can get the quantity of the invoice lines to your report like this:
<t t-foreach="o.invoice_line_ids" t-as="l">
<span t-field="l.quantity"/>
</t>
Same for the stock picking lines quantity:
<t t-foreach="o.move_lines" t-as="l">
<span t-field="l.product_uom_qty"/>
</t>
One easy way to get the variable names is to activate the develop mode and placing the cursor over a field label.
You can also go to Settings->Database Structure->Models then just pick your needed model to see the variable names (field names).
I created a new template for printing, and i want to customize it so it prints all the lines from account.invoice.line model. Is there a way you can do that. Here is the code of the template so far.
<t t-name="account.specifikacioni_report_document">
<t t-call="report.external_layout">
<div class="page">
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td>
<span t-field="l.name"/>
</td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
This prints invoice lines for one invoice cause I copied the account.report_invoice_document and just edited it, but how can I list all invoice lines here not only the invoice lines for an invoice
You can follow the report_invoice.xml to print the lines.
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td><span t-field="l.name"/></td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>