Show / Hide Column dynamically

[Christian DAquino]

Is there any issues with the show/hide functionality for columns: https://ej2.syncfusion.com/vue/documentation/gantt/columns/#show-or-hide-columns-dynamically

It doesn't seem to be working for me. Do I need to refresh the grid somehow after calling the show/hide method?

[Monisha Sivanthilingam]

Hi Christian, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your query and we did not face any issues in showing/hiding the Gantt Chart columns dynamically. We used the same code as the one in the online documentation link you shared above. Please find the sample we have prepared using the same code snippets below. 

 

Sample: https://codesandbox.io/s/vue-template-forked-t9im9?file=/src/App.vue 

 

Please ensure the following points in your sample. 

 

1. Ensure that the header text provided for the column in the column definition is passed as parameters for the showcolumn and hideColumn methods match.

 

columns: [ 

        { 

          field: "TaskID", 

          headerText: "Task ID", 

          textAlign: "Left", 

          width: "100", 

        }, 

        { field: "TaskName", headerText: "Task Name", width: "150" }, 

        { field: "StartDate", headerText: "Start Date", width: "150" }, 

        { field: "Duration", headerText: "Duration", width: "150" }, 

        { field: "Progress", headerText: "Progress", width: "150" }, 

      ], 

 

 

 

methods: { 

    show: function (e) { 

      var ganttChart = document.getElementById("gantt").ej2_instances[0]; 

      ganttChart.showColumn(["Task Name"]); 

    }, 

    hide: function (e) { 

      var ganttChart = document.getElementById("gantt").ej2_instances[0]; 

      ganttChart.hideColumn(["Task Name"]); 

    }, 

  }, 

 

 

 

2. Please ensure that you have correctly mapped the id of the Gantt Chart application in the following instances.

 

<ejs-gantt 

      id="gantt" 

      ref="gantt" 

      :labelSettings="labelSettings" 

      :dataSource="data" 

      :columns="columns" 

      :taskFields="taskFields" 

    > 

    </ejs-gantt> 

 

 

 

methods: { 

    show: function (e) { 

      var ganttChart = document.getElementById("gantt").ej2_instances[0]; 

      ganttChart.showColumn(["Duration"]); 

    }, 

    hide: function (e) { 

      var ganttChart = document.getElementById("gantt").ej2_instances[0]; 

      ganttChart.hideColumn(["Duration"]); 

    }, 

  }, 

 

 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.