jquery kendo ui：带有自定义自动完成列的网格

Question

我已经按照以下答案中的建议在网格中实现了自定义自动完成编辑器。

Kendo UI - Grid with custom autocomplete

我现在想根据select自动完成功能

填充网格的其他列

演示： https://jsfiddle.net/rahulparyani15/4aj6wurk/

示例：
如果有人 select 与自动完成列不同的名称； age 和 id 列应更改为 name 和 address 列的相应值应被清除。

自动完成 select 事件为我提供了值，但我无法找到将这些值传递给网格 change/edit 事件的方法。

$(document).ready(function () {
  var dataSource = new kendo.data.DataSource({
    data: [
      { name: "Jane Doe", age: 20, id: 1, address: "London" },
      { name: "James Bond", age: 33, id: 2, address: "New York" },
      { name: "Bryan Smith", age: 40, id: 3, address: "Virginia" },
      { name: "Jason Bourne", age: 33, id: 4, address: "Washington" }
    ]
  });
  var dataSource1 = new kendo.data.DataSource({
    data: [
      { name: "Jane Doe", age: 20, id: 1 },
      { name: "James Bond", age: 33, id: 2 },
      { name: "Bryan Smith", age: 40, id: 4 },
      { name: "Jason Bourne", age: 33, id: 3 }
    ]
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    editable: true,
    columns: [
      {
        field: "name",
        title: "Name",
        editor: nameEditor
      },
      {
        field: "age",
        title: "Age"
      },
      {
        field: "id",
        title: "ID"
      },
      {
        field: "address",
        title: "Address"
      }
    ]
  });

  function nameEditor(container, options, e) {
    $('<input required data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoAutoComplete({
        dataSource: dataSource1,
        dataTextField: "name",
        minLength: 1
      });
  }
});

Answer 1

向自动完成添加更改事件处理程序，然后 get the dataItem for the row from the Grid that is being edited. You can then use the set method:

function nameEditor(container, options, e) {
$('<input required data-bind="value:' + options.field + '"/>')
  .appendTo(container)
  .kendoAutoComplete({
    dataSource: dataSource1,
    dataTextField: "name",
    minLength: 1,
    change:function(e){
      var selectedItem = e.sender.dataItem();
      var grid = $("#grid").getKendoGrid();
      var editedRow = $(grid.tbody).find(".k-grid-edit-row");
      var editedItem = grid.dataItem(editedRow);
      editedItem.set("age",selectedItem.age);
      editedItem.set("address","");
    }
  });

}