How to add/remove columns in gantt chart dynamically?

[Ashutosh Khanapure]

Hi,

I want to add a dropdown in Gantt chart which will be consisting column names that would be multi-selectable checkboxes. On selection/deselection of the options in dropdown, the user should be able to add/remove columns selected from dropdown in the Gantt chart. Please help me know is there any way to achieve this functionality

[Monisha Sivanthilingam]

Hi Ashutosh, 

 

Greetings from Syncfusion support. 

 

We would like to inform you that we can achieve your requirement by making use of the Column Menu support in Gantt  Chart. The column menu has an integrated option to interact with the features such as sorting, filtering, column chooser, and autofit. We can use the Column Chooser to remove/add columns according to your requirement. To enable the Column Menu, you have to set the showColumnMenu property to true. 

 

 

 

To learn more about Column Menu in Gantt Chart, please refer to our Online Documentation and Sample. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Ashutosh Khanapure]

Thanks @Monisha for the quick response. Actually, I want to have a dropdown that will add/remove columns as shown in below screenshot. Is it feasible? 

[Monisha Sivanthilingam]

Hi Ashutosh, 

 

Currently, we are facing some difficulties in preparing a sample for you. We will provide you with further details within two business days(October 25, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Ashutosh,  

  

Currently, we are facing some difficulties in preparing a sample for you. We will provide you with further details within one business day(October 27, 2021).  

  

We appreciate your patience until then.  

  

Regards,  

Monisha. 

[Monisha Sivanthilingam]

Hi Ashutosh, 

  

Thank you for your patience. 

  

We have prepared a sample meeting your requirements. We have used the Gantt Chart’s dataBound event to create the Dropdown Tree control and have appended it to the Gantt Chart’s custom toolbar item. We have made use of a flag to ensure that the dropdown is created only once and not every time the dataBound event is triggered. We have also made use of the beforeOpen event available in the Dropdown Tree to check all the columns that are available the first time using the selectAll method. We have then used the close event to get the values of all the selected items and have passed that values to the column collection in Gantt Chart. The following code snippets demonstrate the solution. 

  

App.component.html 

  

<ejs-gantt 

    id="ganttDefault" 

    #gantt 

    height="430px" 

    [dataSource]="data" 

    [taskFields]="taskSettings" 

    [allowSelection]="true" 

    [labelSettings]="labelSettings" 

    height="400px" 

    [projectStartDate]="projectStartDate" 

    [projectEndDate]="projectEndDate" 

    [highlightWeekends]="true" 

    [columns]="columns" 

    [toolbar]="toolbar" 

    (dataBound)="dataBound($event)" 

  > 

</ejs-gantt> 

  

  

App.component.ts 

  

this.toolbar = [ 

 { 

   tooltipText: 'Column chooser', 

   id: 'columnChooser', 

 } 

]; 

  

public dataBound(args: any) { 

  if (this.flag) { 

    let selected: boolean = true; 

    let DropDownTreeObj = new DropDownTree({ 

        fields: { 

          dataSource: this.dtreedata, 

          value: 'name', 

          text: 'name', 

        }, 

        showCheckBox: true, 

        placeholder: 'Column Chooser', 

        popupWidth: '300px', 

        beforeOpen: function () { 

          if (selected) { 

            DropDownTreeObj.selectAll(true); 

            selected = false; 

          } 

        }, 

        close: function (args) { 

          var gantt = (document.getElementById('ganttDefault') as any) 

            .ej2_instances[0]; 

          var showColumns = []; 

          for (var i = 0; i < DropDownTreeObj.value.length; i++) { 

            showColumns.push(DropDownTreeObj.value[i]); 

          } 

          gantt.columns = showColumns; 

        }, 

    }); 

    DropDownTreeObj.appendTo('#columnChooser'); 

    this.flag = false; 

  } 

} 

  

  

Sample: https://stackblitz.com/edit/angular-8fgqrx?file=app.component.ts 

  

Please contact us if you require any further assistance. 

  

Regards, 

Monisha. 

[Ashutosh Khanapure]

Thanks for the solution

[Monisha Sivanthilingam]

Hi Ashutosh, 

 

You are welcome. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.