jqGrid subGrid how to hide "+" expand icon if we don't have data sub grid

Question

When i don't have any data in subgrid i am getting empty grid in subgrid. Also need to hide the expand icon. Below is the code i used.

$(document).ready(function() {
    'use strict';
    var myData = [
            {
                id: "10",
                c1: "My Value 1",
                c2: "My Value 1.1",
                subgridData: [
                    { id: "10", c1: "aa", c2: "ab" },
                    { id: "20", c1: "ba", c2: "bb" },
                    { id: "30", c1: "ca", c2: "cb" }
                ]
            },
            {
                id: "20",
                c1: "My Value 2",
                c2: "My Value 2.1",
                subgridData: [
                    { id: "10", c1: "da", c2: "db" },
                    { id: "20", c1: "ea", c2: "eb" },
                    { id: "30", c1: "fa", c2: "fb" }
                ]
            },
            {
                id: "30",
                c1: "My Value 3",
                c2: "My Value 3.1"
            }
        ],
        $grid = $("#list"),
        mainGridPrefix = "s_";

    $grid.jqGrid({
        datatype: "local",
        data: myData,
        colNames: ["Column 1", "Column 2"],
        colModel: [
            { name: "c1", width: 180 },
            { name: "c2", width: 180 }
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        sortname: "c1",
        viewrecords: true,
        autoencode: true,
        height: "100%",
        idPrefix: mainGridPrefix,
        subGrid: true,
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId);

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
                colModel: [
                    { name: "c1", width: 178 },
                    { name: "c2", width: 178 }
                ],
                height: "100%",
                rowNum: 10000,
                autoencode: true,
                autowidth: true,
                gridview: true,
                idPrefix: rowId + "_"
            });
            $subgrid.closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-hdiv")
                .hide();
        }
    });
    $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
});

My output like below screenshot. How to remove the expand icon and subgrid if we don't have any data for subgrid.

Is there any way to achieve this behavior. My output like below.

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

The solution of the problem depends on the version and the fork of jqGrid, which you use. I develop free jqGrid fork and have implemented hasSubgrid callback, which I described in the answer (see the demo).

The items of your input data contains subgridData property as the array of subgrid data. Thus one should create the subgrid only if subgridData property is defined and subgridData.length > 0. Thus you need just to upgrade to the current version of jqGrid (4.13.4 or 4.13.5pre) and to add the option

subGridOptions: {
    hasSubgrid: function (options) {
        // the options contains the following properties
        //     rowid - the rowid
        //     iRow - the 0-based index of the row
        //     iCol - the 0-based index of the column
        //     data - the item of the data, with the data of the row
        var subgridData = options.data.subgridData;
        return subgridData != null && subgridData.length > 0;
    }
}

to the main grid. The callback subGridOptions.hasSubgrid will be called during building the grid data, thus it works very effective like rowattr, cellattr and custom formatters.

edited May 23 '17 at 10:30

Community

1
1

answered Oct 13 '16 at 12:49

Oleg

220,925
34
403
798

How to hide the sub grid header in free jqGrid. Can you please help me on this. – Karthikeyan Oct 14 '16 at 04:55
@Karthikeyan: You are welcome! Look at [the answer](http://stackoverflow.com/a/14265456/315935). The code of `resizeStop` will be even very easy, because free jqGrid contains `setGridWidth` out of the box. – Oleg Oct 14 '16 at 07:47
@Oleg, the SubgridOptions is not working in my grid. I just tested with returning false & true but it's not considering the hasSubgrid return value, It's showing the plus icon even the return value is "False". Please advise on this. – Md Aslam Mar 10 '20 at 09:37
I just tried like ---> subGridOptions: { hasSubgrid: function (options) { return false; } } – Md Aslam Mar 10 '20 at 09:38
1

@MdAslam: Which **version** of free jqGrid you use? Do you use free jqGrid or an old jqGrid, which don't have support of `hasSubgrid` of `subGridOptions`? – Oleg Mar 10 '20 at 09:43
@Oleg, jqGrid 4.15.6-pre – Md Aslam Mar 10 '20 at 11:48
@Oleg, sorry, have updated my version, Its working fine but I am not able to get the rowdata or rowId from the Options parameter. Is there a way to identify the row_Id or cellvalue in the hasSubgrid function? – Md Aslam Mar 10 '20 at 12:11
1

@MdAslam: You should provide the demo, which demonstrates the problem. I tried with https://jsfiddle.net/OlegKi/utLj3ndm/ and everything works. You can modify it and post me back. – Oleg Mar 10 '20 at 12:14
1

@MdAslam: You need just examine the `options` parameter of `hasSubgrid`. You can include `debugger` inside of `hasSubgrid` and see that `options` is object like `{ rowid: "50", iRow: 1, iCol: 1, data: {itemdata} }`, for example, `{ rowid: "50", iRow: 1, iCol: 1, data: { name: "test5", invdate: "2007-10-31", amount: "300.00", tax: "20.00", total: "320.00", closed: false, ship_via: "FE", note: "note5", id: "50" } }` – Oleg Mar 10 '20 at 12:19
@Oleg, Thank you so much it's working fine. And one small problem that when I expand my grid column's cell width manually some design issue is coming. I have used the below options in the grid, is there any problem because of those? Because If I use old version of JQgrid that design issue is not coming but If I update the l4.15.6 pre then the design prob coming when I expand a column length in the grid (shrinkToFit: false, forceFit: false, autowidth: false, rownumbers: true,...) – Md Aslam Mar 11 '20 at 12:37
@MdAslam: Sorry, but I'm not understand exactly what you mean. The problem sounds complex and can't be solved without debugging of the demo, which reproduces the problem. – Oleg Mar 12 '20 at 12:06

jqGrid subGrid how to hide "+" expand icon if we don't have data sub grid

1 Answers1

Linked