Category / Section
How to align cell content in Gantt
1 min read
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,
