Articles in this section
Category / Section

How to freeze columns in TreeGrid

1 min read

TreeGrid provides support to freeze the columns. In the columns collection, to freeze a specific column, we need to enable the isFrozen property and to enable/disable the freezing option in the column menu for a specific column, we need to set allowFreezing property as true/false.

By using the freezeColumn public method we can dynamically freeze the specified column.

The below code example explains about how to freeze a column

<div id="TreeGridContainer" style="height:400px;width:100%"></div> 
<button onclick="clickme()" style="margin-top:10px">Freeze Column</button>   
<script type="text/javascript">
$(function () {
            $("#TreeGridContainer").ejTreeGrid({
                //...
                dataSource: projectData,
                showColumnChooser:true,
                columns: [
                    { field: "taskID", headerText: "ID", width:       60,allowFreezing:false,isFrozen:true },
                    { field: "taskName", headerText: "Task Name", width: 200, },
                    { field: "startDate", headerText: "Start Date" },
                    { field: "endDate", headerText: "End Date" },
                    { field: "duration", headerText: "Duration"},
        { field: "approved", headerText: "Approved"},
                    { field: "priority", headerText: "Priority" },
                    { field: "progress", headerText: "Progress"}
                ]
            });
        });
        function clickme() {
            var treeObj = $("#TreeGridContainer").data("ejTreeGrid");
            treeObj.freezeColumn("taskName", true);
        }         
</script>

 

Freeze a specific column.A Sample to Freeze the column is available in the following link,

Sample

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied