Kendo UI添加新记录

Question

我已经使用WebAPI2.2创建了一个odata v4服务，我已经成功地将服务记录绑定到网格，但是我无法添加这些记录。请注意，我为odata v4服务创建了一个单独的项目，Kendo也在其他项目中。下面是网格的代码。

<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>

如下图所示，当我按下update按钮时，任何事情都不会发生，似乎该按钮甚至不会触发

​

​

下面是我绑定到网格的一些JSON结果

​

​

下面是我如何在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);
        }
    }

我已经抓了一整天的头了，好像我错过了什么，任何帮助都会很感激。

更新

​

Answer 1

您似乎还没有将网格配置为允许编辑。虽然添加了“创建”按钮，但需要更改可编辑字段以允许编辑，如下所示：

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

希望这有帮助..。