1. Tag Results
gantt-columns (3)
1 - 3 of 3
How to align cell content in Gantt
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  
How to show or hide the columns in Gantt?
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
How to show or hide columns in Gantt at runtime
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    
No articles found
No articles found
1 of 1 pages (3 items)