Simple Template Example

[Zack]

Say I have a simple grid that I want to use a simple template with.

This is where I was at after looking at the api documentation.

    <ej-grid #grid id="Grid"

    [dataSource]="data">

        <e-columns>

        <e-column field="id" template="'<span>{{:name}}</span>'" headerText="Header" textAlign="left" width=240></e-column>

        </e-columns>

    </ej-grid>

[Seeni Sakthi Kumar Seeni Raj]

Hi Zack,  

 

Thanks for contacting Syncfusion Support.  

 

We can assign a template id or elements to the template property of the Grid columns. But for a angular2, we are providing support with the angular 2 syntax in the column-template. We have already discussed about this in the following Help Document.  

 

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

 

Regards,  

Seeni Sakthi Kumar S. 

[Zack]

    <ej-grid #grid id="Grid"

    [dataSource]="data">

        <e-columns>

             <e-column headerText="Header" textAlign="left" width=240>

                 <template e-template let-data>

                     <div [innerHTML]="data.id"></div>

                 </template>

             </e-column>

        </e-columns>

    </ej-grid>

Can't seem to get this working, not sure why, the header appears with only empty cells 

[Farveen Sulthana Thameeztheen Basha]

Hi Zack, 

We are unable to reproduce your reported problem on column template sample. We have created sample using columnTemplate in angular 2 which can be downloaded from the below location 

https://www.syncfusion.com/downloads/support/forum/130038/EJTEMP~1-893180187.ZIP 

In this sample we have placed the button and link in the template property of the column. Please refer to the code example:- 

app.component.html 

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

    <e-columns> 

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

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> 

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 

        <e-column field="Freight" headerText="Freight" width="75" format="{0:C}" textAlign="right"> 

        </e-column> 

<e-column headerText="Case Reference" width="110" [template]="true"> 

            <template e-template let-data> 

                <div class="test3"> 

                    <a rel='nofollow' href="www.syncfusion.com">{{data.CustomerID ?data.CustomerID :" "}}</a> 

                </div> 

            </template> 

        </e-column>        

        

        <e-column headerText="Template" width="110" [template]="true"> 

            <template e-template let-data>                 

                <div class="test3"><input ej-button [text]="data.Country" (click)="onClick($event)" /></div> 

            </template> 

        </e-column> 

    </e-columns> 

</ej-grid> 

 

app.component.ts 

 

import {Component, ViewEncapsulation} from '@angular/core'; 

@Component({ 

    selector: 'ej-app', 

    templateUrl: 'app/app.component.html',  //give the path file for Grid control html file. 

}) 

export class AppComponent { 

    public gridData; 

    constructor() { 

        //The datasource "window.gridData" is referred from 'https://js.syncfusion.com/demos/web/scripts/jsondata.min.js' 

        this.gridData = window.gridData; 

        

    } 

} 

 

 

Please refer to the online Demo Link:- 

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

Screenshot for above sample:- 

 

 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T

[Zack]

        <e-column headerText="COW" width=240 [template]="true">

            <template e-template let-data>

                <div>{{data.cow.id}}</div>

                <div>{{data.cow.sirestack}}</div>

            </template>    

        </e-column>  

Puts true in every cell in the column, also the online demo link does not have [template]="true" in the column element so I'm not sure which is right. Potential issue with versioning maybe? I'm on the previous Angular2 syncfusion version using angular 2.0.0

[Seeni Sakthi Kumar Seeni Raj]

HI Zack,  

 

We can give define the template column in either way. template property can be defined or can be defined for the respective column but if you have mentioned the e-template as sub property for the column, it will render them as a template column which is the default behavior.  

 

Regards,  

Seeni Sakthi Kumar S. 

[mujef]

I have the same problem as Zack described. Provided template puts "true" string in every cell.I'm on angular 4.0.2, ej-angular2 15.1.44, syncfusion-javascript 15.1.41The same problem is described here: https://www.syncfusion.com/forums/129445/grid-column-with-template-doesn39t-workThere is a clue "it seems is the issue about module.ts file import { EJAngular2Module } from 'ej-angular2';this doesn't import TemplateElement from the core.ts"How can we fix it?

[Seeni Sakthi Kumar Seeni Raj]

Hi Mujef,  

 

We have analyzed your query, we can’t render the jsrender template directly into an appComponent.html and we have achieved your requirement by defining the jsrender template on index.html and we have rendered it inside the Grid control by using template property of ejGrid control. Please refer to the below code example. 

 

[index.html]  

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

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

    </script>  

  

[app.component.html]  

<ej-grid  [(dataSource)]="gridData" [columns]=col>  

</ej-grid>  

  

[app.component.ts]  

constructor(private service: NorthwindService) {  

      

    this.col = [{field:"OrderID",isPrimaryKey:true},  

                {field: "EmployeeID"},   

                {headerText:"Employee Image", template:"#template"}]  

  }  

 

 

Regards,  

Seeni Sakthi Kumar S. 

[mujef]

Hi,I was misunderstood. Let me explain my question. On April 19, 2017 07:59 AM in this thread you gave us an example how we can define inline template for column in ej-grid. Your example does not work. I've found an information in another thread that your example probably does not work because import EJAngular2Module from ej-angular2 does not import TemplateElement. Because of that when we run your example we see string value "true" in the column instead of defined template (link and button).I would like to define templates inline - like in your example.Could you please check your example on new application created by angular-cli? I have created my application as it was described on March 8, 2017 01:37 AM in thread: https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli.Thank you

[Seeni Sakthi Kumar Seeni Raj]

Hi Mujef,  

The ej-angular2@15.1.44 package have separate directive to render template. So, import and declare EJTemplateDirective from ej-angular2 package which will also include the e-template configuration of the Grid e-columns. Refer to the below code snippet. 

 

import { NgModule, enableProdMode, ErrorHandler } from '@angular/core'; 

. . . . .  

 

import {EJAngular2Module,EJTemplateDirective} from 'ej-angular2'; 

 

.. . . . . . . . 

import { rootRouterConfig } from './app.routes'; 

 

. . . .  

@NgModule({ 

  imports: [BrowserModule, FormsModule, HttpModule, 

  EJAngular2Module.forRoot(),   

  . . . .], 

  declarations: [AppComponent, HomeComponent, GridComponent,  

  EJTemplateDirective 

  ], 

  bootstrap: [AppComponent] 

}) 

export class AppModule { } 

 

 

After Essential studio 2017 volume 2 release no need to import directive separately, you can use it from EJAngular2Module itself.  

 

Regards, 

Seeni Sakthi Kumar S. 

 

[Dan Clarke]

Hi,

It's perhaps worth updating the documentation to mention this. I've just wasted a few hours on this, and looking at the forums - I'm certainly not the only one.

Thanks,

Dan

[Seeni Sakthi Kumar Seeni Raj]

Hi Dan, 

 

We no need to import EJTemplateDirective with latest version of Syncfusion ej-angular2 package and it will be loaded while importing EJAngular2Module from ej-angular2 package. Run the below command to install latest version of ej-angular2 package.  

 

npm install ej-angular2@15.2.43 --save  

 

We have also logged task “Accessing EJTemplateDirective from ej-angular2 module”. We will update and refresh the Help Document as soon as possible.  

 

Regards,  

Seeni Sakthi Kumar S.