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.
<button onclick="clickme()" style="margin-bottom:10px">Update Column</button>
<div id="TreeGridContainer" style="height:400px;width:100%"></div>
<script type="text/javascript">
$(function () {
$("#TreeGridContainer").ejTreeGrid({
//
columns: [
{ field: "taskID", headerText: "Task Id", editType: "numericedit", width: "60" },
{ field: "taskName", headerText: "Task Name", editType: "stringedit", },
{ field: "startDate", headerText: "Start Date", editType: "datepicker", textAlign: ej.TextAlign.Center },
{ field: "progress", headerText: "Progress", editType: "numericedit",textAlign:ej.TextAlign.Right }
] })
});
//To dynamically update 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.
