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

拉胡尔·帕里亚尼

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

我现在想根据自动完成的选择填充网格的其他列

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

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

自动完成选择事件为我提供了值，但我无法找到将这些值传递给网格更改/编辑事件的方法。

$(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
      });
  }
});

亚历山大

将更改事件处理程序添加到 AutoComplete，然后从正在编辑的 Grid 中获取行的 dataItem 。然后，您可以使用set 方法：

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","");
    }
  });