rowReorder

Fired when the user changes the order of a row.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.row jQuery

The jQuery object representing the table row being reordered.

e.rows jQuery

Available when multiple rows are dragged - the jQuery object representing the selected and dragged rows.

When you Drap and Drop multiple items from one instance of the Grid to another the selected and dragged rows are available by the selected rows of the external Grid via the select method.

selectedRows = externalGrid.select();

e.newIndex Number

The new row index.

e.oldIndex Number

The previous row index.

e.sender kendo.ui.Grid

The widget instance which fired the event.

e.preventDefault Function

If invoked prevents the rowReorder action - prevents the client-side reordering.

Example

<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
  },
  rowReorder: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.row, e.newIndex, e.oldIndex);
  }
});
</script>

Example - reordering with multiple selection

<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
  },
  selectable: "multiple, row",
  rowReorder: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.row, e.rows, e.newIndex, e.oldIndex);
  }
});
</script>