Category / Section
How to customize the column properties in Treegrid?
1 min read
In TreeGrid, we can dynamically update all the inner properties available in column property. And, we can include/exclude the TreeGrid columns dynamically by using “setModel” method.
Please find the code example to modify “headerText” and “textAlign” column property.
<input type="button" onclick="clickme()" style="margin-bottom:10px" value="Update Column"/> <div> <ej:TreeGrid runat="server" ID="Container" ChildMapping="Children"> <Columns> <ej:TreeGridColumn HeaderText="Task Id" Field="Id" Width="60"/> <ej:TreeGridColumn HeaderText="Task Name" Field="Name"/> <ej:TreeGridColumn HeaderText="Start Date" Field="StartDate" TextAlign="Center"/> <ej:TreeGridColumn HeaderText="Progress" Field="PercentDone" TextAlign="Right" /> </Columns> </ej:TreeGrid> </div> <script type="text/javascript"> //To dynamically change the TreeGrid columns function clickme() { var treeObj = $("#Container").data("ejTreeGrid"), clonedColumns = $.extend([], treeObj.model.columns), duration = { field: "EndDate", headerText: "End Date", duration: "numericedit" }; clonedColumns[0].headerText = "Id"; clonedColumns[1].headerText = "Name"; clonedColumns[3].headerText = "Percent Done"; clonedColumns[2].textAlign = ej.TextAlign.Right; clonedColumns[3].textAlign = ej.TextAlign.Center; //To include new column dynamically clonedColumns.push(duration); treeObj.setModel({ "columns": clonedColumns }); } </script>
The following output is displayed as a result of the above code example.
Sample
Please find the sample to customize the TreeGrid column properties.