Grid Create with Web API

[Mark]

I'm following along with the Grid inline edit demo and trying to create a new record, saving it to the locals serer via Web API. When Create, then Save the new record, nothing happens. The grid mode doesn't change out of Create mode. The Create function on my server never gets called. The savechanges event does fire. I've tested my Web API create function with Postman and it seems to work. Attached is a VS project with web page and server.

Thanks, Mark

[Alex Hajigeorgieva]

Hi, Mark,

I have already responded to you in the private support thread but I add a response here in case anyone else is looking for similar answers.

The main issue with the set up was that the schema was defined at grid level, as opposed to data source level. If you move the schema inside the data source, the editing will start working.

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schemamodel

The other thing was a data source and grid configured for batch/incell editing,  but the grid was set as "inline".

For inline/popup editing

// 1. do not enable batch operations

// 2. specify contentType and request type 
create: {
    url: "/api/childgrid/addorder",
    contentType: "application/json",
    type: "POST"
}

// 3. change the parameter map for a single model
parameterMap: function (options, operation) {
      if (operation !== "read") {
            return kendo.stringify(options);
      }
 }

For batch editing

You are probably aware that WebAPI is not designed to receive multiple complex objects. To compensate for that, you would need to create an auxiliary class that will contain the list of models that the grid data source will post. This is demonstrated in the following online project:

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-web-api-crud-incell/KendoUIMVC5/Controllers/ProductsController.cs#L61

 public IHttpActionResult Update(OrdersRequest request)
{
      return Ok();
}

public class OrdersRequest
{
        public List<Order> Models { get; set; } // needed because of WebApi limitation - it cannot bind to an arrray
}

The parameter map could look like this:

                       update: {
                            url: "/api/orders/update",
                            type: "POST"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read") {
                                $.each(options.models, function (index, value) {
                                    value.OrderDate = kendo.stringify(value.OrderDate).replace(/"/g, "");
                                });
                                return options;
                            }
                        }

Let me know if further help is needed. I am attaching the updated project here.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik