Template not working in Grid Column

[Aniruddha Pondhe]

Am using Angular2 integration.
I am trying to insert a template into the grid column. My template has a link. I want to open that link when I click on the cell value.

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right" template="<a>asd</a>"></e-column>

When I try to give an <a> tag in the template there's an error parsing the template as follows:

zone.js:388 Unhandled Promise rejection: Template parse errors:

Parser Error: Unexpected token < at column 1 in [<a>asd</a>] in GridComponent@4:85 ("  <e-columns>

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right" [ERROR ->][template]="<a>asd</a>"></e-column>

        <e-column field="CustomerID" headerText="Customer ID" wi"): GridComponent@4:85

Parser Error: Unexpected token < at column 1 in [<a>asd</a>] in GridComponent@4:85 ("

</ej-grid>

<a id="test" [ERROR ->]*ngFor="let router of list" [routerLink]="router.path" routerLinkActive="router-link-active">Edit</a>"): GridComponent@13:13

Parser Error: Unexpected token < at column 1 in [<a>asd</a>] in GridComponent@4:85 ("

</ej-grid>

<a id="test" *ngFor="let router of list" [ERROR ->][routerLink]="router.path" routerLinkActive="router-link-active">Edit</a>

"): GridComponent@13:41

Parser Error: Unexpected token < at column 1 in [<a>asd</a>] in GridComponent@4:85 ("

</ej-grid>

[ERROR ->]<a id="test" *ngFor="let router of list" [routerLink]="router.path" routerLinkActive="router-link-act"): GridComponent@13:0, Directive RouterLinkWithHref

[Jayaprakash Kamaraj]

Hi Aniruddha, 

 

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"> 

      <a>asd</a> 

    </script> 

Sample: http://www.syncfusion.com/downloads/support/forum/127027/ze/Sample-1817907987 

 

Regards, 

 

Jayaprakash K.