如何使用JSON本地数据创建包含文本和下拉框的Kendo网格

Question

我正在尝试创建Kendo，它可以包含普通文本数据以及组合框。我成功地将数据从JSON文件呈现到Kendo网格。我在下面发布了示例代码：

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

<script>

$(document).ready(function() {
 var dsource=new kendo.data.DataSource({
   transport: {
     read: {
       url: "dataobj.json",
       dataType: "json"         
     }
   }     
 });
 $("#grid").kendoGrid({
   dataSource: dsource,
   columns: [
    { field: "patient", title: "Patient" },
    { field: "gender", title: "Gender" },
    { field: "dob", title: "DOB" },
    { field: "healthPlan", title: "Health Plan" },
    { field: "phone", title: "Phone Number" },
    { field: "pcp", title: "PCP" },
    { field: "status", title: "Overall Status" },
    { field: "patientID", title: "McK Patient ID" }

],
   height: 340,
   scrollable: true,
   sortable: true,
   pageable: true,
   editable: "inline"
 });

});    
</script>

_____________ dataobj.json文件______________

[
   {"patient" : "Apple, Margaret", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Medicare", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 328239 },
   {"patient" : "Bregstrom, Glen", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Bruno, Alan", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Collier, Kasey", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Edelson, Ted", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Green, Lousie", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Green, Sarah", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly"}
]

现在，我的要求是再插入一个名为“status”的列。在列'status‘的每一行中，我需要在dropdownList中显示2个选项Active和Block。我尝试了很多例子，但发现很难在网格中插入下拉列表。我需要Dropdownlist列表，它可以从json (在我的例子中是dataobj.json)文件中读取，并更新JSON文件中的更改(选定的索引值)。请帮助我建立剑道网格与下拉列表。

谢谢你，普拉萨德

Answer 1

可以使用模板来呈现列。

 var dsource=new kendo.data.DataSource({
   transport: {
     read: {
       url: "dataobj.json",
       dataType: "json"         
     }
   }     
 });
 $("#grid").kendoGrid({
   dataSource: dsource,
   columns: [
       {template: "<select><option>#= gender #</option><option>#= dob #</option></select>", title: "status"},
    { field: "patient", title: "Patient" },
    { field: "gender", title: "Gender" },
    { field: "dob", title: "DOB" },
    { field: "healthPlan", title: "Health Plan" },
    { field: "phone", title: "Phone Number" },
    { field: "pcp", title: "PCP" },
    { field: "status", title: "Overall Status" },
    { field: "patientID", title: "McK Patient ID"}


],
   height: 340,
   scrollable: true,
   sortable: true,
   pageable: true,
   editable: "inline"
 });

而不是性别和道布。您将使用json中的状态键。