Column Template for the grid in angular 2 platform

[Mohamed Abozeid]

I need a demo for grid column template in angluar 2.. I want to add image or any other custom template 

Thanks

[Jayaprakash Kamaraj]

Hi Mohamed, 

 

Thank you for contacting Syncfusion support. 

 

To render the column template we suggest you to use property binding instead of passing the string value to the template attribute.   

 

Find the code example  

app.component.ts 

 

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" [columns]="columns"> 

<e-columns> 

.. 

        <e-column headerText="Roles" width="80" [template]="template"></e-column> 

.. 

</ej-grid> 

 

`, 

    directives: [EJ_DIALOG_COMPONENTS, EJ_GRID_COMPONENTS, CORE_DIRECTIVES] 

}) 

export class AppComponent { 

.. 

       public template= "#columnTemp"; 

        

 

    constructor() {   

    } 

} 

 

Index.html 

 

<script type="text/x-jsrender" id="columnTemp"> 

<img style="width: 75px; height: 70px" src="Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 

    </script> 

Sample: https://www.syncfusion.com/downloads/support/forum/127103/ze/ejGrid_Vpaging1914133274 

 

Regards, 

 

Jayaprakash K. 

[Robert]

Hi 

I found that I can't put script template in angular template because jsrender does not see it. Is there any solution for this?

BR

Robert U.

[Seeni Sakthi Kumar Seeni Raj]

Hi Robert,  

 

We can mention the template tag referred to the Grid column in the Index.html of your Angular-2 application which has been discussed in our previous update. However, Grid also provide an option to assign the template to the inline template of the Grid columns. We have already discussed about this in following Help Document and Sample Demo. 

 

https://help.syncfusion.com/angular-2/grid/columns#column-template 

https://ng2jq.syncfusion.com/#/grid/columntemplate 

 

Regards,  

Seeni Sakthi Kumar S.