Articles in this section
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 () {
                 queryCellInfo: function (args) {
                    //To align a row towards center
                    if ( == 4)
                        $(args.cellElement).css({ "text-align": "center" });
                    //To align a cell towards left
                    if (( == 7 && args.column.field == "endDate") || ( == 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";

The following screenshot shows result of the above code example.



A sample to align the cell content in the Gantt cell 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