In Gantt, by default the cell content is aligned towards left but it is possible to align the cell content to left, right, center using columns property in “load” client side event. It is also possible to change the content alignment only for a specific row or a specific cell using “queryCellInfo” client side event. The below code example explains about how to change the cell content alignment in Gantt. <div id="GanttContainer" style="height:450px;width:100%"></div> <script type="text/javascript"> $(function () { $("#GanttContainer").ejGantt({ // queryCellInfo: function (args) { //To align a row towards center if (args.data.index == 4) $(args.cellElement).css({ "text-align": "center" }); //To align a cell towards left if ((args.data.index == 7 && args.column.field == "endDate") || (args.data.index == 2 && args.column.field == "startDate")) $(args.cellElement).css({ "text-align": "left" }); }, load: function (args) { var columns = this.getColumns(); columns[2].textAlign = "right"; columns[3].textAlign = "center"; } }) }); </script> The following screenshot shows result of the above code example. Sample A sample to align the cell content in the Gantt cell is available in the following link, Sample
In jQuery Gantt, we can hide or show the columns using hideColumn and showColumn public methods. We need to call these methods using the column’s header text as parameter. It is not possible to hide the tree/expander column by default. The following code snippet explains how to hide/show the column at an external button click event. <button id="hidecolumn">Hide Task Name field</button> <button id="showcolumn">Show Task Name field</button> <div id="gantt" style="position: absolute; height:550px; width:1300px"></div> <script type="text/javascript"> $(function () { $("#gantt").ejGantt({ treeColumnIndex:3, //... }); }); $("#hidecolumn").click(function () { var ganttObj = $("#gantt").data("ejGantt"); ganttObj.hideColumn("Task Name"); }); $("#showcolumn").click(function () { ganttObj = $("#gantt").data("ejGantt"); ganttObj.showColumn("Task Name") }); </script> Sample: A sample to hide or show a column in the button click event is available in the following link. Sample
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, Sample