<div id="gridResults">
    <table id="grid"></table>
    <div id="pager"></div>
</div>

then bind every button to a function which create the unique grid which you need in the corresponding case

var resetGrid = function() {
    $("gridResults").empty().html("<table id="grid"></table><div id="pager"></div>");
}
$("#btnCustomers").click(function(){
    resetGrid();
    var grid = $("#grid");
    grid.jqGrid({
        url: myCustomersUrl,
        colModel: {
             // information about customer table
        },
        // …
    });
}

It should work.

<button id="btnCustomers">Customers</button>

<button id="btnInvoices">Invoices</button>

<button id="btnInventory">Inventory</button>

<button id="btnRMA">RMA</button>

<button id="btnSales">Sales</button>

When a button is clicked, it should build/update a grid with appropriate information (all different tables, different columns etc)

I know I could create 5 separate divs, etc. but that seems like the wrong approach (I am thinking I would just rebuild the table object based on what is selected)

mike

Sorry, but I don't understand what do you mean under "5 buttons that will access 5 different sections of data". Could you explain this more detailed in other words.

Regards
Oleg

OlegK said:

Hi!

In general you data and jqGrid seems almost OK. After replacing some ″ characters to " (probably a problem with pasting of data in the forum) I could see the data loaded. The only error in JSON data was "records": "2" and 6 data items. Because you sorttype parameters in the column definition you probably wanted to use local sorting. To do this you should include loadonce: true to the list of jqGrid parameters.

You can see your jqGrid live on http://www.ok-soft-gmbh.com/jq.....ickson.htm. I made the only additional change rowNum: 5 to be able that local paging work and sorting works also through all data and not through the data on the current page.

Best regards

Oleg

Awesome, all is working now!  Thank you so much!    So, my last questions  and I can move forward with development...

Assuming I have one generic table and 5 buttons that will access 5 different sections of data, how can I rebuild grid at runtime (or will I need to have 5 separate DIVs and hide/show accordingly.

Do I just recall the same setup code (is there a need to destroy the current grid before rebuilding)

mse

In general you data and jqGrid seems almost OK. After replacing some ″ characters to " (probably a problem with pasting of data in the forum) I could see the data loaded. The only error in JSON data was "records": "2" and 6 data items. Because you sorttype parameters in the column definition you probably wanted to use local sorting. To do this you should include loadonce: true to the list of jqGrid parameters.

You can see your jqGrid live on http://www.ok-soft-gmbh.com/jq.....ickson.htm. I made the only additional change rowNum: 5 to be able that local paging work and sorting works also through all data and not through the data on the current page.

Best regards

Oleg

$("#masterList").jqGrid({

url: "sample.json",

datatype: "json",

colNames: ['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

colModel:[

{name:'id',index:'id', width:55, editable:true, sorttype:'int'},

{name:'invdate',index:'invdate', width:90, sorttype:'date', formatter:'date', datefmt:'d/m/Y'},

{name:'name',index:'name', width:100},

{name:'amount',index:'amount', width:80, align:"right", sorttype:'number',formatter:'number'},

{name:'tax',index:'tax', width:80, align:"right",sorttype:'number',formatter:'number'},

{name:'total',index:'total', width:80,align:"right",sorttype:'number',formatter:'number'},

{name:'note',index:'note', width:150, sortable:false,editable:true}

],

rowNum: 10,

rowList: [10,20,30],

height: 'auto',

pager: '#masterPager',

sortname: 'invdate',

viewrecords: true,

sortorder: "desc",

});

sample.json looks like this

{

"total": "1",

"page": "1",

"records": "2",

"rows": [

{

"id": "1",

"cell": [

"1",

"2010-10-01",

"name1",

"300",

"10",

"310",

"note"

]

},

{

"id": "2",

"cell": [

"2",

"2010-10-02",

"name2",

"300",

"10",

"310",

"note"

]

},

{

"id": "3",

"cell": [

"3",

"2010-10-03",

"name3",

"300",

"10",

"310",

"note"

]

},

{

"id": "4",

"cell": [

"4",

"2010-10-04",

"name4",

"300",

"10",

"310",

"note"

]

},

{

"id": "5",

"cell": [

"5",

"2010-10-05",

"name5",

"300",

"10",

"310",

"note"

]

},

{

"id": "6",

"cell": [

"6",

"2010-10-06",

"name6",

"300",

"10",

"310",

"note"

]

}

]

}