Dynamic Column template

[Emerson Luis Koslovski]

Hi

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;

    ngAfterViewInit(){

        var column : any = { field: 'taskName', headerText: 'Name', width: 50};

        this.columns.push(column);

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

        this.columns.push(column2);

    }

}

<div class="control-section">

    <ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='0' [allowPaging]=true [columns]=columns>        

    </ejs-treegrid>

</div>

<ng-template #template let-data>

  <input type="text">

</ng-template>

[Padmavathy Kamalanathan]

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.  

https://www.syncfusion.com/feedback/7843/template-in-column-has-not-been-rendered-while-adding-treegrid-columns-dynamically 

 

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"> 

</ejs-treegrid> 

 

<ng-template let-data #template1> 

  <button ejs-button>Button</button> 

</ng-template> 

 

In app.component.ts 

    ngAfterViewInit(){  

         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, 

https://stackblitz.com/edit/angular-u7hyfk-pldild 

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

Regards, 

Padmavathy Kamalanathan 

[Padmavathy Kamalanathan]

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. 

Regards, 

Padmavathy Kamalanathan 

[Indira P Vaddiparti]

how can i add dynamic hyperlinks to the tree grid, the hyperlinks should be updated based on the row data

[Farveen Sulthana Thameeztheen Basha]

Hi Indira, 

Greetings from Syncfusion Support. 

Query#:- how can i add dynamic hyperlinks to the tree grid, the hyperlinks should be updated based on the row data 

We have checked your query and we have placed dynamic Hyperlinks based on the row data using Template column feature of the TreeGrid.  Refer to the code below:- 

App.Component.html:- 

 

<ejs-treegrid 

        #treegrid 

    [dataSource] = "data" 

    childMapping = "subtasks" 

    height = "350" 

    [treeColumnIndex] = "0" 

    [allowPaging] = "true" 

    [pageSettings] = "pageSettings" 

        > 

        <e-columns> 

            <e-column 

                field="taskID" 

                headerText="Task ID" 

                width="150" 

                textAlign="Right" 

            ></e-column> 

            <e-column field="taskName" headerText="Task Name" width="200"> 

                <ng-template #template let-data> 

                    <div class="url"> 

                        <a rel='nofollow' href="https://ej2.syncfusion.com/documentation/{{ data.taskName}}">{{data.taskName}}</a> 

                    </div> 

                </ng-template> 

            </e-column> 

        </e-columns> 

  </ejs-treegrid> 

Sample LinK:-   https://stackblitz.com/edit/angular-zk5xg1?file=app.component.html 

 

Please share more details if we misinterpreted your query or your requirement is different from above solution. 

Regards, 

Farveen sulthana T