CODEWITHSUNDEEP
javascriptjqueryjsonjspjqgrid
Striker
Striker

Reputation: 329

jqgrid retrieves JSON data from rest service but does not display it

The grid displays and retrieves the data from the rest service but does not show up. I'm pretty sure I'm just missing something stupid but I've checked the documentation and a few other answers on here and nothing has fixed it. I can see in the debugger the data is coming across (which is where I pulled the sample from) and there are no JavaScript errors on the page. I also checked the data and it's valid JSON. What am I missing/doing wrong?

Code:

<table id="custSearch">
    <tr><td></td></tr>
</table>
<div id="custSearchPager"></div>


$("#custSearch").jqGrid({
	url : '/rebate/rest/customer/getCustomers',
	datatype : 'json',
	mtype : 'GET',
	colNames : ['customerID', 'Company', 'First Name', 'Last Name','Address', 'City', 'State', 'Zip Code', 'Phone', 'Fax', 'EMail'],
	colModel : [ 
		{ name:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
		{ name:'Company', index:'company', width:150, sortable:true},
		{ name: 'First Name', index: 'firstName', length: 50, search: false},	
		{ name: 'Last Name', index: 'lastName', width: 80}, 
		{ name: 'Address', index: 'address', width: 100, search: false}, 
		{ name: 'City', index: 'city', width: 40, search: false}, 
		{ name: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} }, 
		{ name: 'Zip', index: 'zip', width: 80}, 
		{ name: 'Phone', index: 'phone', width: 80}, 
		{ name: 'Fax', index: 'fax', width: 80, search: false}, 
		{ name: 'EMail', index: 'email', width: 80}
	],
	rowNum: 20,
	rowList:[10,20,30],
	pager : '#custSearchPager',
	sortname : 'company',
	sortorder : 'desc',
	viewrecords: true,
	gridview: true,
	caption : 'Customers',
	height: '300',
	jsonReader: {cell:"", id:"customerID"}
});            

jQuery("#custSearch").jqGrid('navGrid','#custSearchPager',{edit:false,add:false,del:false,search:true});

Data:

{"page":"1","total":"30","records":"20","rows":[
    {"customerID":144,"firstName":"Keefe","lastName":"Abbott","company":"Vulputate LLC","address":"P.O. Box 688, 4718 Urna Street","country":"USA","city":"Detroit","state":"MI","zip":"61733","phone":"(411) 256-3885","fax":"(712) 531-0718","email":"[email protected]"},
    {"customerID":91,"firstName":"Jerome","lastName":"Allison","company":"Vulputate Inc.","address":"Ap #519-7407 Orci Road","country":"USA","city":"Kansas City","state":"MO","zip":"22551","phone":"(245) 214-4028","fax":"(202) 531-5933","email":"[email protected]"},
    {"customerID":293,"firstName":"Hyacinth","lastName":"Fuentes","company":"Vulputate Corporation","address":"Ap #899-7402 Donec Road","country":"USA","city":"Jackson","state":"MS","zip":"27829","phone":"(342) 945-6263","fax":"(260) 216-3339","email":"[email protected]"},
    {"customerID":235,"firstName":"Charde","lastName":"England","company":"Vulputate Associates","address":"2803 Odio Street","country":"USA","city":"Racine","state":"WI","zip":"17971","phone":"(421) 324-5019","fax":"(559) 946-7839","email":"[email protected]"}
. . .
]}

Upvotes: 0

Views: 174

Answers (1)

Tony Tomov
Tony Tomov

Reputation: 3292

The names in colModel can't contain spaces. I think you have mixed the name and the label property in colModel to display headers of the table.

The wrong in your code is that the name property does not match the data from the response and second your name property contain space, which is not allowed. To work this your colModel should be:

colModel : [ 
    { name:'customerID', label:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
    { name:'company', label:'Company', index:'company', width:150, sortable:true},
    { name: 'firstName', label: 'First Name', index: 'firstName', length: 50, search: false},   
    { name:'lastName', label: 'Last Name', index: 'lastName', width: 80}, 
    { name: 'address', label: 'Address', index: 'address', width: 100, search: false}, 
    { name: 'city', label: 'City', index: 'city', width: 40, search: false}, 
    { name:'state', label: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} }, 
    { name:'zip', label: 'Zip', index: 'zip', width: 80}, 
    { name:'phone', label: 'Phone', index: 'phone', width: 80}, 
    { name: 'fax', label: 'Fax', index: 'fax', width: 80, search: false}, 
    { name: 'email', label: 'EMail', index: 'email', width: 80}
],

Upvotes: 1

Related Questions