jQgrid not loading the custom userData on loadComplete

Question

I'm trying to get some custo datam sent from the server stored in the json with the table data. The JSON that I'm sending is this one

{"total":1,"page":1,"records":1,"userdata":{"aaa":"bbb"},"rows":[{"id":0,"cell":["ampolla","1"]}]}

and I'm trying to get this userdata in the loadComplete event with this

loadComplete: function() {          
    console.log(jQuery("#gridDataGraphic").getGridParam('userData'));
},

According to other posts I think that I'm building properly the json with "userdata" and getting after with "userData", so I don't know where is my problem.

The entire jQgrid definition is this one (just in case someone needed):

$("#${gridDataGraphic}").jqGrid({
    url: gridUrl,
    postData: gridPostData,
    datatype: "json",
    height: "auto",
    autoencode: true,
    shrinkToFit: true,                   
    autowidth: true,        
    multiselect:false,
    forceFit:true,              
    loadui: '',
    loadtext: '',
    altRows: true,
    altclass: 'ui-priority-altRow',
    colNames:["<bean:message key='label.category'/>",
              "<bean:message key='label.value'/>"
              ],
    colModel:[
            {name:'${dataGraphicColumnCategory}', index:'${dataGraphicColumnCategory}', resizable:false, editable:false, search:false, sortable:true},
            {name:'${dataGraphicColumnValue}', index:'${dataGraphicColumnValue}', resizable:false, editable:false, search:false, sortable:true}
            ],
    rowNum: rowNums,
    gridview: true,
    mtype: "POST",                  
    pager: jQuery('#${pagerDataGraphic}'),
    sortname: "${lastOrderName}",
    sortorder: "${lastSortOrder}",
    page: "${ReportGenerationForm.currentPage}",
    sidx: "${param.sidx}",
    sord: "${param.sord}",
    viewrecords: true,
    onCellSelect: function(rowid,iCol,cellcontent) {},      
    pginput:true,
    loadError: function (xhr, status, error){
        showErrorDialog("<bean:message key='system.error.body'/>: " + error);
    },
    recordpos:"right",
    pagerpos:"center",
    loadComplete: function() {
        console.log(jQuery("#gridDataGraphic").getGridParam('userData'));
    },
    gridComplete: function() {},
    onSortCol: function (index, columnIndex, sortOrder) {
        $("#${gridDataGraphic}").trigger('reloadGrid');                                             
    }
});

Now the grid is perfectly loaded and shows the row; but console log is returning undefined :(

I really appreciate any help you can provide.

Answer 1

I think you call a grid which does not exist (maybe) replace:

loadComplete: function() {
    console.log(jQuery("#gridDataGraphic").getGridParam('userData'));
},

with

loadComplete: function() {
    console.log(jQuery("#${gridDataGraphic}").getGridParam('userData'));
},