Kendo Sortable与分组网格集成

Question

这里是我的View，其中我有一个可与Grid集成的Sortable。这工作正常，但问题是网格分组。而且，我希望每个组都具有自己的可排序功能，这意味着用户不应该能够将行从一个组拖放到另一个组。我怎么做？我是否必须为每个组单独分类？

@(Html.Kendo().Grid<QRMT.ViewModels.SubsystemViewModel>() 
    .Name("subsystems") 
    .ToolBar(toolbar => toolbar.Create().Text("Add new Subsystem")) 
    .Columns(columns => 
    { 
     columns.ForeignKey(c => c.SystemId, new SelectList(ViewBag.Systems, "Value", "Text")).Hidden(); 
     columns.Bound(c => c.SubsystemCode); 
     columns.Bound(c => c.SubsystemDesc); 
     columns.Command(c => { c.Edit(); c.Destroy(); }).Width(200); 
    }) 
    .Editable(e => e.Mode(GridEditMode.PopUp).Window(window => window.Width(500))) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Events(events => events.Sync("onSync").Error("onError")) 
     .Model(model => 
     { 
      model.Id(m => m.SubsystemId); 
     }) 
     .Group(group => group.Add(m => m.SystemId)) 
     .Create(create => create.Action("Add", "Subsystems")) 
     .Read(read => read.Action("Read", "Subsystems")) 
     .Update(update => update.Action("Update", "Subsystems")) 
     .Destroy(destroy => destroy.Action("Delete", "Subsystems")) 
    ) 
    .Events(events => events.Edit("onEdit")) 
) 


@(Html.Kendo().Sortable() 
    .For("#subsystems") 
    .Filter("table > tbody > tr:not(.k-grouping-row)") 
    .Cursor("move") 
    .HintHandler("noHint") 
    .PlaceholderHandler("placeholder") 
    .ContainerSelector("#subsystems tbody") 
    .Events(events => events.Change("onChange")) 
) 

<script type="text/javascript"> 
    var noHint = $.noop; 

    function placeholder(element) { 
     return element.clone().addClass("k-state-hover").css("opacity", 0.65); 
    } 

    function onEdit(e) { 
     if (e.model.isNew()) { 
      $('.k-window-title').text("Add"); 
     } 
    } 

    function onSync(e) { 
     this.read(); 
    } 

    function onError(e) { 
     alert(e.errors); 
    } 

    function onChange(e) { 
     var grid = $("#subsystems").data("kendoGrid"), 
      skip = grid.dataSource.skip(), 
      oldIndex = e.oldIndex + skip, 
      newIndex = e.newIndex + skip, 
      data = grid.dataSource.data(), 
      dataItem = grid.dataSource.getByUid(e.item.data("uid")); 

     grid.dataSource.remove(dataItem); 
     grid.dataSource.insert(newIndex, dataItem); 
    } 
</script> 

<style> 
    .k-grid tbody tr:not(.k-grouping-row) { 
     cursor: move; 
    } 
</style> 

Answer 1

Kendo可排序窗口小部件不适用于分组网格。 这写在known limitations section of Sortable-Grid integration help topic。

Answer 2

剑道说使用KendoSortable是不可能的分组网格，但我找到了一个可能的解决方案！在你的问题中，你限制自己只能在同一组内拖动。如果您有一个字段来存储订单并正确排序，这并不重要。

我的解决方案发布在下面，是针对角度实现的，但onchange事件都是javascript，所以我认为这可以被重写。 （TR过滤[数据UID]将确保被“选择”没有分组列）

• 第一数量的所有行正确，可能需要以引发SortOrder的值
• 然后设置新的索引上的移动的排
• 然后根据需要改变
• 然后度假村网格。也许在这里，而不是需要硬编码字段名“primarySortField”

$scope.initMySortOrderGrouped = function(grid, myDatasource, primarySortField) { 
    grid.table.kendoSortable({ 
    filter: ">tbody>tr[data-uid]", 
    hint: $.noop, 
    cursor: "move", 
    placeholder: function(element) { 
     return element.clone().addClass("k-state-hover").css("opacity", 0.65); 
    }, 
    container: "#" + grid.element[0].id + " tbody", 
    change: function(e) { 
     /*Needed on grid for sorting to work conditionally*/ 
     if (grid.canWrite) { 
     var skip = 0, 
      oldIndex = e.oldIndex + skip, 
      newIndex = e.newIndex + skip, 
      view = myDatasource.view(), 
      dataItem = myDatasource.getByUid(e.item.data("uid")); 
     /*retrieve the moved dataItem*/ 

     /*set initial values where needed*/ 
     var countRows = 0; 
     for (var i = 0; i < view.length; i++) { 
      for (var j = 0; j < view[i].items.length; j++) { 
      if (view[i].items[j].SortOrder != countRows + j) { 
       view[i].items[j].SortOrder = countRows + j; 
       view[i].items[j].dirty = true; 
      } 
      } 
      countRows += view[i].items.length 
     } 

     dataItem.SortOrder = newIndex; /*update the order*/ 
     dataItem.dirty = true; 

     countRows = 0; 
     /*shift the order of the records*/ 
     for (var i = 0; i < view.length; i++) { 
      for (var j = 0; j < view[i].items.length; j++) { 
      if (oldIndex < newIndex) { 
       if (countRows + j > oldIndex && countRows + j <= newIndex) { 
       view[i].items[j].SortOrder--; 
       view[i].items[j].dirty = true; 
       } 
      } else { 
       if (countRows + j >= newIndex && countRows + j < oldIndex) { 
       view[i].items[j].SortOrder++; 
       view[i].items[j].dirty = true; 
       } 
      } 
      } 
      countRows += view[i].items.length 
     } 
     myDatasource.sync(); 
     /*submit the changes through the update transport and refresh the Grid*/ 
     } 
     myDatasource.sort([{ 
     field: primarySortField, 
     dir: "asc" 
     }, { 
     field: "SortOrder", 
     dir: "asc" 
     }]); 
    } 
    }); 
}; 

这将允许您拖动项目在这组数字将远远高于或低于它可能是在一组，但结果排序将正确显示！

我恨它，当程序员说什么是不可能的...