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.
Unfortunately, activation email could not send to your email. Please try again.

Simple Template Example

Thread ID:

Created:

Updated:

Platform:

Replies:

130038 Apr 17,2017 09:28 PM Jun 16,2017 05:43 AM Angular 11
loading
Tags: ejGrid
Zack
Asked On April 17, 2017 09:28 PM

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 [Syncfusion]
Replied On April 18, 2017 05:41 AM

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. 


Zack
Replied On April 18, 2017 10:37 AM

    <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 [Syncfusion]
Replied On April 19, 2017 07:59 AM

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 'http://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

Zack
Replied On April 19, 2017 12:04 PM

        <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 [Syncfusion]
Replied On April 20, 2017 02:00 AM

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
Replied On April 20, 2017 03:53 AM

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 [Syncfusion]
Replied On April 21, 2017 04:40 AM

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
Replied On April 23, 2017 11:47 AM

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 [Syncfusion]
Replied On April 25, 2017 05:45 AM

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
Replied On June 15, 2017 10:32 AM

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 [Syncfusion]
Replied On June 16, 2017 05:43 AM

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. 


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.

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.

;