[英]jquery kendo ui: Grid with custom autocomplete column
I have implemented a custom autocomplete editor in a grid as suggested in the below answer.我已经按照以下答案中的建议在网格中实现了自定义自动完成编辑器。
Kendo UI - Grid with custom autocomplete Kendo UI - 具有自定义自动完成功能的网格
I would now like to populate other columns of the grid based on the selection of autocomplete我现在想根据自动完成的选择填充网格的其他列
Demo: https://jsfiddle.net/rahulparyani15/4aj6wurk/演示: https://jsfiddle.net/rahulparyani15/4aj6wurk/
Example:例子:
If someone was to select a different name from the autocomplete column;如果有人输入 select 与自动完成列不同的名称; age and id column should be changed with the respective values of the name and address column should be cleared. age 和 id 列应更改为 name 和 address 列的相应值应被清除。
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. autocomplete select 事件为我提供了值,但我无法找到将这些值传递给网格更改/编辑事件的方法。
$(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
});
}
});
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 :然后您可以使用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","");
}
});
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.