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
  1. Home
  2. Forum
  3. Angular
  4. Grid column with template doesn't work

Grid column with template doesn't work

I just download the Angular2 seeds ,follow the demo Here,but the grid renders nothing, is there any thing I missed?

<ej-grid [allowPaging]="true" [pageSettings.pageSize]="pagesize" [dataSource]="gridData">
    <e-columns>
        <e-column headerText="Employee Image" width="110" textAlign="center">
            <template e-template let-data>
                <div *ngIf="data.EmployeeID">
                <img style="width: 75px; height: 70px" [attr.src]="'app/content/images/grid/Employees/' + data.EmployeeID + '.png' " [alt]="data.EmployeeID" />
                </div>
            </template>
        </e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="90" textAlign="right"></e-column>
        <e-column field="FirstName" headerText="First Name" width="90"></e-column>
        <e-column field="LastName" headerText="Last Name" width="90"></e-column>
        <e-column field="Country" headerText="Country" width="90"></e-column>
    </e-columns>
</ej-grid>



8 Replies
SA Saravanan Arunachalam Syncfusion Team March 20, 2017 12:34 PM UTC

Hi Jemmy, 
Thanks for contacting Syncfusion’s support. 
We are sorry that we are unable to reproduce the reported issue and we have created a sample based on your requirement that can be downloaded from the below link. 
And also refer to below screenshot. 
 
If still the issue is exist, please provide the following details. 
1.       Share your build version 
2.       Please ensure whether the image is avail in the mentioned folder. 
3.       If possible please reproduce the issue in the above sample. 
Regards, 
Saravanan A. 


JL Jemmy Lu March 20, 2017 02:58 PM UTC

Thanks form replying,it seems is the issue about module.ts file 
import { EJAngular2Module } from 'ej-angular2';
this doesn't import TemplateElement from the core.ts .

And I would like to ask if it possible to put the template outside the ej-gird tag and give it a id ?
I have tried to do this but the template not compile into angular2 template only raw html.
thanks.

SA Saravanan Arunachalam Syncfusion Team March 21, 2017 04:21 AM UTC

Hi Jemmy, 
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"}] 
  } 
 
And also we have modified the sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


JL Jemmy Lu March 22, 2017 03:30 AM UTC

hi,if put the template outside the ej-grid tag and use  text/x-jsrender as template so it is possible to call angular2 function in component if I have a button in jsrender template ?


SA Saravanan Arunachalam Syncfusion Team March 23, 2017 07:16 AM UTC

Hi Jemmy, 
We have analyzed your requirement that we have achieved it by using templateRefresh event of ejGrid control. In the templateRefresh event, we have bound the click event for the button element and please refer to the below code example and online api reference link. 
Index.html 
<script type="text/ng-template" id="template"> 
    <input type="button" class="button" value="click"/> 
</script> 
 
app.component.html 
 
<ej-grid  [(dataSource)]="gridData" [columns]=col (templateRefresh)="onTemplateRefresh($event)"> 
</ej-grid> 
 
app.component.ts 
export class AppComponent { 
  . . . 
   
  onTemplateRefresh(args) { 
     $(args.cell).find(".button").bind("click",function(e){ 
         //To do your code 
       });     
  } 
  
   
} 
 
 
Regards, 
Saravanan A. 


SA Saravanan Arunachalam Syncfusion Team March 23, 2017 08:51 AM UTC

Hi Jemmy, 
Please ignore the previous update. 
We have analyzed your requirement that we have achieved it by using templateRefresh event of ejGrid control. In the templateRefresh event, we have bound the click event for the button element and please refer to the below code example and online api reference link. 
Index.html 
<script type="text/ng-template" id="template"> 
    <input type="button" class="button" value="click"/> 
</script> 
 
app.component.html 
 
<ej-grid  [(dataSource)]="gridData" [columns]=col (templateRefresh)="onTemplateRefresh($event)"> 
</ej-grid> 
 
app.component.ts 
export class AppComponent { 
  . . . 
   
  onTemplateRefresh(args) { 
     $(args.cell).find(".button").bind("click",function(e){ 
         //To do your code 
       });     
  } 
  
   
} 
 
 
And we can achieve this requirement by using custom command feature of feature of ejGrid control. Please refer to the below code example and online documentation link. 
app.component.html 
 
<ej-grid  [(dataSource)]="gridData" [columns]=col> 
</ej-grid> 
 
app.component.ts 
export class AppComponent { 
  . . . 
  public col:any; 
  public openCommand = [{ 
      type: "Detail", buttonOptions: { 
        text: "Open Report", 
        width: "100", 
        click: this.onOpenReportClick.bind(this), 
      } 
    }]; 
 
  constructor(private service: NorthwindService) { 
     
    . . . 
    this.col = [{field:"OrderID",isPrimaryKey:true}, 
    {field: "EmployeeID"},  
    {headerText: "Details", commands: this.openCommand, isUnbound: true, textAlign: ej.TextAlign.Left, width: 150} 
    ] 
  } 
 onOpenReportClick(e: any) { 
    debugger 
  } 
 
 
 
Note: if we use the command column, no need to use the jsRender template column to render the Grid column button. 
Regards, 
Saravanan A. 


DC Dan Clarke replied to Jemmy Lu June 15, 2017 02:37 PM UTC

hi,if put the template outside the ej-grid tag and use  text/x-jsrender as template so it is possible to call angular2 function in component if I have a button in jsrender template ?


Just to help anyone else out who's hitting this, Syncfusion have added an example of how to import the EJTemplateDirective that Jemmy mentions:

https://www.syncfusion.com/forums/130038/simple-template-example

(see their reply on the 25th April 2017)

SA Saravanan Arunachalam Syncfusion Team June 16, 2017 12:37 PM UTC

Hi Dan, 
We understood from your query, you need to render the ej-button in the template cell of Grid by using EJTemplateDirective and achieved this requirement like in below code example. 
[Html] 
<ej-grid [allowPaging]="true" 
 [pageSettings]="pagesetting" [allowGrouping]="true"  
 [dataSource]="gridData" 
 > 
     
    <e-columns> 
       <e-column headerText="Employee Image" width="110" textAlign="center"> 
            <!--Using template directive--> 
            <template e-template let-data> 
                <!--Render ej button with click event--> 
                <input type="button" ej-button id="button" [text]="text" [value]="Button" (click)="onClick($event)"/> 
            </template> 
        </e-column> 
          . . . 
    </e-columns> 
    
</ej-grid> 
 
[TS] 
export class GridComponent { 
    . . . 
    onClick(e) { 
            //To do your functionality 
        } 
} 
 
Note: In the latest version, we don’t need to manually inject the EJTemplateDirective in appModule.ts and it is injected automattically. 
If you are not using the latest version, inject the EJTemplateDirective in appModule.ts manually, 
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 { }  
 
 
And we have created a sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


Loader.
Up arrow icon