How to show jqGrid subgrid on certain rows only? [

Question

This question already has an answer here:

• Hide expand/collapse symbol or deactivate spec. rows in jqGrid subgrid 1 answer

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?

Answer 1

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.