Kendo ui 是否可以为网格重新排序调用不同的数据源更新方法?

Kendo ui 是否可以为网格重新排序调用不同的数据源更新方法?,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我正在使用剑道排序表来启用网格中行的拖放重新排序(类似。我的网格还允许行的内联编辑) 在这两种情况下都会调用相同的数据源更新方法:在内联编辑后单击更新,或拖放行以重新排序 是否可以让拖放重新排序调用不同的数据源更新方法 以下是网格代码: @(Html.Kendo().Grid<BSS.WebMvc.ViewModels.SuggestionViewModel>() .Name("gridSuggestions") .Columns(columns =>

我正在使用剑道排序表来启用网格中行的拖放重新排序(类似。我的网格还允许行的内联编辑)

在这两种情况下都会调用相同的数据源更新方法:在内联编辑后单击更新,或拖放行以重新排序

是否可以让拖放重新排序调用不同的数据源更新方法

以下是网格代码:

@(Html.Kendo().Grid<BSS.WebMvc.ViewModels.SuggestionViewModel>()
    .Name("gridSuggestions")
    .Columns(columns =>
        {
            columns.Bound(p => p.DisplayOrder).Hidden(true);
            columns.Bound(p => p.Item);
            columns.Bound(p => p.Quantity);
            columns.Command(command => { command.Edit(); command.Destroy(); });
        })
    .ToolBar(toolbar => toolbar.Create().Text("Add New Suggestion"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("gridSuggestions_error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ID);
            model.Field(p => p.DisplayOrder).DefaultValue(0);
            model.Field(p => p.Item).DefaultValue(new BSS.WebMvc.ViewModels.ResultEntryViewModel());
            model.Field(p => p.Quantity).DefaultValue(1);
        })
        .Create(update => update.Action("Suggestions_Create", "Items", new { parentItemId = Model.ID }))
        .Read(read => read.Action("Suggestions_Read", "Items", new { id = Model.ID }))
        .Update(update => update.Action("Suggestions_Update", "Items", new { parentItemId = Model.ID }))
        .Destroy(update => update.Action("Suggestions_Delete", "Items", new { parentItemId = Model.ID }))
        .ServerOperation(false)
        .Sort(s => s.Add(m => m.DisplayOrder))
    )
    .Events(events => events.DataBound("gridSuggestions_dataBound").Edit("gridSuggestionEditOrCreate").SaveChanges("gridSuggestionSaveChanges").Cancel("gridSuggestionCancel").Save("gridSuggestionSave"))
)
@(Html.Kendo().Grid())
.名称(“建议”)
.列(列=>
{
columns.Bound(p=>p.DisplayOrder).Hidden(true);
columns.Bound(p=>p.Item);
columns.Bound(p=>p.Quantity);
Command(Command=>{Command.Edit();Command.Destroy();});
})
.ToolBar(ToolBar=>ToolBar.Create().Text(“添加新建议”))
.Editable(可编辑=>Editable.Mode(GridEditMode.InLine))
.DataSource(DataSource=>DataSource
.Ajax()
.页面大小(20)
.Events(Events=>Events.Error(“gridSuggestions\u Error\u handler”))
.Model(Model=>
{
model.Id(p=>p.Id);
字段(p=>p.DisplayOrder).DefaultValue(0);
model.Field(p=>p.Item).DefaultValue(新的BSS.WebMvc.ViewModels.ResultEntryViewModel());
model.Field(p=>p.Quantity).DefaultValue(1);
})
.Create(update=>update.Action(“建议创建”,“项目”,新的{parentItemId=Model.ID}))
.Read(Read=>Read.Action(“建议_Read”,“条目”,新的{id=Model.id}))
.Update(Update=>Update.Action(“建议\更新”,“项目”,新的{parentItemId=Model.ID}))
.Destroy(update=>update.Action(“建议”\u Delete,“项目”,new{parentItemId=Model.ID}))
.ServerOperation(错误)
.Sort(s=>s.Add(m=>m.DisplayOrder))
)
.Events(Events=>Events.DataBound(“gridSuggestions_DataBound”).Edit(“GridSuggestionEdit”或Create”).SaveChanges(“gridSuggestionSaveChanges”).Cancel(“gridSuggestionCancel”).Save(“gridSuggestionSave”)
)
以及具有相关javascript函数的可排序代码:

@(Html.Kendo().Sortable()
    .Name("gridSuggestionSortable")
    .For("#gridSuggestions")
    .Filter("table > tbody > tr:not(.k-grid-edit-row):not(.blockDragDuringEdit):not(.preventDrag):not(.k-detail-row)")
    .Cursor("move")
    .HintHandler("hint")
    .Axis(SortableAxis.Y)
    .PlaceholderHandler("placeholder")
    .ContainerSelector("#gridSuggestions tbody")
    .Events(events => events.Change("onGridSuggestionsOrderChange"))
)


<script>
    function onGridSuggestionsOrderChange(e) {
        let grid = e.sender.element.data("kendoGrid"),
            oldIndex = e.oldIndex,
            newIndex = e.newIndex,
            view = grid.dataSource.view(),
            dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        dataItem.DisplayOrder = newIndex;
        dataItem.dirty = true;

        if (oldIndex < newIndex) {
            for (let i = oldIndex + 1; i <= newIndex; i++) {
                view[i].DisplayOrder--;
                view[i].dirty = true;
            }
        } else {
            for (let i = oldIndex - 1; i >= newIndex; i--) {
                view[i].DisplayOrder++;
                view[i].dirty = true;
            }
        }

        grid.dataSource.sync();
    }
</script>
@(Html.Kendo().Sortable())
.Name(“gridSuggestionSortable”)
.对于(“#建议”)
.Filter(“表>正文>tr:not(.k-grid-edit-row):not(.blockDragDuringEdit):not(.preventDrag):not(.k-detail-row)”)
.光标(“移动”)
.HintHandler(“提示”)
.Axis(可排序的Axis.Y)
.placeholder处理程序(“占位符”)
.ContainerSelector(“网格体”)
.Events(Events=>Events.Change(“onGridSuggestionsOrderChange”))
)
功能OnGridSuggestionOrderChange(e){
让grid=e.sender.element.data(“kendoGrid”),
oldIndex=e.oldIndex,
newIndex=e.newIndex,
view=grid.dataSource.view(),
dataItem=grid.dataSource.getByUid(即item.data(“uid”);
dataItem.DisplayOrder=newIndex;
dataItem.dirty=true;
如果(旧索引<新索引){
for(设i=oldIndex+1;i=newIndex;i--){
视图[i].DisplayOrder++;
视图[i]。脏=真;
}
}
grid.dataSource.sync();
}

您可以在更改处理程序中调用不同的方法:

function onGridSuggestionsOrderChange(e) {
    ...        

    dataItem.DisplayOrder = newIndex;

    const updated = [dataItem.toJSON()];

    if (oldIndex < newIndex) {
        for (let i = oldIndex + 1; i <= newIndex; i++) {
            view[i].DisplayOrder--;
            updated.push(view[i].toJSON());
        }
    } else {
        for (let i = oldIndex - 1; i >= newIndex; i--) {
            view[i].DisplayOrder++;
            updated.push(view[i].toJSON());
        }
    }

    $.ajax({
      type: "POST",
      url: REORDER_UPDATE_URL,
      contentType: 'application/json',
      data: JSON.stringify(updated)
    });
}
函数onGridSuggestionsOrderChange(e){
...        
dataItem.DisplayOrder=newIndex;
const updated=[dataItem.toJSON()];
如果(旧索引<新索引){
for(设i=oldIndex+1;i=newIndex;i--){
视图[i].DisplayOrder++;
updated.push(查看[i].toJSON());
}
}
$.ajax({
类型:“POST”,
url:重新排序\u更新\u url,
contentType:'应用程序/json',
数据:JSON.stringify(已更新)
});
}

非常好-这看起来对我很有用,我也喜欢这样做,我可以通过一个调用来更新所有项目的排序顺序,而不是我原来的方法(基于剑道示例)它对网格中的每个项进行单独的更新调用。为了利用传递对象的DisplayOrder属性,我必须做的唯一更改是将“const updated=…”行与下一行“dataItem.DisplayOrder=newIndex;”Oops,你是对的。toJSON将使用当前值创建一个副本,因此应该在更改后调用它。我更新了示例。