Кендо источник данных CRUD с шаблонами

Question

Кендо источник данных CRUD с шаблонами

0

Я использую KendoUI и углов для реализации очень похожего сценария, как в этом примере с веб-сайта 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

Изменение, которое я хочу сделать, это то, что после "create" я хочу, чтобы поле ProductName было выпадающим, а не текстовым полем, заполнено значениями, которые у меня есть в другом json (not sampleData). Это имеет значение (productName) и описание - описание. Кроме того, поле Описание не должно быть напечатано, а скорее "получено" из описания выбранного в раскрывающемся списке.

Может ли кто-нибудь помочь?

Dima R. 17 авг. 2016, в 18:41

Источник

Теги:

angularjs

templates

kendo-ui

kendo-grid

1 ответ

Ещё вопросы

dimodi · Answer 1 · 2016-08-18T10-43-00.000Z

Используйте специальный редактор для поля 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>.