Kendo UI add new record

Question

I have created a odata v4 service using web api 2.2, I have successfully bound the service records to grid but i am unable to add the records. Please note that i created a separate project for odata v4 service and kendo UI grid is in other project. Below is the code for grid.

            <script>
                $(document).ready(function () {
                    $("#searchResults").kendoGrid({
                        dataSource: {
                            type: "odata-v4",
                            transport: {
                                read:
                                    "http://test.odata.northwind/odata/Customers",
                                create: {
                                    url: "http://test.odata.northwind/odata/Customers",
                                    dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                                    type:"post"
                                    },
                                parameterMap: function (data, type) {
                                    if (type == "create") {
                                        // send the created data items as the "models" service parameter encoded in JSON
                                        return { models: kendo.stringify(data.models) };
                                    }
                                }
                            },
                            pageSize: 20,

                            schema: {
                                data: "value",
                                model: {
                                    id: "CustomerID",/*
                                total: function (data) { return data['@@odata.count']; }*/
                                fields: {

                                    CustomerID:  { type: "string" },
                                    CompanyName:  { type: "string" },
                                    ContactName: { type: "string" },
                                    ContactTitle: { type: "string" },
                                    Country: { type: "string" }
                                }
                                }
                            }

                        },
                        columns: [{
                            field: "CustomerID",
                            title: "CustomerID",
                            filterable: {
                                cell: {
                                    showOperators: false
                                }
                            }

                        },


                          {
                              field: "ContactName",
                              title: "Contact Name",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              },
                              editor: NameAutoComplete


                          }, {
                              field: "ContactTitle",
                              title: "Contact Title",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              },
                              editor: ContactTitleComboBox
                          }, {
                              field: "CompanyName",
                              title: "Company Name",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              }
                          },
                        {
                            field: "Country",
                            title: "Country",
                            filterable: {
                                cell: {
                                    operator: "contains"
                                }
                            }
                          , editor: categoryDropDownEditor
                        },

                                  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                        ],
                        height: 550,
                        toolbar: ["create", "excel", "pdf"],
                        excel: {
                            fileName: "Kendo UI Grid Export.xlsx",
                            proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
                            filterable: true
                        }, pdf: {
                            allPages: true,
                            fileName: "Kendo UI Grid Export.pdf",
                            proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                        },
                        scrollable: false,
                        pageable: true,
                        sortable: true,
                        groupable: true,
                        filterable: {
                            mode: "row"
                        },
                        editable: {
                            mode: "inline",
                            create: true,
                            update: true,
                            destroy: true
                        }
                    });
                });

                function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="Country" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .width(100)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }

                            }
                        });
                }


                function NameAutoComplete(container, options) {
                    $('<input data-text-field="ContactName" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoAutoComplete({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }
                            }
                        });
                }


                function ContactTitleComboBox(container, options) {
                    $('<input data-text-field="ContactTitle" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }
                            }
                        });
                }


  </script>

As shown Below when i press the update button, nothing happens, seems like the button doesn't even trigger

Below is some of the json result i binded to the grid

Here is how i am trying to get and add records to grid in webapi.

public class CustomersController : ODataController
    {
        readonly Model1 _db = new Model1();

        [EnableQuery(PageSize = 20)]
        public IHttpActionResult Get()
        {
            return Ok(_db.Customers.AsQueryable());
        }

        public IHttpActionResult Get([FromODataUri] string key)
        {
            return Ok(_db.Customers.SingleOrDefault(t => t.CustomerID == key));
        }
        [System.Web.Mvc.HttpPost]
        public async Task<IHttpActionResult> Post(Customers customer)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            _db.Customers.Add(customer);
            await _db.SaveChangesAsync();
            return Created(customer);
        }
        [System.Web.Mvc.HttpDelete]
        public async Task<IHttpActionResult> Delete([FromODataUri] int key)
        {
            var customers = await _db.Customers.FindAsync(key);
            if (customers == null)
            {
                return NotFound();
            }
            _db.Customers.Remove(customers);
            await _db.SaveChangesAsync();
            return StatusCode(HttpStatusCode.NoContent);
        }
        protected override void Dispose(bool disposing)
        {
            _db.Dispose();
            base.Dispose(disposing);
        }
    }

I have been scratching my head all day, seems like i am missing something, any help would be appreciated

UPDATED

Answer 1

It seems that you have not configured the grid to allow editing. Although you added the create button, you need to change the editable field to allow editing as follows:

editable: {
            mode: "inline",
            create: true,
            update: true,
            destroy: true
        }

Hope this helps..