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

Answer 2

Once upon a time I was a Kendo UI user. I had a problem with sorting as well and this is how I solved it back then (after a lot of suffering):

        //Sort Hack

        /*
        Changes all dataSources to case insensitive sorting (client side sorting).
        This snipped enable case insensitive sorting on Kendo UI grid, too.

        The original case sensitive comparer is a private and can't be accessed without modifying the original source code.
        tested with Kendo UI version 2012.2.710 (Q2 2012 / July 2012).
        */

        var CaseInsensitiveComparer = {

            getterCache: {},

            getter: function (expression) {
                return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression));
            },

            selector: function (field) {
                return jQuery.isFunction(field) ? field : this.getter(field);
            },

            asc: function (field) {
                var selector = this.selector(field);
                return function (a, b) {

                    if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                        a = selector(a).toLowerCase(); // the magical part
                        b = selector(b).toLowerCase();
                    }

                    return a > b ? 1 : (a < b ? -1 : 0);
                };
            },

            desc: function (field) {
                var selector = this.selector(field);
                return function (a, b) {

                    if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                        a = selector(a).toLowerCase(); // the magical part
                        b = selector(b).toLowerCase();
                    }

                    return a < b ? 1 : (a > b ? -1 : 0);
                };
            },

            create: function (descriptor) {
                return this[descriptor.dir.toLowerCase()](descriptor.field);
            },


            combine: function (comparers) {
                return function (a, b) {
                    var result = comparers[0](a, b),
            idx,
            length;

                    for (idx = 1, length = comparers.length; idx < length; idx++) {
                        result = result || comparers[idx](a, b);
                    }

                    return result;
                };
            }
        };

        kendo.data.Query.prototype.normalizeSort = function (field, dir) {
            if (field) {
                var descriptor = typeof field === "string" ? { field: field, dir: dir} : field,
        descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []);

                return jQuery.grep(descriptors, function (d) { return !!d.dir; });
            }
        };

        kendo.data.Query.prototype.sort = function (field, dir, comparer) {

            var idx,
    length,
    descriptors = this.normalizeSort(field, dir),
    comparers = [];

            comparer = comparer || CaseInsensitiveComparer;

            if (descriptors.length) {
                for (idx = 0, length = descriptors.length; idx < length; idx++) {
                    comparers.push(comparer.create(descriptors[idx]));
                }

                return this.orderBy({ compare: comparer.combine(comparers) });
            }

            return this;
        };

        kendo.data.Query.prototype.orderBy = function (selector) {

            var result = this.data.slice(0),
    comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare;

            return new kendo.data.Query(result.sort(comparer));
        };

        kendo.data.Query.prototype.orderByDescending = function (selector) {

            return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector)));
        };
        //Sort Hack

You can implement your own solution, you can add your own functions and the order change will happen as you want.