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

Dynamic Column template

Thread ID:





146212 Jul 25,2019 07:59 PM UTC Sep 10,2019 05:07 AM UTC Angular - EJ 2 2
Tags: TreeGrid
Emerson Luis Koslovski
Asked On July 25, 2019 07:59 PM UTC

I am trying to add columns dynamically to a treegrid, but when I add a template, the component is not shown, I am doing so

export class AppComponent implements AfterViewInit{

    columns : Array<any> = new Array;
    @ViewChild('template',{static: false}) inputText: NgModel;

        var column : any = { field: 'taskName', headerText: 'Name', width: 50};
        var column2 : any = { field: 'taskName', headerText: 'temp', width: 50, template:this.inputText};

<div class="control-section">
    <ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='0' [allowPaging]=true [columns]=columns>        

<ng-template #template let-data>
  <input type="text">

Padmavathy Kamalanathan [Syncfusion]
Replied On July 30, 2019 01:38 PM UTC

Hi Emerson, 

Thanks for your patience. 

QUERY: I am trying to add columns dynamically to a treegrid, but when I add a template, the component is not shown 
We have validated the defect you have initiated with us. Thank you for the taking the time to report the issue and helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including its fix in our subsequent release. So fix for the issue will be included in our upcoming patch release which is expected to be rolled out in the first week of August 2019. 

You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.  
Note: To view the above feedback, kindly login into your account.  
Until then we suggest you to use the below solution as work around, 

In app.component.html 

<ejs-treegrid #treegrid (load)='load($event)' [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='0' [columns]="treegridColumns"> 
<ng-template let-data #template1> 
  <button ejs-button>Button</button> 
In app.component.ts 
         this.treegridColumns = [{ field: "taskID", isPrimaryKey: "true", headerText: "Task ID", width: "90" }, 
        { headerText: "taskName", width: "90", template: this.temp1}]; 
load(args: any): void { 
    var tree = this.treegrid 
    this.treegrid.grid.load = function(args){ 
        this['viewContainerRef'] = tree['viewContainerRef']; 

Please refer the below sample, 

If you have further queries, please get back to us. 

Padmavathy Kamalanathan 

Padmavathy Kamalanathan [Syncfusion]
Replied On September 10, 2019 05:07 AM UTC

Hi Emerson, 

We are glad to announce that the fix for this issue has been rolled out in our patch release.  

Please upgrade to the version17.2.40 or above. 
Please get back to us if you need further assistance. 

Padmavathy Kamalanathan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon