Master/Detail DataGrid using JSON or XML

[Leo]

In the Web demos section, there is a grid which displays its data in a master/detail type format. The demo I’m referring to can be found here:

http://demos.kendoui.com/web/grid/detailtemplate.html

 

The grid pulls the data from the following services/feed:

http://demos.kendoui.com/service/Northwind.svc/

 

http://demos.kendoui.com/service/Northwind.svc/Employees?$format=json&$inlinecount=allpages&$callback=callback&$top=5

  

http://demos.kendoui.com/service/Northwind.svc/Employees%281%29/Orders?$format=json&$inlinecount=allpages&$callback=callback&$top=5

Is there a sample of this same grid using JSON or XML which is either returned from an object or is store statically inside the page?

 
Thanks,

 

[Leo]

Got it to work!

I was able to modify the detail datagrid and get it working with two(2) Java actions.

My first Java class/action is GetEmployee.action:

public String execute() throws Exception

{

    StringBuffer jsonBuf = new StringBuffer() ;

 

    JSONObject jsonObj = new JSONObject();

    jsonObj.put("EmployeeId","EMPID-001");

    jsonObj.put("Title","Master");     

    jsonObj.put("TitleOfCourtesy","Mr");       

    jsonObj.put("FirstName","Bruce");

    jsonObj.put("LastName","Lee"); 

    jsonObj.put("BirthDate","Date(-664761600000)");    

    jsonObj.put("HireDate","Date(704678400000)");

    jsonObj.put("Address","507 - 20th Ave. E.\r\nApt. 2A");

    jsonObj.put("City","Shanghai");    

    jsonObj.put("Country","China");

    jsonObj.put("HomePhone","[phone]");     

    jsonObj.put("Extension","5467");

    jsonObj.put("Photo","");       

    jsonObj.put("Notes","BA in psychology");       

    jsonObj.put("ReportsTo","2");      

    jsonObj.put("PhotoPath","");       

     

    jsonBuf.append(jsonObj.toString()) ;

    // jsonBuf.append(jsonObj.toString()) ;

    // jsonObj.isNull(null) ;

     

    output.setValue(AjaxConsequence.OBJECT, "[" + jsonBuf.toString() + "]");

    return SUCCESS;

}                  

Which returns the following JSON string:

[{"LastName":"Lee","Country":"China","BirthDate":"Date(-664761600000)","Photo":"","PhotoPath":"","Title":"Master","City":"Shanghai","HomePhone":"[phone]","Notes":"BA in psychology","TitleOfCourtesy":"Mr","Extension":"5467","Address":"507 - 20th Ave. E.\r\nApt. 2A","FirstName":"Bruce","HireDate":"Date(704678400000)","ReportsTo":"2","EmployeeId":"EMPID-001"}]

My second Java class/action is GetOrders.action:

public String execute() throws Exception

{

    StringBuffer jsonBuf = new StringBuffer() ;

             

    JSONObject jsonObj = new JSONObject();

    jsonObj.put("EmployeeId","EMPID-001");

    jsonObj.put("OrderID","10258");

 

    jsonObj.put("CustomerID","ERNSH");

    jsonObj.put("OrderDate","Date(704678400000)") ;

    jsonObj.put("RequiredDate","Date(704678400000)") ;

    jsonObj.put("ShippedDate","Date(704678400000)") ;      

    jsonObj.put("ShipVia","1") ;       

    jsonObj.put("Freight","140.1") ;       

    jsonObj.put("ShipName","Ernst Handel") ;       

    jsonObj.put("ShipAddress","123 Somewhere Stree");

    jsonObj.put("ShipCity","Graz");

    jsonObj.put("ShipRegion","");      

    jsonObj.put("ShipPostalCode","8010");              

    jsonObj.put("ShipCountry","USA");

 

    jsonBuf.append(jsonObj.toString()) ;

 

    // jsonObj.isNull(null) ;

    // jsonBuf.append(",").append(jsonObj.toString()) ;

             

    output.setValue(AjaxConsequence.OBJECT, "[" + jsonBuf.toString() + "]");

    return SUCCESS;

}                  

Which returns the following JSON string:

[{"ShipPostalCode":"8010","ShippedDate":"Date(704678400000)","OrderDate":"Date(704678400000)","OrderID":"10258","Freight":"140.1","ShipRegion":"","RequiredDate":"Date(704678400000)","ShipCity":"Graz","ShipCountry":"USA","ShipVia":"1","CustomerID":"ERNSH","ShipAddress":"123 Somewhere Stree","EmployeeId":"EMPID-001","ShipName":"Ernst Handel"}]

Finally, my modified HTML to display Master/Detail data in a grid:

<script>

     $(document).ready(function() {

         var element = $("#grid").kendoGrid({

             dataSource: {

                 transport: {

                     read:  {

                         url: "/site/GetEmployee.action",

                         dataType: "json"

       },

  },

                 pageSize: 5,

                 serverPaging: true,

                 serverSorting: true

             },

             height: 450,

             sortable: true,

             pageable: true,

             detailTemplate: kendo.template($("#template").html()),

             detailInit: detailInit,

             dataBound: function() {

                 this.expandRow(this.tbody.find("tr.k-master-row").first());

             },

             columns: [

                 {

                     field: "FirstName",

                     title: "First Name"

                 },

                 {

                     field: "LastName",

                     title: "Last Name"

                 },

                 {

                     field: "Country"

                 },

                 {

                     field: "City"

                 },

                 {

                     field: "Title"

                 }

             ]

         });

     });

 

     function detailInit(e) {

         var detailRow = e.detailRow;

 

         detailRow.find(".tabstrip").kendoTabStrip({

                                     animation: {

                                             open: { effects: "fadeIn" }

                                     }

                             });

 

         detailRow.find(".orders").kendoGrid({

             dataSource: {

                 transport: {

                     read:  {

                         url: "/site/GetOrders.action",

                         dataType: "json"

                     },

                 },

                 serverPaging: true,

                 serverSorting: true,

                 serverFiltering: true,

                 pageSize:6,

                 filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }

             },

             scrollable: false,

             sortable: true,

             pageable: true,

             columns: [ "OrderID", "ShipCountry", "ShipAddress", "ShipName" ]

         });

     }

 </script>