javascript - How to reorder kendo grid rows? - Stack Overflow

admin管理员组

文章数量:1279083

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" },
            {
                mand: [
                { 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);
    });

});

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" },
            {
                mand: [
                { 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);
    });

});

• javascript
• kendo-ui
• kendo-grid

Share Improve this question Follow asked Dec 3, 2013 at 7:08 user2405818user2405818 5511 gold badge22 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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./ExOgiPib/1/edit

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


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

                    for (idx = 1, length = parers.length; idx < length; idx++) {
                        result = result || parers[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, parer) {

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

            parer = parer || CaseInsensitiveComparer;

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

                return this.orderBy({ pare: parer.bine(parers) });
            }

            return this;
        };

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

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

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

        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.

本文标签： javascriptHow to reorder kendo grid rowsStack Overflow