This is a migrated thread and some comments may be shown as answers.

Kendo UI grid with batch editing not posting to controller

1 Answer 307 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dina
Top achievements
Rank 1
Dina asked on 14 May 2020, 03:01 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 18 May 2020, 01:11 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Dina
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or