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