Dynamically customiz the column properties in ASP.NET MVC Treegrid.
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.
<button onclick="clickme()" style="margin-bottom:10px">Update Column</button>
@(Html.EJ().TreeGrid("TreeGridContainer")
.Columns(co =>
{
co.Field("taskID").HeaderText("Task Id").Width(60).Add();
co.Field("taskName").HeaderText("Task Name").Add();
co.Field("startDate").HeaderText("Start Date").TextAlign(TextAlign.Center).Add();
co.Field("progress").HeaderText("Progress").TextAlign(TextAlign.Right).Add();
})
)@(Html.EJ().ScriptManager())
<script type="text/javascript">
//To dynamically change the TreeGrid columns
function clickme() {
var treeObj = $("#TreeGridContainer").data("ejTreeGrid"),
clonedColumns = $.extend([], treeObj.model.columns),
duration = { field: "duration", headerText: "Duration", 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.
Conclusion
I hope you enjoyed learning about how to customize the column properties in ASP.NET MVC Treegrid.
You can refer to our ASP.NET MVC TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC TreeGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
