New to Kendo UI for jQuery? Start a free 30-day trial

LockColumn

methods

Locks (freezes) a column and allows the user to see it at all times when scrolling.

lockColumn

Parameters:columnNumber|String

The index of the column or the field to which the columns is bound.

To use this method, initialize the TreeList with at least one locked column and render unlocked columns which will remain after the target column is locked.

<button id="btn">Lock Age Column</button>
<div id="treeList" style="width: 400px"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id", locked: true, width: 150 },
      { field: "name", width: 150 },
      { field: "age", width: 150 }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    scrollable: true
  });
  $("#btn").click(function(){
    var treeList = $("#treeList").data("kendoTreeList");
    treeList.lockColumn("age");
  });
</script>