Edit this page

Prevent Specific Column Reordering in Grid

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Created with the 2017.3.1026 version

Description

How can I prevent a specific column to be reordered in the Kendo UI Grid?

Suggested Workaround

The Kendo UI Grid does not provide a built-in solution for achieving this behavior. However, you can still work around the issue.

  1. In the dataBound event handler, save the column in a global variable.
  2. In the columnReorder event handler, use the reorderColumn method to position the column in the desired spot.
<div id="grid"></div>
<script>
    var nonReordableColumn;  

    $("#grid").kendoGrid({
      columns: [
        { field: "fname" },
        { field: "lname" },
        { field: "age" }
      ],
      dataSource: [
        { fname: "Jane", lname: "Doe", age: 30 },
        { fname: "John", lname: "Doe", age: 33 }
      ],
      dataBound: function(e){
        nonReordableColumn = e.sender.columns[0];
      },
      reorderable: true,
      columnReorder: function(e) {
        var grid = e.sender;

        setTimeout(function (e) {
            grid.reorderColumn(0, nonReordableColumn);
        }, 1)
      }
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy