如何使用 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' 列的每一行中，我需要在下拉列表中显示 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"
 });

而不是性别和出生日期。您将使用 json.

中的状态键

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

How to create Kendo Grid which contains text and dropdown boxes using JSON local data

json

kendo-ui

kendo-grid

kendo-dropdown