How to show jqGrid subgrid on certain rows only? [duplicate]

Question

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?

Quintet

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.

Mannerless

I was thinking of not populating an empty grid in the fist place but this hgack totally does the trick! Thank you! – Quintet

@MoslemBenDhaou: What I mean is also not population the subgrid. Instead of that you can include in parent grid the hack. It will prevent adding of "+" icon in the row of the parent grid, so no subgrid will be ever populated for the row. By the way I prepared modification of free jqGrid (the fork of jqGrid which I develop starting with the end of 2014) which introduces hasSubgrid callback in subGridOptions. The callback informs jqGrid in which rows should be added the "+" icon and in which not. I'll publish the modification soon and inform you. – Mannerless

@MoslemBenDhaou: I posted the modification here. So you can download the latest code from GitHub or to use the urls. – Mannerless

@MoslemBenDhaou: I posted UPDATED part of my answer with the demo which demonstrates the new feature of free jqGrid. – Mannerless

Perfect Thank you! I will have a look at it as well :) – Quintet

@MoslemBenDhaou: You are welcome! – Mannerless

@Mannerless 4 years later and your hack for unbinding the click has just saved me an immense amount of hair pulling. Thanks a bunch! – Appendage

@plum0: I'm grad that old posts still help. Thanks for writing the comment! – Mannerless

@Mannerless Where can i find documentation on where the ">td.sgcollapsed" part comes from? I am currently trying to do a conditional to determine if a pager is needed and am looking for information on how to do that. – Appendage

@plum0: I can't follow you. First of all which version of jqGrid you use and fron which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7)? What you mean with "documentation" of internal structures like ">td.sgcollapsed"? jqGrid has source source code and one can see that js code create subbgrid using classes like ui-sgcollapsed, sgcollapsed and sgexpanded and CSS use the classes too. – Mannerless