Hello. I recently downloaded jqGrid and trying to get the basic example to work with an existing jQuery UI implimentation (custom theme rolled css).
jQuery(document).ready(function() {
console.log('loaded...');
jQuery("#list4").jqGrid({
id: 'poohandle',
url: 'inventory.php',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[ {name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false} ],
rowNum:10,
rowList:[10,20,30],
pager: '#pager4',
sortname: 'id',
viewrecords: true,
sortorder: "desc" //caption: "JSON Example"
});
});
My php file just ouputs static JSON (for testing). It appears that it's loading fine, aside from the styling looking like a yard sale, however it appears that a div (modal?) is all over the place and not allowing anything to be clicked.

When I load firebug to inspect the element, it tells me that this element is hoggingall my space:
<div id="lui_list4″ class="ui-widget-overlay jqgrid-overlay"></div>
Have I loaded something incorrectly? Seems like this could be common when mixing jquery-ui with the grid? So far, removing the classes from that div makes it go away but that's not very clean, obviously. All of my other jQuery-ui compontents look fine throughout my site so not sure what's up with this.