Question

我正在尝试创建可以包含普通文本数据和组合框的Kendo Grid。我成功地将数据从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文件中的更改（选定的索引值）。请帮我用下拉列表构建kendo网格。

谢谢，普拉萨德

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"
 });

而不是性别和dob。你将使用json的状态键。

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

1 个答案: