Articles in this section
Category / Section

How to align cell content in TreeGrid?

2 mins read

In jQuery TreeGrid, by default the cell content is aligned towards left but it is possible to align the cell content to left, right, center and justify using columns.textAlign property. It is also possible to change the content alignment only for a specific row or a specific cell using queryCellInfo event. The below code example explains about how to change the cell content alignment in TreeGrid.

<div id="TreeGridContainer" style="height:400px;width:100%"></div>    
<script type="text/javascript">
    $(function() {
        $("#TreeGridContainer").ejTreeGrid({
            //To column taskID towards center
            columns: [{
                field: "taskID",
                headerText: "Task Id",
                editType: "numericedit",
                textAlign: "center"
            },
            ],
            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 right
                if ((args.data.index == 7 && args.column.field == "taskName") || (args.data.index == 2 && args.column.field == "startDate"))
                    $(args.cellElement).css({
                        "text-align": "right"
                    });
            },
            })
    });
</script>

Screenshot:

Align cell content in jQuery TreeGrid

A sample to align the cell content in the Tree Grid 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 sign in to leave a comment
Access denied
Access denied