We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rendering custom component inside grid: how to add template

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


1 Reply

SI Santhosh Iruthayaraj Syncfusion Team April 4, 2023 02:56 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon