Back to all docs
API Reference / ui / Grid / reorderable
New to Kendo UI for jQuery? Start a free 30-day trial

Reorderable

configuration

If set to true the user could reorder the columns by dragging their header cells. By default reordering is disabled. Multi-level headers allow reordering only in same level.

reorderable

Object|Boolean

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  reorderable: true
});
</script>

Check Column reordering for a live demo.

reorderable.columns

Boolean

If set to true the user could reorder the columns by dragging their header cells. By default reordering is disabled. Multi-level headers allow reordering only in same level.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  reorderable: true
});
</script>

Check Column reordering for a live demo.

reorderable.rows

Boolean|Object

If set to true the user could reorder the rows by dragging them. By default reordering for rows is disabled. If the selectable option is enabled for rows only selected rows will can be dragged and reordered.

Note that the reordering operation is only a client-side operation and it does not reflect the order of any data that is bound to the server.

More about the Grid Row Drag and Drop functionality you can read in this article.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { id:1, name: "Jane Doe", age: 30 },
    { id:2, name: "John Doe", age: 33 }
  ],
  reorderable: {
    rows: true
  }
});
</script>

Related Members

  • reorderable.rows - If set to true the user could reorder the rows by dragging them. By default reordering for rows is disabled. If the selectable option is enabled for rows only selected rows will can be dragged and reordered.
In this article
reorderablereorderable.columnsreorderable.rows
Not finding the help you need?
Contact Support