jQGrid is not loading data

Question

Hi,

I am using jqGrid for my data table solution. Below are the configuration codes.

$(function() {
  $("#submitInput").click(function() {
    alert("I am called...")
    jQuery("#list").jqGrid({
       datatype: "json",
       url: "http://localhost:1201/admin/someURL.htm",
       mtype:"POST",
        height: "auto",
        colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"],
        colModel:[
            {name:"col1", index:"col1", sortable:true, resizable:false},
            {name:"col2", index:"col2", sortable:true},
            {name:"col3", index:"col3", sortable:false, resizable:false},
            {name:"col4", index:"col4", sortable:true, resizable:false},
            {name:"col5", index:"col5", sortable:true, resizable:false}     
        ],
        sortname:'col1',
        sortorder:'asc',
        pager: $('#pager'),
        rowNum:10,
        viewrecords: true,
        rowList:[10,20,30],
        caption: 'Some Grid Values',
        jsonReader: {
            root: "responseData",
            page: "currentPage",
            total: "totalPages",
            records: "totalFetchedRecords",
            repeatitems: true,
            cell: "rowContent",
            id: "rowID"
        },
         gridComplete: function() {
            alert("Loading done...");
        }
});
});
});

My JSON data is coming in following format:

"currentPage":"1","responseData":[  
            {"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"},
            {"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"}
], "totalFetchedRecords":"50","totalPages":"5"}

In my HTML, there is a button with id "submitInput" and a table with id "list".

Somehow, this data is not loaded into the grid.

Please provide some help.

Thanks, Niranjan

Answer 1

Probably you should don't create jqGrid inside of click handle. You should do this one time outside of click handle and call jQuery("list").trigger('reloadGrid') inside of the handler. If at the beginning the data should be not loaded in the grid, you can use datatype: 'local' an the beginning. If it needed, you can makes div with jqGrid sometimes visitable and sometimes invisible using using hide() and show() jQuery functions. Inside of click handler you can change the datatype to 'json' with respect of setGridParam() and then call trigger('reloadGrid'). In a lot of situation you also change some parameters of URL before calling trigger('reloadGrid') (see http://stackoverflow.com/questions/2660226/should-one-replace-the-usage-addjsondata-of-jqgrid-to-the-usage-of-setgridparam), but probably you need it not in your case.