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" 
     }]); 
    } 
    }); 
}; 

這將允許您拖動項目在這組數字將遠遠高於或低於它可能是在一組，但結果排序將正確顯示！

我恨它，當程序員說什麼是不可能的...