剣道データソーステンプレートを使用したCRUD

私は剣道UIを使用しており、Telerikウェブサイトのこの例のような非常に似たシナリオを描いています。 http://dojo.telerik.com/AreTa/2 剣道データソーステンプレートを使用したCRUD

このは私が

<!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のウェブサイト上にあるように動作しますフィールドはドロップダウン、テキストフィールドの代わりに、私は別のjson（sampleDataではない）の値を入力します。これには値（productName）とDescription - descriptionがありますまた、Descriptionフィールドは入力可能ではなく、ドロップダウンリストで選択した内容から「取得」されています。

誰でも手助けできますか？

出典

2016-08-17 Dima R.