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. Image for the cookie policy date

Simple Template Example

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>

11 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 18, 2017 09:41 AM UTC

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



ZA Zack April 18, 2017 02:37 PM UTC

    <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 


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 19, 2017 11:59 AM UTC

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 




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



Screenshot for above sample:- 

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


Regards, 

Farveen sulthana T


ZA Zack April 19, 2017 04:04 PM UTC

        <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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 20, 2017 06:00 AM UTC

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. 



MU mujef April 20, 2017 07:53 AM UTC

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?


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 21, 2017 08:40 AM UTC

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. 



MU mujef April 23, 2017 03:47 PM UTC

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 25, 2017 09:45 AM UTC

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. 
 



DC Dan Clarke June 15, 2017 02:32 PM UTC

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 16, 2017 09:43 AM UTC

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. 


Loader.
Up arrow icon