Сериализация данных со всех страниц Kendo Grid - PullRequest
Новая
       22

Сериализация данных со всех страниц Kendo Grid

0 голосов
/ 13 февраля 2020

Я работаю с NET веб-приложением, используя Telerik Kendo UI.

По шагам ..

  1. Сначала я готовлю представление с Kendo Grid, заполненным списком локальных моделей. Я дал пользователю возможность редактировать данные в сетке через режим редактирования InCell. Моя сетка настроена на dataSource.Batch(true).ServerOperation(false), поэтому я просто работаю с шаблонами клиентов.

Моя сетка кендо выглядит следующим образом: 

            @(Html.Kendo().Grid(Model.Recipients)
                .Name("NotificationRecipients")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.AmountToPay).Hidden(true).ClientTemplate("#= AmountToPay # <input type='hidden' name='Recipients[#= index(data)#].AmountToPay' value='#= AmountToPay#' />");
                    columns.Bound(p => p.Name).ClientTemplate("#= Name # <input type='hidden' name='Recipients[#= index(data)#].Name' value='#= Name #' />");
                    columns.Bound(p => p.Email).ClientTemplate("#= Email # <input type='hidden' name='Recipients[#= index(data)#].Email' value='#= Email#' />");
                    columns.Bound(p => p.ContractorId).Hidden(true).ClientTemplate("#= ContractorId # <input type='hidden' name='Recipients[#= index(data)#].ContractorId' value='#= ContractorId#' />");
                    columns.Bound(p => p.RecipientId).Hidden(true).ClientTemplate("#= RecipientId # <input type='hidden' name='Recipients[#= index(data)#].RecipientId' value='#= RecipientId#' />");
                    columns.Command(command =>
                    {
                        command.Custom("Preview").Click("NotificationPreview");
                        command.Destroy().Text("Delete");
                    });
                })
                 .Editable(editable => editable.Mode(GridEditMode.InCell))
                 .Sortable()
                 .Pageable()
                 .Filterable()
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .PageSize(25)
                    .ServerOperation(false)
                    .Model(model =>
                    {
                        model.Id(m => m.Id);                        
                    }
                    )
                )
            )
            @Html.ValidationMessageFor(x => x.Recipients)
Во-вторых, я сериализую все данные из формы <form class="notification" enctype="multipart/form-data">, чтобы передать отредактированную модель представления в контроллер. Это действие я выполняю следующим образом: 
 var form = $(".notification");
 var formData = form.serializeArray();
 var url = '@Url.Action("Action", "Controller")';

 $.post(url, formData, function (data, status, xhr) {
 });

Моя проблема заключается в том, что переданный formData контроллеру содержит только 25 элементов из сетки, а не все из них.

Возможно это изображение также поможет визуализировать разницу между возвращаемыми значениями form.serializeArray() и grid.dataSource.data().

, суммирующими

Есть ли способ сериализации всех элементов сетки Кендо? Или, может быть, получить элементы из сетки кендо следующим образом: grid.dataSource.data(), а затем каким-то образом сериализовать их в форму, которая возвращает .serializeArray() для объединения результатов?

1 Ответ

0 голосов
/ 14 марта 2020

Сериализовать данные сетки можно следующим способом: 

 var grid = $("#NotificationRecipients").data("kendoGrid").dataSource.data(); 
 var griddata = JSON.stringify(grid );

  var jdata = JSON.stringify($(document.frm).serializeArray()); //frm is the form name (for serialize the form elements other than grid)
  $.ajax({
        type: "post",
        datatype: "json",
        contenttype: "application/json",
        url: "/Controller/ActionName",
        data: JSON.stringify({Data: griddata }),
        success: function (result) {
                }
  });
...