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,
