http://dojo.telerik.com/asIle
Modify the code as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
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: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "edit", title: " ", width: "120px" }],
editable: "inline"
});
});
function categoryDropDownEditor(container, options) {
if(options.model.ProductName==="Chai"){
$('<input data-bind="value:'+options.field+'"/>').appendTo(container);
}
else if(options.model.ProductName==="Chang"){
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: createDataSource(options.model.ProductName)
});
}
else{
$('<input data-text-field="userName" data-value-field="userId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoMultiSelect({
autoBind: false,
dataSource: createDataSource(options.model.ProductName)
});
}
}
function createDataSource(id) {
if(id==="Chang"){
return new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
});
}
else {
return new kendo.data.DataSource({
transport: {
read: "http://192.168.88.14:8400/DrugPortal/user/search"
}
});
}
}
</script>
</div>
</body>
</html>