jqgrid open subgrid only if there is some data

Question

here is declarations of my subgrid:

    subGrid : true,
    subgridtype: 'json',
    subGridUrl: 'manuf_subgr.php',
    subGridModel: [{    name  : ['Package','Sticker','Manufacturer'], 
                        width : [85,50,100],
                        params: ['Catalogue'] 
                    } 
    ],
    gridComplete: function() {
        var timeOut = 50;
        var rowIds = $("#schedule").getDataIDs();
        $.each(rowIds, function (index, rowId) {
            if(rowId.row_cnt != 0){
                setTimeout(function() {
                    $("#schedule").expandSubGridRow(rowId);
                }, timeOut);
                timeOut = timeOut + 200;
            }
        });
    }

what I expect to happen is this line if(rowId.row_cnt != 0) preventing opening a subgrid if there is no data returned from json... yet all grids are open regardless...

can someone help to implement stop for opening empty subgrids?

full code:

jQuery("#schedule").jqGrid({
    url:'sched.php',
    datatype: "json",
    mtype:'GET',
    colNames:['Street_Date','Label','Catalogue', 'Artist', 'Title','UKDP','UPCEAN','format'],
    colModel:[
        {name:'Street_Date',index:'Street_Date desc, ID', sorttype:"date", formatter:'date', formatoptions: {newformat:'d/m/Y'}, width:75},
        {name:'label',index:'label', width:100,align:"center"},     
        {name:'Catalogue',index:'Catalogue', width:85},
        {name:'Artist',index:'Artist', width:120},
        {name:'Title',index:'Title', width:250},
        {name:'UKDP',index:'UKDP', width:35, align:"right", formatter:"number", sorttype:"float"},
        {name:'UPCEAN',index:'UPCEAN', width:120, align:"center"},      
        {name:'format',index:'format', width:70, sortable:false}
    ],
    height: "100%",
    rowNum:20,
    rowList:[10,20,30,50,100],
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    jsonReader : { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        repeatitems: true, 
        cell: "cell", 
        id: "id",
        userdata: "userdata", 
        subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
    },
    pager: '#schedule_pager',
    caption:"Release Schedule",

    grouping:true,
    groupingView : {
        groupField : ['Street_Date']
    },


    subGrid : true,
    subgridtype: 'json',
    subGridUrl: 'manuf_subgr.php',
    subGridModel: [{    name  : ['Package','Sticker','Manufacturer'], 
                        width : [85,50,100],
                        params: ['Catalogue'] 
                    } 
    ],
    gridComplete: function() {
        var timeOut = 50;
        var rowIds = $("#schedule").getDataIDs();
        $.each(rowIds, function (index, rowId) {
            if(rowId.row_cnt != 0){
                setTimeout(function() {
                    $("#schedule").expandSubGridRow(rowId);
                }, timeOut);
                timeOut = timeOut + 200;
            }
        });
    },

    onSelectRow: function (rowId) {
        $("#schedule").jqGrid ('toggleSubGridRow', rowId);
    }
});

Answer 1

You write in the comment that you are newbie and it's the second day when you use it. jqGrid is relatively complex and your first example which you try to implement seems to me too complex for newbie. You try to load fill jqGrid with the data from the database and do grouping and subgrid in one grid.

What you try to implement in your demo can be solved by usage of expandOnLoad: true property of the subGridOptions option:

subGridOptions: {expandOnLoad: true}

You can see the feature on the official demo disguised under "Hierarchy" / "Expand all Rows on load". There are one important problem which I described in the answer. The problem is shortly the following: internal implementation of Ajax requests used in jqGrid prevent (skip) Ajax requests when another pending (not yet answered by the server) are working (see .grid.hDiv.loading in the places of the code here, here in the subgrid module and here, here and here). Neither expandOnLoad: true nor your current implementation can grantee that new Ajax request will be started during previous one still not responded. So you can have not all subgrids opened. You main question: "how to prevent opening of empty subgrids or how to hide it?", I find the second (and less important) question. Even if you see currently that your web site opens all subgrids it can be that access to the same site from more far place from the internet will follow opening of one or some subgrids only.

So I think that you should either change the design of your web page (change what you want to display in subgrids) or change the implementation so that you construct a queue with the list of subgrids which should be opened and you will open the next grid only after the previous one will be opened.

Alternatively you can includes the data for all subgrids in the response for the main grid. In the case you should use subGridRowExpanded callback to fill the grids as subgrid as grid. You you would use no caption and no pager option in the subgrids you will be get the same look as with the standard subgrids. Additionally you will have much more flexibility in the options. I personally prefer to subgrid as grid.