jquery kendo ui: Grid with custom autocomplete column

Rahul Paryani

I have implemented a custom autocomplete editor in a grid as suggested in the below answer.

Kendo UI - Grid with custom autocomplete

I would now like to populate other columns of the grid based on the selection of autocomplete

Demo: https://jsfiddle.net/rahulparyani15/4aj6wurk/

Example:
If someone was to select a different name from the autocomplete column; age and id column should be changed with the respective values of the name and address column should be cleared.

autocomplete select event gives me the values but I'm not able to figure out a way to pass those values to the grid change/edit event.

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

Aleksandar

Add a change event handler to the AutoComplete and then 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","");
    }
  });

}

Collected from the Internet

Please contact [email protected] to delete if infringement.