Как изменить отредактированное значение сетки кендо перед публикацией на сервер

Question

У меня есть сетка Kendo, которая включена для редактирования InCell. Сетка также настроена для работы CURD. Так что, когда есть изменение в строке сетки. Пользователь должен нажать кнопку SaveChanges, чтобы сохранить изменения. Сетка опубликует коллекцию модели строк на сервере.

             @(Html.Kendo().Grid<mymodel>()
                    .Name("mygrid")
                    .Columns(columns =>
                    {
                       //columns here
                        columns.Command(command => command.Destroy()).Width(100);
                    })
                    .ToolBar(toolbar =>
                    {
                        toolbar.Create();
                        toolbar.Save();
                    })
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .Pageable()
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .AutoBind(true)
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(20)
                        .ServerOperation(false)
                        .Model(model =>
                        {
                            model.Id("Id");
                            var f = model.Field("Id", typeof(int));
                            f.Editable(false);
                        })
                         .Model(model =>
                         {
                             model.Id("Id");
                             var f = model.Field("Id", typeof(int));
                             f.Editable(false);
                         })
                        .Create("Create", "Test")
                        .Read("Get", "Test")
                        .Update("Update", "Test")
                        .Destroy("Delete", "Test")
                    ))

Когда пользователь нажимает SaveChanges, я хочу изменить модель строки перед публикацией на сервер.

Сетка содержит событие SaveChanges, которое срабатывает каждый раз, когда пользователь нажимает SaveChanges

$(function(){
        var kendoGrid = $("#mygrid").getKendoGrid();

        kendoGrid.bind("saveChanges", function (e) {

        var datasource = kendoGrid.dataSource;

        // how do i update data before posting to server here

    });

Как обновить модель, которая собирается публиковать на сервере? Является ли событие SaveChanges правильным событием для обработки этого сценария?

Answer 1

Событие Сохранить изменения - это то, что вам нужно. Поскольку вы используете mvc, вы также можете настроить событие с остальной частью вашей сетки, выполнив .Events(e=>e.SaveChanges"onGridSave"). Затем onGridSave становится функцией javascript, которую вы определяете.

.Events () работает на том же уровне, что и .Pageable () или .Navigatable ().

Тогда в вашей функции javascript вы можете сделать что-то вроде этого:

function onGridSave(e){
   e.sender.dataSource._data[0].PropertyName = "new value/data manipulation"
}

PropertyName - свойство модели, которое вы хотите изменить. _Data [0] ссылается на первый элемент в вашем источнике данных. Возможно, вам придется перебрать или настроить индекс, чтобы достичь строки, которую вы хотите изменить.

Для строк, которые были изменены, свойство ._data [0] .dirty будет иметь значение true. Только элементы с грязным значением true будут переданы вашему контроллеру.

Answer 2

Я не знаком с кендо для asp. net, поэтому я не могу дать вам точный ответ, но обычно вы можете перехватить, добавить или изменить данные в parameterMap перед отправкой, например:

dataSource = new kendo.data.DataSource({
    transport: {
        read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
        },
        update: {
            url: crudServiceBaseUrl + "/Products/Update",
            dataType: "jsonp"
        },
        destroy: {
            url: crudServiceBaseUrl + "/Products/Destroy",
            dataType: "jsonp"
        },
        create: {
            url: crudServiceBaseUrl + "/Products/Create",
            dataType: "jsonp"
        },
        parameterMap(data, type) {
            switch (type) {
                case 'read':
                    let request = {};
                    request.page = data.page - 1;
                    request.page_size = data.pageSize;
                    request.sort = data.sort;
                    request.filter = data.filter;

                    return JSON.stringify(request);
                case 'destroy':
                    return kendo.stringify(data.models);
                case 'update':
                    console.log("Data that that will be sent for updating: ", data.models);
                    return kendo.stringify(data.models);
                default:
                    break;
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "ProductID",
            fields: {

            }
        }
    }
});

Вы можете проверить этот официальный пример, я только изменил ProductName для первого объекта, который будет отправлен при обновлении, нажмите:

Перехват обновления пакета перед отправкой

Надеюсь, вы сможете что-то из этого спасти, gl!