Forum
Log In
Home
Topic RSS
19:24
29/06/2010
Offline
I have following jqGrid setup (and asscociated sample json file) When I view the page the grid is drawn with no data?
$("#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"
]
}
]
}
mse
00:52
10/08/2009
Offline
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
01:50
29/06/2010
Offline
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
mse
02:47
10/08/2009
Offline
Hi MSE!
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
02:51
29/06/2010
Offline
I have one grid div <table id="masterTable"> and 5 separate buttons
<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
mse
03:22
10/08/2009
Offline
There are different ways to implement what you want. For example you can place table and pager inside a div:
<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.
Most Users Ever Online: 715
Currently Online:
75 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
