Hi Karthik,
Greetings from Syncfusion support,
We understand that you are looking to include
header templates and column templates for the columns of a stacked header in
the Syncfusion Angular Grid. To customize the header element of a Grid stacked
header column, you can use the headerTemplate
property. Below is a code snippet for your reference:
|
app.component.html
<e-column headerText="Order Details" [columns]="orderColumns">
<ng-template #headerTemplate let-data> <div> <ejs-dropdownlist index="0" [dataSource]="dropdownData"> </ejs-dropdownlist> </div> </ng-template> </e-column>
|
|
|
For rendering a column template within a stacked header column, you can use the template property. Here's an example code snippet:
|
app.component.ts
this.orderColumns = [ { headerText: 'Header2', columns: [ { headerText: 'Header3', columns: [ { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 130, textAlign: 'Right', minWidth: 10, }, { field: 'ShipCountry', headerText: 'Ship Country', width: 150, minWidth: 10, template:'<div><button class="empData">Ship Country</button></div>' }, ], }, ], },
|
Sample: https://stackblitz.com/edit/angular-p4jpun-9a7bpz?file=app.component.ts
Please let us know if you need any further assistance.
Regards,
Vikram S
