Question

我正在使用KendoUI和angular来实现一个非常类似于Telerik网站的例子。 http://dojo.telerik.com/AreTa/2

这就是我所拥有的

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>

<style>html { font: 12px sans-serif; }</style>

<div id="grid"></div>

<script>
var sampleData = [
{ProductName: "Sample Name", Description: "Sample Description"}
];

// custom logic start

var sampleDataNextID = sampleData.length + 1;

function getIndexByName(name) {
var idx,
l = sampleData.length;

for (var j=0; j < l; j++) {
if (sampleData[j].getIndexById == name) {
return j;
}
}
return null;
}

// custom logic end

$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
// on success
e.success(sampleData);
// on failure
//e.error("XHR response", "status code", "error message");
},
create: function (e) {
// assign an ID to the new item
//e.data.ProductName = e.data;
// save data item to the original datasource
sampleData.push(e.data);
// on success
e.success(e.data);
// on failure
//e.error("XHR response", "status code", "error message");
},
update: function (e) {
// locate item in original datasource and update it
sampleData[getIndexByName(e.data.ProductName)] = e.data;
// on success
e.success();
// on failure
//e.error("XHR response", "status code", "error message");
},
destroy: function (e) {
// locate item in original datasource and remove it
sampleData.splice(getIndexByName(e.data.ProductName), 1);
alert("Delete Success"+e.data.ProductName) ;
// on success
e.success();
// on failure
//e.error("XHR response", "status code", "error message");
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
batch: false,
schema: {
model: {
id: "ProductName",
fields: {                            
    ProductName: { validation: { required: true } },                            
    Description: { type: "text"}
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Mobile Phone" },
{ field: "Description", width: "120px" },
{ command: ["destroy"], title: "Action;", width: "200px" }
],
editable: "inline"
});
});
</script>
</body>
</html>

它的工作原理，就像它在Telerik网站上的方式

我想要做的改变是在＆＃34;创建＆＃34;，我希望ProductName字段是一个下拉列表，而不是textfield，填充我在另一个json（而不是sampleData）中的值。它有一个值（productName）和描述 - 描述此外，描述字段不是可键入的，而是＆＃34;获得＆＃34;来自下拉列表中选定的描述。

有人可以帮忙吗？

Answer 1

使用ProductName字段的自定义编辑器：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor

http://demos.telerik.com/kendo-ui/grid/editing-custom

将一个change处理程序附加到DropDownList，并set()将相应的值附加到数据项的Description字段（这是您已从编辑器中获得的Kendo UI Model实例函数的参数）。

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-change

http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set

您还需要阻止直接编辑Description字段。如果您为此字段使用自定义“编辑器”，只需在<span>元素中输出当前值，就可以轻松实现此目的。

带有模板的Kendo Datasource CRUD

1 个答案: