1. Home
  2. Forum
  3. Angular - EJ 2
  4. Template in child grid

Template in child grid

Hi, 

I would like to use a template for a column in a child grid (hierarchical grid). 

As I need to define the childGrid in code, I tried something like that for the column : 

{ headerText: 'Module', template: '<ng-template #template let-data>{{data.myRowProperty}}</ng-template>' },

but it displays the {{data.myRowProperty}} like a string in the grid. I tried ${data.myRowProperty} but it's not working neither (syntax found in the template-engine documentation).  

How can I define the template like I tried to do ? 

After that, I will actually call a function from the template (not only show data.myRowProperty), and pass data.myRowProperty as a parameter, should I know something ? 

Thank you very much. Your components are really good and only the tricky things need explanations. 

14 Replies
PS Pavithra Subramaniyam Syncfusion Team January 28, 2019 06:41 AM UTC

Hi Atlante, 
 
Greetings from Syncfusion. 
 
Query: I would like to use a template for a column in a child grid (hierarchical grid).  
 
We have analyzed your query but currently, we do not have support to use ng-template in the child grid. We have already logged ‘template support for child grid’ as a feature and it will be available in any of our upcoming patch releases. So we suggest to use the below way to use template property in the child grid until then, 
 
Code Example:  
 
[.ts] 
... 
this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
                { headerText: 'Ship Country', template: '<div>${ShipCountry}</div>', width: 120 }, 
                { field: 'Freight', headerText: 'Freight', width: 120 }, 
                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
            ] 
        }; 
... 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


TH Thijs November 1, 2019 04:20 PM UTC

Regarding this issue, is there allready support for ng-template in a childgrid? the solution given is not working for me because I want to use an ejs-checkbox inside the template. something like:

this.childGrid = {
      queryString: 'appointmentId',
      columns: [
          { field: 'childid', headerText: 'childid'},
          { field: 'confirm', headerText: 'Confirm', template: '{ejs-checkbox #checkbox [checked]="data.confirmed" (change)="checkboxChange($event)"}{/ejs-checkbox}'},
      ]
    };



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 5, 2019 12:58 PM UTC

Hi Thijs, 

Thanks for contacting us. 

We do not have support for ng-template in childgrid. Since childGrid will render as a type-script component, it is not feasible to use ng-templates in childgrid. However you can use templates and other components in childGrid like our previous update or the below documentations. 

Documentation link: 

To display html elements: 

To render other components 

Regards, 
Seeni Sakthi Kumar S 


JA James February 17, 2020 11:58 PM UTC

Can you advise when support for ng-template in child grid will be released?

In your post below it was stated " We have already logged ‘template support for child grid’ as a feature and it will be available in any of our upcoming patch releases. "

DR Dhivya Rajendran Syncfusion Team February 18, 2020 08:56 AM UTC

Hi James, 

Greeting from Syncfusion support. 

Currently there is no definite time line to include this in to our source, However, in the mean time you can achieve your requirement by using the below way. Please refer the below code example and documentation for more information. 

 
@Component({ 
  selector: 'app-root', 
  template: `<ejs-grid #grid [dataSource]='pData' height='315px' [childGrid]='childGrid'> 
                  <e-columns> 
                      . . . . 
                    <e-column field='City' headerText='City' width=150></e-column> 
                  </e-columns> 
              </ejs-grid> 
              <ng-template #childtemplate let-data> 
                  <div class="image"> 
                          <img src="{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/> 
                   </div> 
              </ng-template> 
              `, 
  providers: [DetailRowService] 
}) 
export class AppComponent implements OnInit, AfterViewInit { 
 
  constructor(@Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { 
 
  } 
  public pData: object[]; 
  @ViewChild('childtemplate') public childtemplate: any; 
  @ViewChild('grid') public grid: GridComponent; 
  public childGrid: any; 
 
  ngAfterViewInit() { 
      this.childtemplate.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 
      this.childtemplate.elementRef.nativeElement.propName = 'template'; 
  } 
 
  ngOnInit(): void { 
      this.pData = employeeData; 
      this.childGrid = { 
          dataSource: data, 
          queryString: 'EmployeeID', 
          load() { 
              this.registeredTemplate = {};   // set registertemplate value as empty in load event 
          }, 
          columns: [ 
              { headerText: 'Employee Image’, template: this.childtemplate}, 
              { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
          ], 
      }; 
  } 
} 



Please get back to us if you need further assistance on this. 

Regards, 
R.Dhivya 


CA Chirag Aervadiya October 6, 2020 09:29 AM UTC

Hi Team,

I tried below sample but it is not working for me.


I want to implement button column with button action in child grid.

I have attached my .ts and .html files in zip

Attachment: managepreference.component_a97be7e1.zip

SK Sujith Kumar Rajkumar Syncfusion Team October 7, 2020 11:55 AM UTC

Hi Chirag, 
 
Based on your reported problem we suspect you are using latest angular package. In the latest angular packages(after Angular 9), there have been changes related to the angular’s ViewContainerRef property(used here for accessing the template in TS  file) which currently is not allowing to access the template content. More details on this can be checked in the below link where alternate approaches are suggested, 
 
 
So you can resolve this problem using any of the approach suggested in the above link or set the ‘static’ property as ‘false’ while using the ViewChild to access the template instance. This is demonstrated in the below code snippet, 
 
export class AppComponent implements OnInit, AfterViewInit { 
    @ViewChild('childTemplate', { static: true }) 
    public template: TemplateRef<{}>; 
    public childGrid: any; 
 
     constructor(@Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { 
 
    } 
 
    ngAfterViewInit() { 
        this.template.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 
        this.template.elementRef.nativeElement.propName = 'template'; 
    } 
 
    ngOnInit(): void { 
        this.childGrid = { 
                    . 
                    . 
            columns: [ 
                { headerText: 'Customer ID', template: this.template, width: 150 }, 
                                  . 
                                  . 
            ], 
        }; 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


VI vin March 25, 2021 03:17 AM UTC

i tried adding the template to my child grid 
I get this.template as  undefined

 @ViewChild('childTemplate', { static: true })  public template: TemplateRef<{}>;

constructor( @Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) 
 ngAfterViewInit() {
this.template.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;
        this.template.elementRef.nativeElement.propName = 'template';
}

  <ng-template #childTemplate let-data>
                                                <div>{{data.itemName}}</div>
                                            </ng-template>



 childGridDataBind() {
    this.childGrid = {
      dataSource: this.childdata,
      // id: "DestGrid",
      queryString: "queryId",
      allowPaging: false,

      pageSettings: { pageSize: 6, pageCount: 5 },
      load: function () {
        this.registeredTemplate = {}; //set registertemplate value as empty in load event
      },
      columns: [
       
        {
          field: "itemNumber",
          headerText: "ID",
          isPrimaryKey: false,
          width: 120
        },
        {
         // field: "itemName",
          headerText: "Name",
          textAlign: "left",
          template: this.childtemplate,
          // template:  "<div ><a rel='nofollow' href='javascript:void(0);' onclick='showTaskRedirect(event)'> ${itemName}</a></div>",

          // template: "<a rel='nofollow' rel='nofollow' href=javascript:void(0);' id='templink' name='templink' > ${itemName}</a>", 
          width: 120

        },
        {
          field: "nodeType",
          headerText: "Node Type",
          textAlign: "left",
          width: 120
        }
        ,
        {
          field: "itemSTartDate",
          headerText: "Start Date",
          textAlign: "left",
          width: 120
        },
        {
          field: "itemEndDate",
          headerText: "End Date",
          textAlign: "left",
          width: 120
        }


      ]

    };
    
  }

SK Sujith Kumar Rajkumar Syncfusion Team March 25, 2021 11:56 AM UTC

Hi Vin, 
 
Greetings from Syncfusion support. 
 
We checked the shared code snippet and could see that you have accessed and assigned the child template to ‘template’ public property(“public template: TemplateRef<{}>;”) but defined it in the child Grid column as ‘childtemplate’(template: this.childtemplate). So please ensure from your end if you have provided the template properly to the child Grid column. 
 
Please find the below updated sample for your reference, 
 
 
If you have specified the template properly but problem still persists then please share us the following information to validate further on this, 
 
  • Are any console errors thrown? If so please share it.
  • Angular package version.
  • Screenshot image of rendered child Grid.
  • Syncfusion package version used.
  • Entire Grid and child Grid rendering code.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.
 
Regards, 
Sujith R 


VI vin March 25, 2021 02:48 PM UTC

Sorry for the confusion, i have 2 of them. Still it is undefined
 @ViewChild('childtemplate', { static: true })     public childtemplate: TemplateRef<{}>; 
  @ViewChild('childTemplate', { static: true })  public template: TemplateRef<{}>;


VI vin March 26, 2021 03:46 AM UTC

No other errors, only undefined which i told previously for the template ref


"@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@syncfusion/ej2-angular-base": "^18.2.57",
    "@syncfusion/ej2-angular-buttons": "^18.2.58",
    "@syncfusion/ej2-angular-calendars": "^18.2.56",
    "@syncfusion/ej2-angular-charts": "^18.2.58",
    "@syncfusion/ej2-angular-diagrams": "^18.2.59",
    "@syncfusion/ej2-angular-dropdowns": "^18.2.59",
    "@syncfusion/ej2-angular-gantt": "^18.2.46",
    "@syncfusion/ej2-angular-grids": "^18.2.59",
    "@syncfusion/ej2-angular-heatmap": "^18.2.57",
    "@syncfusion/ej2-angular-inputs": "^18.2.59",
    "@syncfusion/ej2-angular-kanban": "^18.4.30",
    "@syncfusion/ej2-angular-navigations": "^18.3.50",
    "@syncfusion/ej2-angular-notifications": "^18.2.54",
    "@syncfusion/ej2-angular-popups": "^18.2.57",
    "@syncfusion/ej2-angular-progressbar": "^18.4.30",
    "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",
    "@syncfusion/ej2-angular-spreadsheet": "^18.4.33",
    "bootstrap": "^4.5.2",
    "classlist.js": "^1.1.20150312",
    "install": "^0.13.0",
    "jquery": "^3.5.1",
    "moment": "^2.29.0",
    "ngx-moment": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.4.0",
    "ts": "^0.2.2",
    "tslib": "^1.13.0",
    "xlsx": "^0.16.7",
    "zone.js": "~0.9.1"




import { Component, TemplateRef, Inject, AfterViewInit, ViewContainerRef, OnInit, ViewChild, ViewEncapsulation,ElementRef } from '@angular/core';

import { EditSettingsModel, CellEditArgs, ToolbarItems, IEditCell, CommandModel, ContextMenuItemModel, FilterSettingsModel, SaveEventArgs, GridComponent, Column } from '@syncfusion/ej2-angular-grids';
import { PageSettingsModel, CommandClickEventArgs } from '@syncfusion/ej2-angular-grids';
import { ProjectChartsService } from '../project-charts.service';
import { LeftNavService } from 'src/app/onboarding/left-nav.service';
import { TabComponent } from '@syncfusion/ej2-angular-navigations';

import { ClickEventArgs, EventArgs } from '@syncfusion/ej2-angular-navigations';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

import { EmitType } from '@syncfusion/ej2-base';
import { GroupSettingsModel, parentsUntil, DetailRowService } from '@syncfusion/ej2-angular-grids';
import { AnimationModel, RangeColorModel, ProgressBar } from '@syncfusion/ej2-progressbar';
import { ProgressTheme, ILoadedEventArgs } from '@syncfusion/ej2-progressbar';
import { FontModel } from '@syncfusion/ej2-angular-charts';
import { Router } from '@angular/router';


SK Sujith Kumar Rajkumar Syncfusion Team March 26, 2021 10:15 AM UTC

Hi Vin, 
 
Based on the shared details we could see that you have accessed two angular template’s as – ‘childtemplate’(property name - childtemplate) and ‘childTemplate’(property name - template). Then in the angular’s ngAfterViewInit function you have initialized the template with this property – ‘this.template’ but set this property – ‘this.childtemplate’ to the child Grid column’s template which is not initialized. 
 
We suspect you are initializing and assigning the wrong template which is causing the problem. So if you are initializing ‘this.template’ property in the ngAfterViewInit then please provide the same in the child Grid template and it is the same case if you are initializing ‘this.childTemplate’ property. 
 
Please check the below updated sample for your reference where we have initialized two angular templates and set one of them to the child Grid column, 
 
Since you are using older packages, we suggest you to follow the steps provided below for upgrading the Syncfusion packages to the latest version and remove duplicate packages in the node modules folder(if any) and check if the problem is resolved,  
 
  1. Delete package.lock.json file from your application.  
  2. Remove the @syncfusion package folder from the node_modules.
  3. Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
  4. Then install the NPM packages.
 
If problem still persists then please share us the following information requested in our previous update to validate further on this, 
 
  • Screenshot image of rendered child Grid.
  • Entire Grid and child Grid rendering code.
  • Are you able to reproduce the reported problem in the above shared sample? If not can you please try to replicate your problem scenario in the above provided sample or share us a reproducible sample. It will be helpful to identify your exact problem case and provide the solution based on that
 
Regards, 
Sujith R 


VI vin March 28, 2021 06:17 PM UTC

Yes i tried changing the TemplateRef names 

I also tried updating to Angular 9 - same issue

The only difference is, i am using tabs, it already has ng-template ---- is it causing issue?
 <ejs-tab #tabsElement id="tabsElement" (selected)="clickTabs($event)">   
 <e-tabitems>
                <e-tabitem [header]='headerText[0]'>
                    <ng-template #content>



 <ng-template #childtemplate let-data> 
                                                <div> 
                                                  <a  rel='nofollow' rel='nofollow' href="https://ej2.syncfusion.com/documentation/grid/" (click)="hyperclick()">{{data.itemName}}a> 
                                                div> 
                                              ng-template> 
                                              <ng-template #template let-data>
                                                <div>x-{{data.itemName}}div>
                                            ng-template>

  @ViewChild('childtemplate', { static: true }) public childtemplate: TemplateRef<{}>;
  @ViewChild('template', { static: true }) public template: TemplateRef<{}>;


     
      columns: [

        {
          field: "itemNumber",
          headerText: "ID",
          isPrimaryKey: false,
          width: 120
        },
        {
          // field: "itemName",
          headerText: "Name",
          textAlign: "left",
          template: this.template,
          
          width: 120

        }]






ngAfterViewInit() {
    console.log('this.childtemplate', this.childtemplate);
    // this.childtemplate.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;

    this.childtemplate.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;
    this.childtemplate.elementRef.nativeElement.propName = 'childtemplate';

    this.template.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;
    this.template.elementRef.nativeElement.propName = 'template';
  }









{
  "name": "ts-screens",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.13",
    "@angular/common": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@syncfusion/ej2-angular-base": "*",
    "@syncfusion/ej2-angular-buttons": "*",
    "@syncfusion/ej2-angular-calendars": "*",
    "@syncfusion/ej2-angular-charts": "*",
    "@syncfusion/ej2-angular-diagrams": "*",
    "@syncfusion/ej2-angular-dropdowns": "*",
    "@syncfusion/ej2-angular-gantt": "*",
    "@syncfusion/ej2-angular-grids": "*",
    "@syncfusion/ej2-angular-heatmap": "*",
    "@syncfusion/ej2-angular-inputs": "*",
    "@syncfusion/ej2-angular-kanban": "*",
    "@syncfusion/ej2-angular-navigations": "*",
    "@syncfusion/ej2-angular-notifications": "*",
    "@syncfusion/ej2-angular-popups": "*",
    "@syncfusion/ej2-angular-progressbar": "*",
    "@syncfusion/ej2-angular-richtexteditor": "*",
    "@syncfusion/ej2-angular-spreadsheet": "*",
    "@syncfusion/ej2-base": "*",
    "@syncfusion/ej2-buttons": "*",
    "@syncfusion/ej2-calendars": "*",
    "@syncfusion/ej2-charts": "*",
    "@syncfusion/ej2-diagrams": "*",
    "@syncfusion/ej2-dropdowns": "*",
    "@syncfusion/ej2-gantt": "*",
    "@syncfusion/ej2-grids": "*",
    "@syncfusion/ej2-heatmap": "*",
    "@syncfusion/ej2-inputs": "*",
    "@syncfusion/ej2-kanban": "*",
    "@syncfusion/ej2-navigations": "*",
    "@syncfusion/ej2-notifications": "*",
    "@syncfusion/ej2-popups": "*",
    "@syncfusion/ej2-progressbar": "*",
    "@syncfusion/ej2-richtexteditor": "*",
    "@syncfusion/ej2-spreadsheet": "*",
    "@syncfusion/ej2-layouts": "*",
    "@syncfusion/ej2-angular-layouts": "*",
    "bootstrap": "^4.5.2",
    "classlist.js": "^1.1.20150312",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "ngx-moment": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "6.5.5",
    "ts": "^0.2.2",
    "tslib": "^1.10.0",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "^9.1.15",
    "@angular/compiler-cli": "~9.1.13",
    "@angular/language-service": "~9.1.13",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^5.4.4",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}


SK Sujith Kumar Rajkumar Syncfusion Team March 29, 2021 12:54 PM UTC

Hi Vin,  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.     
  
  
Regards,   
Sujith R 


Loader.
Up arrow icon