We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the column properties in Treegrid

Platform: JavaScript |
Control: ejTreeGrid |
Published Date: July 31, 2017 |
Last Revised Date: May 29, 2019

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 () {
                 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           
            treeObj.setModel({ "columns": clonedColumns });

The following output is displayed as a result of the above code example.

Customize the tree grid column properties.


Please find the sample to customize the TreeGrid column properties.


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon