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

Question

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":"Etiam@Integereu.org"},
    {"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":"sed.dolor.Fusce@risusDonec.ca"},
    {"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":"felis.Donec.tempor@sitamet.org"},
    {"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":"pretium@eu.org"}
. . .
]}

Answer 1

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}
],