打开JS bin,输入以下代码:
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ command: "edit", title: " ", width: "90px" }],
editable: "inline"
});
function categoryDropDownEditor(container, options) {
$('')
.appendTo(container)
.kendoDropDownList({
//autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
},
select: function(e) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid"),
model = grid.dataItem(this.element.closest("tr"));
console.log(e.sender.dataSource._data[e.sender.selectedIndex]);
var selectedObject=e.sender.dataSource._data[e.sender.selectedIndex];
//model.set("ProductName",selectedObject.Description);
model.ProductName = selectedObject.Description;
model.UnitPrice = 100;
grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 0 + ")").text(selectedObject.Description);
grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 2 + ")").text(100);
// grid.refresh();
}
});
}