JQuery Grid-SubGrid for Parent-Child relation

Question

I need some idea, about how to implement a subgrid in the following sceaniro.

The following is the json data that I want to display in the JQuery Grid and Subgrid. Basically I am getting an object called "Contact" that has a collection called "actionSet".

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

}

I want eache Grid row to display the "Contact" and the subgris associated with the grid should display "actionSet" collection.

When a particular row in the Grid is selected, I do not want to make a server call to get the associated actions, as they are allready present in the "actionSet".

I have got the Grid working, displaying the "Contacts" nicely, but I get confused while implement the subgrid, as how to get the data for it, as its allready available in json.

jq(function() {
 jq("#grid").jqGrid({
 url:'/smallworks/project/getall.do',
 datatype: 'json',
 mtype: 'GET',
   colNames:['Id', 'First Name', 'Last Name'],
   colModel:[
     {name:'id',index:'id', width:55,editable:false,editoptions:   {readonly:true,size:10},hidden:true},
   {name:'givenName',index:'givenName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
   {name:'familyName',index:'familyName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
  ],
  postData: {
  },
  rowNum:20,
  rowList:[20,40,60],
  height: 200,
  autowidth: true,
  rownumbers: true,
  pager: '#pager',
  sortname: 'id',
  viewrecords: true,
  sortorder: "asc",
  caption:"Contacts",
  emptyrecords: "Empty records",
  loadonce: false,
  loadComplete: function() {
  },

Is this achievable? Do I need to parse JSON data specially for the subgrid? How can this be achieved?

Pharmacopoeia

I think I can suggest you some way to solve the problem, but one thing seems strange for me: the JSON data which you post contain no id data for every row. Moreover I don't understand the value of id column in the grid. Do you plan to show the id for the user or it will be used only for internal purpose? In the last case you can just remove id column and the sortname: 'id' parameter. The id property from the JSON input will be used to set id attribute of <tr> elements which represent rows of the grid (the HTML table). – Adina

Hi Oleg, I will remove the id from the column, which makes sense, as it should for internal purpose, but my question regarding the subgrid still remains, and what what I am really seeking ideas for. I have read your answers to some other post and they are all great. I hope to get some direction from you on this one. – Pharmacopoeia

I will add id properties to every element of rows array and post the answer (later) which correspond the modified data. – Adina

Answer 1

I suggest that you save information from actionSet in an object which you can easy access later. For example you can use userData parameter and fill the userdata part of JSON data inside of beforeProcessing. The create subgrid you can follow the answer or another one.

The demo demonstrate the implementation approach:

It uses the following code

var mainGridPrefix = "s_";

$("#grid").jqGrid({
    url: "Adofo.json",
    datatype: "json",
    colNames: ["First Name", "Last Name"],
    colModel: [
        { name: "givenName" },
        { name: "familyName" }
    ],
    cmTemplate: {width: 100, editable: true, editrules: {required: true},
        editoptions: {size: 10}},
    rowNum: 20,
    rowList: [20, 40, 60],
    pager: "#pager",
    gridview: true,
    caption: "Contacts",
    rownumbers: true,
    autoencode: true,
    height: "100%",
    idPrefix: mainGridPrefix,
    subGrid: true,
    jsonReader: { repeatitems: false },
    beforeProcessing: function (data) {
        var rows = data.rows, l = rows.length, i, item, subgrids = {};
        for (i = 0; i < l; i++) {
            item = rows[i];
            if (item.actionSet) {
                subgrids[item.id] = item.actionSet;
            }
        }
        data.userdata = subgrids;
    },
    subGridRowExpanded: function (subgridDivId, rowId) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
            subgrids = $(this).jqGrid("getGridParam", "userData");

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: subgrids[pureRowId],
            colNames: ["Due Date", "Note"],
            colModel: [
                { name: "actionDueDate", formatter: "date", sorttype: "date" },
                { name: "actionNote" }
            ],
            sortname: "actionDueDate",
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            autowidth: true,
            jsonReader: { repeatitems: false, id: "actionID" },
            gridview: true,
            idPrefix: rowId + "_"
        });
    }
});

UPDATED: The JSON data used in the demo one can see below. I added id property which is required for jqGrid. I used actionID as the id of the subgrids:

{
    "total": "10",
    "page": "1",
    "records": "78",
    "rows": [
        {
            "id": 10,
            "comment": null,
            "givenName": "Contact A",
            "familyName": "A",
            "actionSet": [
                {
                    "actionID": 1,
                    "actionDueDate": "2012-12-08",
                    "actionNote": "Action 1"
                },
                {
                    "actionID": 2,
                    "actionDueDate": "2012-12-09",
                    "actionNote": "Action 2"
                }
            ]
        },
        {
            "id": 20,
            "comment": null,
            "givenName": "Contact B",
            "familyName": "B",
            "actionSet": [
                {
                    "actionID": 3,
                    "actionDueDate": "2012-12-11",
                    "actionNote": "Action 3"
                },
                {
                    "actionID": 4,
                    "actionDueDate": "2012-12-10",
                    "actionNote": "Action 4"
                }
            ]
        }
    ]
}

Adina

Hi Oleg, Thank you for the reply. I have tried it and subgrid is not displaying properly. May I please have a look at the data you are using. When I was tring to debug by putting in the alerts I discovered that in the function "beforeProcessing", "item.id" is undefined. May be its the data differnece between your code and mine. I have attached the image above. – Pharmacopoeia

@Adofo: I wrote you before (see my comments to your question) about the requirement to include id property. I did this in the demo which I used. See here. – Adina

Thanx Oleg, my JSON is broken, I will fix it and try again, I will keep you posted. I am sure, ones the JSON is fine it will work. – Pharmacopoeia

@Adofo: You should not edit my answer. Instead of that you can append the text of your question with words like "UPDATED" and any additional information. You should post an comment to other question to inform answers about the changes in your question. It's standard way on the stackoverflow. – Adina

@Adofo: The JSON data which you try to post still don't contains id properties. – Adina

Thanx for letting know, how to append, by using "UPDATE", its all good :) – Pharmacopoeia