I created a grid with multiple sub-grid levels using jqGrid and with a little help from this answer. Here is what I have currently:
I am trying to modify it in a way to only show the sub grid if there is data to show. In other words if the count > 0
. Logically I tried to add a condition (pseudo code below, based on previously mentioned answer):
Original Code
var gridParams = {
datatype: 'local',
data: myGridData,
colNames: ['Column 1', 'Column 2'],
colModel: [
{ name: 'col1', width: 200 },
{ name: 'col2', width: 200 }
],
...
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: mySubgrids[rowId],
colNames: ['Col 1', 'Col 2', 'Col 3'],
colModel: [
{ name: 'c1', width: 100 },
{ name: 'c2', width: 100 },
{ name: 'c3', width: 100 }
],
...
});
}
}
$("#grid").jqGrid(gridParams);
Adjusted Code
var gridParams = {
datatype: 'local',
data: myGridData,
colNames: ['Column 1', 'Column 2'],
colModel: [
{ name: 'col1', width: 200 },
{ name: 'col2', width: 200 }
],
...
}
// Condition added HERE
if (count > 0)
{
gridParams.subGrid = true;
gridParams.subGridRowExpanded = function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: mySubgrids[rowId],
colNames: ['Col 1', 'Col 2', 'Col 3'],
colModel: [
{ name: 'c1', width: 100 },
{ name: 'c2', width: 100 },
{ name: 'c3', width: 100 }
],
...
});
}
}
$("#grid").jqGrid(gridParams);
but that just fails miserably:
Is this simply not supported or I am doing something wrong?
If I correctly understand your question then you want to remove "+" (expand subgrid) icon for rows which have no elements in the subgrid. In the case you can follow the old trick described in the old answer. You can add loadComplete
handle which removes some "+" icons from the grid having subGrid: true
option. You need just know rowids of all rows of the grid which have no subgrid and do for the rows
$("#" + rowid + ">td.sgcollapsed").unbind("click").html("");
UPDATED: I posted the modification of free jqGrid which allows easy implement the requirement without the above hack.
The demo demonstrates the new feature. The implementation is very easy. It contains hasSubgrid
callback inside of subGridOptions
. The callback have options
which is object with the properties rowid
, data
and two less important properties iRow
and iCol
. The code of the demo uses options.data
which represent the data of the row. The demo creates subgrid only if input row have tax
higher as 20.
subGridOptions: {
hasSubgrid: function (options) {
return parseFloat(options.data.tax) > 20;
}
}
You can use mySubgrids[options.data.rowid].length
in your case, if I correctly understand the format of your input data.