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>
A Sample to Freeze the column is available in the following link,