Kendo UI grid with batch editing not posting to controller

[Dina]

I have create a kendo grid with batch editing using https://demos.telerik.com/kendo-ui/grid/editing for reference (using your demo service as suggested for my controller: https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Controllers/ProductsController.cs).

The grid will read the data fine, but when I go to create the controller is unable to deserialize the "models" passed to it (as detailed in the parameterMaps function). After reading through various Telerik threads, I have tried ensuring editing mode is set to "incell" and ensuring batch mode is set to true. 

Do you know what I'm doing wrong that's stopping the data from binding?

 

Kendo grid

<div id="grid"></div>

  <script>
      $(document).ready(function () {
          var crudServiceBaseUrl = "/RegulationIndex",
              dataSource = new kendo.data.DataSource({
                  batch: true,
                  transport: {
                      read: {
                          url: crudServiceBaseUrl + "/GetRegulations",
                          dataType: "json",
                          type: "GET"
                      },
                      update: {
                          url: crudServiceBaseUrl + "/UpdateRegulations",
                          dataType: "json",
                          type: "PUT"
                      },
                      destroy: {
                          url: crudServiceBaseUrl + "/DeleteRegulations",
                          dataType: "json",
                          type: "DELETE"
                      },
                      create: {
                          url: crudServiceBaseUrl + "/AddRegulations",
                          dataType: "json",
                          type: "POST"
                      },
                      parameterMap: function (options, operation) {
                          if (operation !== "read" && options.models) {
                              return { models: kendo.stringify(options.models) };
                          }
                      }
                  },
                  pageSize: 20,
                  schema: {
                      model: {
                          id: "Id",
                          fields: {
                              Id: { editable: false },
                              LastReviewedDate: { editable: false },
                              LastReviewedBy: { editable: false }
                          }
                      }
                  }
              });

          $("#grid").kendoGrid({
              dataSource: dataSource,
              navigatable: true,
              pageable: true,
              height: 550,
              toolbar: ["create", "save", "cancel"],
              columns: [
                  { field: "Continent", width: 120 },
                  { field: "Area", width: 120 },
                  { field: "Country", width: 120 },
                  { field: "Service", width: 120 },
                  { field: "B2BOrB2C", title: "Customer Type", width: 120 },
                  { field: "RegulationName", title: "Regulation Name", width: 120 },
                  { field: "LastReviewedDate", format: "{0:dd/MM/yyyy}", width: 100 },
                  { field: "LastReviewedBy", width: 100 },
                  { command: "destroy", title: " ", width: 150 }],
              editable: "incell"
          });
      });

      function customBoolEditor(container, options) {
          $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
      }
  </script>

 

 

Controller action

        [HttpPost]
        [ProducesResponseType(StatusCodes.Status400BadRequest)]
        [ProducesResponseType(StatusCodes.Status404NotFound)]
        public async Task<IActionResult> AddRegulations()
        {
            var logMessage = new LogMessageFactory(this.GetType().Name, MethodBase.GetCurrentMethod().DeclaringType)
                .LogMessage;
            try
            {
                var body = JsonConvert.DeserializeObject<IEnumerable<RegulationViewModel>>("models");
                var gridRegulations = new List<RegulationViewModel>();

                if (body != null)
                {
                    if (!ModelState.IsValid)
                    {
                        return BadRequest(ModelState);
                    }
                    else
                    {
                        foreach (var reg in body)
                        {
                            RecordUserDateForRecordChange(reg);
                            var regulation = await _webApiClientSession.RegulationsWebApiClient.CreateRegulationAsync(reg);
                            var regulationViewModel = _mapper.Map<Regulation, RegulationViewModel>(regulation);
                            gridRegulations.Add(regulationViewModel);
                        }
                        _logger.LogDebug(logMessage);
                        return Json(gridRegulations);
                    }
                }
                else
                {
                    _logger.LogDebug(logMessage + "Failed to " + ControllerContext.HttpContext.Request.Method);
                    return BadRequest();
                }
            }
            catch (Exception e)
            {
                _logger.LogError(e, logMessage);
                return NotFound();
            }
        }

 

[Nikolay]

Hello Dina,

Thank you for sharing the Grid implementation.

I examined it and it looks good. The thing I think is causing is this line:

var body = JsonConvert.DeserializeObject<IEnumerable<RegulationViewModel>>("models");

This executes post request, however, it requires a get request.

I could suggest configuring the action method as demonstrated here: https://github.com/telerik/kendo-examples-asp-net-mvc/blob/master/grid-crud/Controllers/HomeController.cs#L23

Let me know if this helps.

Regards,
Nikolay
Progress Telerik