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 () {
            $("#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.

C:\Users\Jonesherine.Stephen\Desktop\sshot-1.png

Sample

A sample to align the cell content in the Gantt cell is available in the following link,

Sample

 

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