Rendering custom component inside grid: how to add template

[Marijke Meersman]

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 }
            ]
        });

[Santhosh Iruthayaraj]

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