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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Template in child grid

Thread ID:





142305 Jan 26,2019 04:37 PM UTC Jan 28,2019 06:41 AM UTC Angular - EJ 2 1
Tags: Grid
Atlante Dev Team
Asked On January 26, 2019 04:37 PM UTC


I would like to use a template for a column in a child grid (hierarchical grid). 

As I need to define the childGrid in code, I tried something like that for the column : 

{ headerText: 'Module', template: '<ng-template #template let-data>{{data.myRowProperty}}</ng-template>' },

but it displays the {{data.myRowProperty}} like a string in the grid. I tried ${data.myRowProperty} but it's not working neither (syntax found in the template-engine documentation).  

How can I define the template like I tried to do ? 

After that, I will actually call a function from the template (not only show data.myRowProperty), and pass data.myRowProperty as a parameter, should I know something ? 

Thank you very much. Your components are really good and only the tricky things need explanations. 

Pavithra Subramaniyam [Syncfusion]
Replied On January 28, 2019 06:41 AM UTC

Hi Atlante, 
Greetings from Syncfusion. 
Query: I would like to use a template for a column in a child grid (hierarchical grid).  
We have analyzed your query but currently, we do not have support to use ng-template in the child grid. We have already logged ‘template support for child grid’ as a feature and it will be available in any of our upcoming patch releases. So we suggest to use the below way to use template property in the child grid until then, 
Code Example:  
this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
                { headerText: 'Ship Country', template: '<div>${ShipCountry}</div>', width: 120 }, 
                { field: 'Freight', headerText: 'Freight', width: 120 }, 
                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
Please get back to us for further assistance. 
Pavithra S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon