jqgrid: subgrid toolbar does not display

Question

I'm using jqgrid 4.8.2. I'm trying to follow along with the examples on the demo site. I've created a parent grid and need to show a subgrid (as a grid). For some reason, the toolbar pager for the subgrid won't display. The rowNum, width and height options are working, though. I've looked at the demo and I can't see what I'm doing wrong. Would someone take a look at the following code, please?

var lastSelection;

$(document).ready(function () {

    $("#jqGrid").jqGrid({
    url: 'servlet/getData',
    datatype: "json",
    editurl: "servlet/updateProduct",
    page: 1, 
     colModel: [
        { label: 'ID', name: 'ProductId', width: 75, key: true },
        { label: 'Category', name: 'CategoryName', width: 90 },
        { label: 'Name', name: 'ProductName', width: 100 },
        { label: 'Country', name: 'Country', width: 80 },
        { label: 'Price', name: 'Price', width: 80 },
        { label: 'Qty', name: 'Quantity', width: 80 },
        { label: 'Included?', name: 'Included', width: 80,
                editable: true, 
                edittype: "checkbox", 
                editOptions: {value:"Yes:No"} }
    ],
    viewrecords: true, // show the current page, data range and total records on the toolbar
    onSelectRow: function (rowid) {
        var grid = $('#jqGrid');
        if (rowid && rowid !== lastSelection) {
            grid.jqGrid('restoreRow', lastSelection);
            lastSelection = rowid;
        }
        grid.jqGrid('editRow', lastSelection, {keys: true, 
            extraparam : {
                home: "livonia", 
                productName: function(){
                    var row = grid.getRowData(lastSelection);

                    // Both of these work:
                    var temp = row.ProductName;
                    var temp1 = row['ProductName'];

                    return row.ProductName;
                }
            }
        } 
        );

    },
    width: 780,
    height: 200,
    rowNum: 10,
    pager: "#jqGridPager",

    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
        var lastSubgridSelection;

        var grid = $('#jqGrid');
        var row = grid.getRowData(row_id);  
        var productId = row.ProductId;

           var subgrid_table_id;
           subgrid_table_id = subgrid_id + "_t";
           jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
           jQuery("#"+subgrid_table_id).jqGrid({
              url: 'servlet/getProductWarehouses?q=2&id=' + row_id + '&productId=' + productId,
              datatype: "json",
                page: 1, 
                colModel: [
                    { label: 'Product ID', name: 'ProductId', width: 75, key: false, hidden: true },
                    { label: 'Whse ID', name: 'WhseId', width: 90, key: true },
                    { label: 'Whse Name', name: 'WhseName', width: 90 },
                    { label: 'Qty', name: 'Quantity', width: 80 },
                    { label: 'Included?', name: 'Included', width: 80,
                    editable: true, 
                    edittype: "checkbox", 
                    editOptions: {value:"Yes:No"} }
                ],
            viewrecords: true,
            height: '100%',
            width: 400,
            rowNum: 5,
            pager: "#jqGridPager" + "_" + subgrid_id
           });
       }

});


});

Answer 1

You mean probably that the pager (not the toolbar) will be not displayed in subgrids.

The reason is very easy if you understand how the grid as subgrid feature works in jqGrid. If you just add subGrid: true to the grid (to the main grid) then jqGrid insert additional column in colModel with the name "subgrid". The column will have + icons which can be used to "expand" subgrid. If the user clicks on the + icon then the new row will be added under the row with + icon. The row will contains <td> with the icon and <td> with span over the whole grid. The last <td> will contains the subdrid. Before call of subGridRowExpanded jqGrid creates empty <div> in the cell with id constructed from grid id, "_" and rowid (of expanding row). The first parameter of subGridRowExpanded callback (subgrid_id in your code) contains the id of the empty <div>. The picture below shows the described above

I marked in red color the subgrid row. The id of empty div is jqGrid_10 in the above example because the rowid is 10 and the grid id is jqGrid.

It's important to understand that you have to create <table> element for subgrid dynamically inside of subGridRowExpanded callback. If you want that the subgrid have the pager then you have to create <div> for the pager too. The problem in your code: you just use pager: "#jqGridPager" + "_" + subgrid_id option for subgrid, but you don't created <div> with the corresponding id.

The next problem: every row (<tr>) of subgrid will have id attribute (rowid). So one have to assign it. The user can open multiple subgrids at the same time. The problem is that it's possible to have id duplicates because of usage the same id in two different subgrids or between subgrid and the main grid. To fix the problem with id conflicts it's strictly recommended to use idPrefix parameter for subgrid with the value which is different for every subgrid.

A possible fixed implementation of subGridRowExpanded could be the following:

subGridRowExpanded: function (subgridDivId, rowid) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        subgridPagerId = subgridDivId + "_p";
    $("#" + subgridDivId)
        .append($subgrid)
        .append("<div id='" +subgridPagerId + "'></div>");

    $subgrid.jqGrid({
        url: 'servlet/getProductWarehouses',
        postData: {
            q: 2,
            id: rowid,
            productId: rowid
        },
        datatype: "local",
        colModel: [
            { label: 'Product ID', name: 'ProductId', width: 75, hidden: true },
            { label: 'Whse ID', name: 'WhseId', width: 90, key: true },
            { label: 'Whse Name', name: 'WhseName', width: 90 },
            { label: 'Qty', name: 'Quantity', width: 80 },
            { label: 'Included?', name: 'Included', width: 80,
                editable: true,
                edittype: "checkbox",
                editOptions: {value:"Yes:No"} }
        ],
        viewrecords: true,
        height: '100%',
        width: 400,
        rowNum: 5,
        //idPrefix: subgridDivId + "_",
        idPrefix: rowid + "_",
        pager: "#" + subgridPagerId
    });
}

By the way you use key: true property for the column ProductId of the main grid. So the rowid of the main grid will be the same as the ProductId. Because of that I used productId: rowid in the above code. One more remark. I used idPrefix: rowid + "_" for subgrid. One can use successfully other values in the same way, for example idPrefix: subgridDivId + "_".