Category / Section
How to show or hide columns in Gantt at runtime
1 min read
In Gantt, It is possible to show or hide columns dynamically using hideColumn and showColumn public methods. We need call the methods with column header text as the method parameter.
The below code example explains about how to hide and show columns in Gantt:
<div id="GanttContainer" style="height:450px;width:100%"></div>
<button onclick="hide()" style="margin-top:10px">Hide column</button>
<button onclick="show()" style="margin-top:10px">Show column</button>
<script type="text/javascript">
$(function () {
$("#GanttContainer").ejGantt({
//...
taskIdMapping: "taskID",
startDateMapping: "startDate",
load: function (args) {
var column = this.getColumns();
for (var i = 0; i < column.length; i++) {
//To hide the Start Date field
if (column[i].mappingName == "startDate") {
column[i].visible = false;
}
}
}
})
});
function hide() {
var ganttObj = $("#GanttContainer").data("ejGantt");
//To Hide the Particular column
ganttObj.hideColumn("ID");
}
function show() {
var ganttObj = $("#GanttContainer").data("ejGantt");
//To show the Particular column
ganttObj.showColumn("Start Date");
}
</script>
A sample to hide/show columns in Gantt is available in the following link,
