How to add extra columns in Gantt?

[Marko]

Hi,

on this page is shown how to add extra columns in gantt in js: https://www.syncfusion.com/kb/2680/how-to-add-extra-columns-in-gantt

Now I wonder, how can i do this in Angular2?

I know, that i can bind load in ej-gantt ((load)="load(args)"), but inside of my load function i can not call var columns = this.getColumns();

Thank you for your answer in advence.

Marko

[Jayakumar Duraisamy]

Hi Marko, 

Thanks for contacting Syncfusion support. 

We can get the Gantt column collection by using Gantt control instance. We have prepared a sample and added custom column in Gantt control using load event. 

Please refer the following code snippet. 

[html] 

<ej-gantt id="GanttControl" [dataSource]="ganttData"  

// 

(load)="ganttLoad($event)" 

</ej-gantt> 

[TS] 

ganttLoad = function (args) { 

        var ganttObj = $("#GanttControl").ejGantt("instance"); 

        var columns = ganttObj.getColumns(); 

var col1 = { 

            field:"column1", 

            headerText:"Column 1", 

            editType:"stringedit", 

            mappingName:"column1" 

        }, 

        col2 = { 

            field:"column2", 

            headerText:"Column 2", 

            editType:"stringedit", 

            mappingName:"column2" 

        }, 

        col3 = { 

            field:"column3", 

            headerText:"Column 3", 

            editType:"stringedit", 

            mappingName:"column3" 

        };        

        columns.splice(2,0,col1); 

        columns.push(col2); 

        columns.push(col3);         

    } 

 

Please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt_customCol1479681294.zip 

Please let us know if you require further assistance on this. 

Regards, 

Jayakumar D