jqGrid SubGrid not populating

Question

I am trying to popluate a subgrid with json data without using the subgridurl (as this will make calls to the page for each row expand) . but am getting Error: "t.rows is undefined" (in grid.base.js). code is as below : versions of modules used :

jquery-1.6.2.js
jqGrid 3.3.2

Thanks in advance.

        jQuery(gridID).jqGrid({
            url: dataURL,
            datatype: "json",
            colNames: ['ID', 'FirstName', 'LastName', 'Address1', 'Address2', 'City', 'Country'],
            colModel: [
                    { name: 'id', width: 200, sortable: false },
                    { name: 'firstName', width: 200, sortable: false, editable: true, edittype: 'select', editoptions: { value: { 1: '1', 2: '2', 3: '3'}} },
                    { name: 'lastName', width: 200, sortable: false, hidden: true },
                    { name: 'address1', width: 200, sortable: false, hidden: true },
                    { name: 'address1', width: 200, sortable: false, hidden: true },
                    { name: 'city', width: 200, sortable: false, hidden: false},
                    { name: 'country', width: 200, sortable: false, hidden: false}
                ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "TEST",
            height: "400px",
            subGrid: true,

            subGridRowExpanded: function(subgrid_id, row_id) {
                subGridID = subgrid_id;
                jQuery("#" + subGridID).html("<div style='margin-left:415px'><table id='" + subGridID + "' class='scroll'><tr><td>Testing</td><td>Testing</td><td>Testing</td><td>Testing</td><td>Testing</td><td>Testing</td></tr></table></div>"); ;
                jQuery("#" + subGridID).jqGrid(
       {
           datatype: function(pdata) { getDataSubGrid(pdata); },
           colNames: ['ID', 'FirstName', 'LastName', 'Address1', 'Address2', 'City', 'Country'],,
            colModel: [
                    { name: 'id', width: 200, sortable: false },
                    { name: 'firstName', width: 200, sortable: false, editable: true, edittype: 'select', editoptions: { value: { 1: '1', 2: '2', 3: '3'}} },
                    { name: 'lastName', width: 200, sortable: false, hidden: true },
                    { name: 'address1', width: 200, sortable: false, hidden: true },
                    { name: 'address1', width: 200, sortable: false, hidden: true },
                    { name: 'city', width: 200, sortable: false, hidden: false},
                    { name: 'country', width: 200, sortable: false, hidden: false}
                ],
           height: 100,
           rowNum: 20,

           sortorder: "asc",
           height: '100%'
       });
            }

        });

        jQuery("#mygrid").jqGrid('#mygrid', '#pager2', { edit: false, add: false, del: false });
    }


    function getDataSubGrid(pData) {
        gridId = "#mygrid_t";
        $.ajax({
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            url: myURL,//myurl would get json data from web service
            data: '{}',
            dataType: "json",
            success: function(data, textStatus) {


                ReceivedClientDataForSubGrid(getMain(data).rows);
            },
            error: function(data, textStatus) {
                alert('An error has occured retrieving data subgrid!');
            }
        });
    }


    function ReceivedClientDataForSubGrid(data) {
        var thegrid = $("#" + subGridID);
        if ($(thegrid).length == 0) alert('NOT EXISTS');

        thegrid.clearGridData();
        alert(data.length);//this shows 10 
        for (var i = 0; i < data.length; i++) {
        thegrid.addRowData(i + 1, data[i]);
        }
    }


    function getMain(dObj) {
        if (dObj.hasOwnProperty('d'))
            return dObj.d;
        else
            return dObj;
    }

Oleg Oleg · Accepted Answer · 2011-09-20T21:52:39

The error "t.rows is undefined" means typically that you use wrong HTML fragment for the grid. If you would use <div> instead of <table> for example you would have the error.

Moreover I strictly recommend you to upgrade to the current jqGrid version 4.1.2. The usage of jqGrid 3.3.2 today especially together with relatively new version 1.6.2 of jQuery can follows to problems. It is just like attempts to use 30 yeas old benzine in new automotor. You can receive serious problems.

jqGrid SubGrid not populating

1 Answers