How to reorder kendo grid rows?

javascript, kendo-grid, kendo-ui

Solution

You can create a template column and use the data source `insert` and `remove` methods to rearrange the data items. The grid will be refreshed automatically.

$("#grid").kendoGrid({
  dataSource: [
    { foo: "foo" },
    { foo: "bar" },
    { foo: "baz" }
  ],
  columns: [
    { field: "foo" },
    { template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' }
  ]  
});


function up(uid) {
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataSource.getByUid(uid);
  var index = grid.dataSource.indexOf(dataItem);
  var newIndex = Math.max(0, index - 1);

  if (newIndex != index) {
    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);
  }

  return false;
}

function down(uid) {
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataSource.getByUid(uid);
  var index = grid.dataSource.indexOf(dataItem);
  var newIndex = Math.min(grid.dataSource.total() - 1, index + 1);

  if (newIndex != index) {
    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);
  }

  return false;
}

Here is a live demo: http://jsbin.com/ExOgiPib/1/edit

Problem

I am dynamically adding rows to kendo gid. Now i need a reorder button ,where i can able to move a row up and down . i don't want drag and drop functionality. Im able to get each row id .need some help... ``` <script> $(document).ready(function () { var grid = $("#grid").kendoGrid({ columns: [ { field: "Control", title: "Web Control Name" }, { field: "Value", title: "Drag & Drop Variable" }, { command: [ { title: "create", template: "<img class='ob-image' src='../DefaultAssets/Images/New.png' style='padding: 0 15px 0 5px;' />" }, { title: "reorder", template: "<img class ='up-image' src='../DefaultAssets/Images/Upimages.jpg' style='padding: 0 15px 0 5px;' />" }, { "name": "destroy", title: "" } ], }, ], dataSource: { data: [ { Control: "Web Control name", Value: "Drag & Drop Variable" }, ], schema: { model: { Control: "Web Control name", Value: "Drag & Drop Variable" } } }, reorderable: true, editable: { // confirmation: "Are you sure that you want to delete this record?", createAt: "bottom" }, remove: function (e) { } }); var grid = $("#grid").data("kendoGrid"); $("#grid").on("click", ".ob-image", function () { var grid = $("#grid").data("kendoGrid"); grid.addRow(); }); $("#grid").on("click", ".up-image", function () { var row = $(this).closest("tr"); var rowIdx = $("tr", grid.tbody).index(row); alert(rowIdx); }); }); ```

Original source