CODEWITHSUNDEEP
javascriptjqueryjsonjqgridsubgrid
Harbir
Harbir

Reputation: 453

Getting subGrid data from the existing

I am new to jquery and specially have no experience using jqGrid and its subGrids.

I have got the simple grid working, but I really need a subGrid. I am displaying "contacts" in the grid and for each contact, there are related "actions". I need the "actions" to be appearing in the subgrid.

The following is the json that is coming back to the view, and it has the "contacts" with associated "actions". "Contact" object has a list of "Action" objects.

{
 "total" : "10",
 "page" : "1",
 "records" : "78",
 "rows" : [ {
   "comment" : null,
   "givenName" : "Contact A",
   "familyName" : "A",
   "actionSet" : [ {
      "actionID" : 1,
      "actionDueDate" : "2012-12-08",
      "actionNote" : "Action 1"
     }, {
      "actionID" : 2,
      "actionDueDate" : "2012-12-08",
      "actionNote" : "Action 2"
   } ],
   "contactID" : 1,
   "streetName" : null,
   "city" : null,
   "streetAddress" : null,
   "postalCode" : null
}    ...]

}

The Grid has a url that goes and fetches the JSON, which is fine.

jq("#grid").jqGrid({
url:'/getrecords.do',
datatype: 'json',
mtype: 'GET',

Where I am getting confused is how to get data for the subGrid from the existing JSON(as the "actions" associated with each "contact" are returned in the json), rather than making another url call like..

subGridRowExpanded: function(subgrid_id, row_id) { 
 var subgrid_table_id, pager_id; 
 subgrid_table_id = subgrid_id+"_t"; 
 pager_id = "p_"+subgrid_table_id; 
 $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
 jQuery("#"+subgrid_table_id).jqGrid({ 
        url:"/getrecords.do"+row_id, 
        datatype: "xml",

Any help will be greatly appreciated.

regards Adofo.

Upvotes: 0

Views: 726

Answers (1)

Carlos Nu&#241;ez
Carlos Nu&#241;ez

Reputation: 470

In your call to jqGrid, you need to pass the option "subGrid: true" and also the "subGridModel" option with the inappropriate parameters to do your mapping. 

jq("#grid").jqGrid({
    url:'/getrecords.do',
    datatype: 'json',
    mtype: 'GET',
    subGrid: true,
    subGridModel: {
        // Your Mapping Here
    }
.
.
.

Taken from here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

Upvotes: 1

Related Questions