Как изменить порядок строк сетки кендо?

Question

Я динамически добавляю строки в kendo gid. Теперь мне нужна кнопка переупорядочения, где я могу перемещать строку вверх и вниз. Мне не нужны функции перетаскивания. Im в состоянии получить каждый идентификатор строки .need некоторой помощи ...

<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

Вы можете создать столбец шаблона и использовать источники данных insert и remove способы переупорядочения элементов данных. Сетка будет обновлена ​​автоматически.

$("#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; 
} 

Вот демо: http://jsbin.com/ExOgiPib/1/edit

Answer 2

Однажды я был пользователем Кендо UI. У меня была проблема с сортировкой, а также и это, как я ее решил тогда (после того, как много страданий):

 //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 

Вы можете реализовать собственное решение, вы можете добавить свои собственные функции и изменения порядка будет Слушайте, как хотите.