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

Question

I am trying to create Kendo Grid which can contain normal text data along with combo box. I was successful in rendering data from JSON file to Kendo grid. I've posted sample code below:

<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 file ______________

[
   {"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"}
]

---

Now my requirement is to insert one more column called 'status'. In the each row of column 'status' I need to show 2 options Active and Block in dropdownList. I tried so many examples but finding difficult to insert dropdownlist inside grid. I require Dropdownlist which can read from json (in my case dataobj.json) file and update the changes (selected index value) in JSON file. Please help me to build kendo grid with dropdownlist.

Thanks, Prasad

Answer 1

you can use template for rendering the columns

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

Instead of gender and dob. you will use your status key from json.