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:
A sample to align the cell content in the Tree Grid cell is available in the following link,