Kendo UI Grid custom sorting

У меня есть сетка в моем приложении, где пользователь хочет следующую функциональность.Kendo UI Grid custom sorting

Scenerio

Есть 4 колонки в сетке, давайте назовем их A, B, C и D.
Несколько столбцов являются сортируется и может быть заказана.
по умолчанию отсортированы в столбце А, В, С, D
Если пользователь перетаскивает столбец C, чтобы быть первый столбец, то вроде должно быть С, А, В, Д.

Я знаете, что есть событие columnOrder на сетке. Возможна ли эта функция? Есть ли пример где-нибудь или кто-то может дать мне указания о том, как выполнить эту функцию?

Благодаря

Джим

источник

2015-07-24 user151190

В обработчике события вы можете получить новый порядок столбцов из: this.columns. Затем вы должны составить критерии сортировки и применить его.

Что-то вроде:

 columnReorder: function() { 
      var sort = []; 
      $.each(this.columns, function(idx, elem) { 
      // In my case order by those columns that start with "Ship" 
      if (elem.field.lastIndexOf("Ship", 0) === 0) { 
       sort.push({field: elem.field, dir: "asc"}); 
      } 
      }); 
      this.dataSource.sort(sort); 
     },

После работоспособный пример.

$(document).ready(function() { 
 
    $("#grid").kendoGrid({ 
 
    dataSource: { 
 
     type: "odata", 
 
     transport: { 
 
     read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
 
     }, 
 
     schema: { 
 
     model: { 
 
      fields: {       
 
      OrderID: { type: "number" },   
 
      ShipCountry: { type: "string" }, 
 
      ShipCity: { type: "string" }, 
 
      ShipName: { type: "string" }, 
 
      OrderDate: { type: "date" }, 
 
      ShippedDate: {type: "date" } 
 
      } 
 
     } 
 
     }, 
 
     pageSize: 15 
 
    }, 
 
    height: 550, 
 
    sortable: true, 
 
    reorderable: true, 
 
    resizable: true, 
 
    pageable: true, 
 
    columnReorder: function() { 
 
     var sort = []; 
 
     $.each(this.columns, function(idx, elem) { 
 
     if (elem.field.lastIndexOf("Ship", 0) === 0) { 
 
      sort.push({field: elem.field, dir: "asc"}); 
 
     } 
 
     }); 
 
     this.dataSource.sort(sort); 
 
    }, 
 
    columns: [ 
 
     { 
 
     field: "OrderID", 
 
     title: "ID", 
 
     width: 80 
 
     }, 
 
     { 
 
     field: "ShipCity", 
 
     title: "Ship City" 
 
     }, 
 
     { 
 
     field: "ShipName", 
 
     title: "Ship Name" 
 
     }, 
 
     { 
 
     field: "ShippedDate", 
 
     title: "Shipped Date", 
 
     format: "{0:MM/dd/yyyy}", 
 
     width: 200 
 
     } 
 
    ] 
 
    }); 
 
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-office365.min.css" /> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.office365.min.css" /> 
 

 
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script> 
 

 
<div id="grid"></div>

источник

2015-07-27 11:47:37 OnaBai

Kendo UI Grid custom sorting

ответ

Смежные вопросы