How to reorder kendo grid rows?

Question

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);
    });

});

Answer 1

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