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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid column with template doesn't work

Thread ID:

Created:

Updated:

Platform:

Replies:

129445 Mar 18,2017 03:21 PM UTC Jun 16,2017 12:37 PM UTC Angular 8
loading
Tags: ejGrid
Jemmy Lu
Asked On March 18, 2017 03:21 PM UTC

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>



Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Jemmy Lu
Replied On 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.

Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Jemmy Lu
Replied On 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 ?


Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Dan Clarke
Replied On 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)

Saravanan Arunachalam [Syncfusion]
Replied On 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. 


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.

Warning Icon 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.Close Icon

;