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

Grid Create with Web API

1 Answer 61 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 22 Apr 2020, 07:53 AM

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

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 24 Apr 2020, 07:32 AM

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

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
Mark
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or