Articles in this section
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 () {
                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
        function show() {
            var ganttObj = $("#GanttContainer").data("ejGantt");
            //To show the Particular column
            ganttObj.showColumn("Start Date");

A sample to hide/show columns in Gantt is available in the following link,




Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment