Kendo Grid Draggable Rows With Kendo Template

Question

Я собираюсь реализовать поведение перетаскивания с сеткой кендо, которая заполняется с использованием шаблона. Как я могу достичь перетаскиваемых строк и переупорядочить сетку кендо.

Answer 1

.Orderable() 

Работы по обработке. Может быть, попробуйте «.Dragable()« Я немного не уверен в этом.

Answer 2

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

var data = [ 
{ id: 1, text: "text 1", position: 0 }, 
{ id: 2, text: "text 2", position: 1 }, 
{ id: 3, text: "text 3", position: 2 } 
] 

var dataSource = new kendo.data.DataSource({ 
    data: data,   
    schema: { 
     model: { 
      id: "id", 
      fields: { 
       id: { type: "number" }, 
       text: { type: "string" }, 
       position: { type: "number" } 
      } 
     } 
    } 
}); 

var grid = $("#grid").kendoGrid({ 
dataSource: dataSource, 
scrollable: false,  
columns: ["id", "text", "position"]    
}).data("kendoGrid"); 

grid.table.kendoDraggable({ 
filter: "tbody > tr", 
group: "gridGroup", 
hint: function(e) { 
    return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() +  '</tr></tbody></table></div>'); 
} 
}); 

grid.table/*.find("tbody > tr")*/.kendoDropTarget({ 
group: "gridGroup", 
drop: function(e) {   
    var target = dataSource.get($(e.draggable.currentTarget).data("id")), 
     dest = $(e.target); 

    if (dest.is("th")) { 
     return; 
    }  
    dest = dataSource.get(dest.parent().data("id")); 

    //not on same item 
    if (target.get("id") !== dest.get("id")) { 
     //reorder the items 
     var tmp = target.get("position"); 
     target.set("position", dest.get("position")); 
     dest.set("position", tmp); 

     dataSource.sort({ field: "position", dir: "asc" }); 
    }     
} 
}); 

Answer 3

поставил .Dragable() , но убедитесь, что вы сидите его в нужном месте, требуется упорядочение. Иногда вы не можете получить ожидаемый результат, и это может произойти из-за того, что вы не обратили внимание на заказ.