BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
I try to do what is explained here: https://ej2.syncfusion.com/angular/documentation/grid/row/detail-template#rendering-custom-component
In the detailBound I would like to add a template for a row and add a button inside of it. But I don't know how to reference to the data like I would if I were to use <ng-template> in html. So I would like to do something like the bold underlined text. But how do I reference to the data?
let detail = new Grid({
dataSource: data.filter((item: Object) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 110, template: '{{data.orderId}} <button *ngIf="data.orderId >= 5" (click)="onclick($event)">Info</button>' },
{ field: 'CustomerID', headerText: 'Customer Name', width: 140 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
Hi Marijke,
Greetings from Syncfusion support.
We have reviewed your query, and able to achieve your requirement of rendering a button conditionally inside the detail template Grid's row.
You can achieve this by using the following code snippet:
[index.html]
//Conditionally rendering the button <script id="template" type="text/x-template"> ${OrderID} ${if(OrderID >= 10253)} <button class="template-button"> Hello </button> ${/if} </script>
|
[app.component.ts]
let detail = new Grid({ dataSource: data.filter((item: Object) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3), columns: [ { field: 'OrderID', headerText: 'Order ID', width: 110, template: "#template" }, { field: 'CustomerID', headerText: 'Customer Name', width: 140 }, { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } ], //Get click event of the button using Grid’s recordClick event recordClick(args: any): void { if (args.target.classList.contains('template-button')) { alert("Button Clicked !"); } } }); |
Sample: https://stackblitz.com/edit/angular-kq3994?file=src%2Fapp.component.ts,src%2Findex.html
We hope that this solution meets your requirements. Please feel free to let us know if you have any further questions.
Regards,
Santhosh I