reusable header templates and column templates
Hi Karthik,
Greetings from Syncfusion support
After reviewing your query, we could see that you like to define single template and reusable for all columns. Based on your query we have prepared a sample and used the single column template definition for all columns. Please refer the below code example and sample for more information.
|
App.component.ts
export class AppComponent { @ViewChild('template', { static: true }) public template: TemplateRef<{}>; public data: Object[] = []; public orderColumns: ColumnModel[]; public shipColumns: ColumnModel[]; public columns: any;
public ngOnInit(): void { this.data = orderDetails; this.columns = [{field: 'OrderID', headerText: 'Order ID', width: 150, template: this.template}, {headerText: 'Order Details', columns: [ { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 130, textAlign: 'Right', minWidth: 10 }, { field: 'Freight', headerText: 'Freight ($)', width: 120, format: 'C1', textAlign: 'Right', minWidth: 10, template: this.template, } ]}, {headerText: 'Ship Details', columns: [ { field: 'ShippedDate', headerText: 'Shipped Date', format: 'yMd', textAlign: 'Right', width: 150, minWidth: 10, template: this.template, }, { field: 'ShipCountry', headerText: 'Ship Country', width: 150, minWidth: 10, template: this.template, } ]}]; }
|
|
App.component.html
<div class="control-section"> <ejs-grid [dataSource]="data" [columns]="columns" [allowPaging]='true' [allowResizing]="true"> </ejs-grid>
<ng-template #template let-data> <input type="text" id="data.OrderID" [value]="data[data.column.field]" (input)="onInput($event)" /> </ng-template> </div>
|
Screenshot:
Regards,
Rajapandi R
Karthik,
After reviewing your query, it appears you want to define a single footer template for Aggregates and reuse it across several columns. To address this, we've created a sample where a single footer template is applied to several columns. Please refer to the code example and sample provided below for more details.
|
App.component.ts
@ViewChild('footerTemplate', { static: true }) public footerTemplate: TemplateRef<{}>;
public aggregates: any;
public ngOnInit(): void { this.data = orderDetails; this.aggregates = [{ columns: [{ type: 'Sum', field: 'Freight', footerTemplate: this.footerTemplate }, { type: 'Sum', field: 'OrderID', footerTemplate: this.footerTemplate }] }];
App.component.html
<ejs-grid [dataSource]="data" [columns]="columns" [allowPaging]='true' [aggregates]='aggregates' [allowResizing]="true"> </ejs-grid>
<ng-template #footerTemplate let-data> Sum: {{data.Sum}} </ng-template> |
Screenshot:
