Kendo Sortable與分組網格集成

Question

這是我的視圖，其中有一個與網格集成的Sortable。 這可以正常工作，但是問題是網格已分組。 而且，我希望每個組都具有自己的Sortable功能，這意味着用戶不應將行從一個組拖放到另一個組。 我怎么做？ 每個組都必須有單獨的Sortables嗎？

@(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 Sortable小部件不適用於分組網格。 這是在Sortable-Grid集成幫助主題的“ 已知限制”部分中編寫的。

Answer 2

Kendo說在分組網格上不可能使用KendoSortable，但是我確實找到了可能的解決方案！ 在您的問題中，您將自己限制為只能在同一組中拖動。 如果您有用於存儲訂單和正確排序的字段，則沒有關系。

我下面發布的解決方案是為實現角度而設計的，但是onchange事件都是javascript，因此我認為可以重新進行。 （tr過濾器[data-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"
      }]);
    }
  });
};

這將允許您將項目拖到該組的上方，其數量將遠高於或低於該組中的數量，但結果排序將正確顯示！

當程序員說不可能的事情時，我討厭它。