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.
Unfortunately, activation email could not send to your email. Please try again.

Column Template for the grid in angular 2 platform

Thread ID:

Created:

Updated:

Platform:

Replies:

127103 Oct 26,2016 06:02 AM May 1,2017 03:02 AM Angular 3
loading
Tags: ejGrid
Mohamed Abozeid
Asked On October 26, 2016 06:02 AM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On October 27, 2016 06:34 AM

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> 

 
Regards, 
 
Jayaprakash K. 


Robert
Replied On April 28, 2017 04:13 AM

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 [Syncfusion]
Replied On May 1, 2017 03:02 AM

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. 
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


CONFIRMATION

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.

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.

;