2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
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. SamplePlease find the sample to customize the TreeGrid column properties. |
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.