Is it possible to call a different datasource Update method for Grid Reordering?

Question

I am using the Kendo Sortable to enable drag-and-drop reordering of rows in a grid (similar to this example. My grid also allows inline editing of rows.

The same datasource Update method gets called in either of these cases: Clicking update after an inline edit, or drag-and-dropping a row to reorder.

Is it possible to have the drag-and-drop reorder call a different datasource Update method?

Here is the grid code:

@(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"))
)

And the sortable code with the relevant javascript function:

@(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>

SiliconSoul SiliconSoul · Accepted Answer · 2018-08-03T07:57:04

You could call a different method in the change handler:

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

Is it possible to call a different datasource Update method for Grid Reordering?

1 Answers