jQuery Grid Plugin - jqGrid

<div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>Mail Lists</span></a></li>
        <li><a href="#tab-2"><span>Subscribers</span></a></li>
        <li><a href="#tab-3"><span>Mail Queues</span></a></li>
    </ul>
    <div id="tab-1">
        {* mail lists *}
        <div id="mList">
          <table id="tbl_mailList" class="scroll"></table>
          <div id="pg_mailList" class = "scroll" style="text-align:right;"></div>
        </div>
        {* mail items *}
        <div id="mItems">
          <table id="tbl_mItemList" class="scroll"></table>
          <div id="pg_mItemList" class = "scroll" style="text-align:center;"></div>
        </div>
    </div>
    <div id="tab-2">
        {* all subscribers *}
        <div id="sList">
          <table id="tbl_subList" class="scroll"></table>
          <div id="pg_subList" class = "scroll" style="text-align:center;"></div>
        </div>
        {* subscrioptions for subscribers *}
        <div id="sItems">
          <table id="tbl_sItemList" class="scroll"></table>
          <div id="pg_sItemList" class = "scroll" style="text-align:center;"></div>
        </div>
    </div>
    <div id="tab-3">
        {* mail queues *}
        <div id="qList">
          <table id="tbl_qList" class="scroll"></table>
          <div id="pg_qList" class = "scroll" style="text-align:center;"></div>
        </div>
        {* subscribers on queue *}
        <div id="qItems">
          <table id="tbl_qItemList" class="scroll"></table>
          <div id="pg_qItemList" class = "scroll" style="text-align:center;"></div>
        </div>
    </div>
</div>

$.extend($.jgrid.defaults,{width:572,rowNum:10,rowList:[10,20,30],sortname:'id',sortorder:'desc',imgpath:'images',datatype:'json',mtype:'GET'});
$(document).ready(function() {
    $("#tabs").tabs();
    $("#tbl_mailList").jqGrid({
        url:'/zwmail/adminjson/viewmlist/',
        colNames:['#','Title','Description','Frequency'],
        colModel :[
          {name:'id', index:'id', width:30,sortable:false, hidden:true},
          {name:'title', index:'title', width:170, sortable:true, editable:true, edittype:'text', editrules:{required:true}},
          {name:'description', index:'description', width:300, sortable:false, editable:true, edittype:'text'},
          {name:'frequency', index:'frequency', width:80, sortable:false, editable:true, edittype:'select',editoptions:{value:freqOptions}}
        ],
        pager: 'pg_mailList',
        caption: 'Mail Lists',
        editurl:'someurl',
        height:260,
        onSelectRow: function(idList) {
            if(idList == null) {
                return;
            } else {
                jQuery("#tbl_mItemList").setGridParam({url:"/zwmail/adminjson/viewmitems/idList/" + idList,page:1})
                .trigger('reloadGrid');
                $('.HeaderButton', tbl_mItemList[0].cDiv).click();
            }
        }
    })
    .navGrid('#pg_mailList',
        {refresh: true, edit: true, add: true, del: false, search: true},
        {height:280,reloadAfterSubmit:false},
        {height:280,reloadAfterSubmit:false},
        {reloadAfterSubmit:false},
        {}
    );

    var tbl_mItemList = $("#tbl_mItemList").jqGrid({
        url:'/zwmail/adminjson/viewmitems/',
        colNames:['#','Title','Status','Send Date'],
        colModel :[
          {name:'id', index:'id', width:30,sortable:false, hidden:true},
          {name:'title', index:'title', width:150, sortable:true},
          {name:'sendSts', index:'sendSts', width:80, align:'center',sortable:true},
          {name:'sendDt', index:'sendDt', width:80, align:'center',sortable:true}
        ],
        pager: jQuery('#pg_mItemList'),
        caption: 'Mail Items',
        hiddengrid : true
    });
});

I've checked the css file (jquery-ui-1.7.1.custom.css) and added the contents of ui.jqgrid.css to it, including the jqm* declarations.

Everything else seems to work, just not the navigation bar.

Any help is appreciated. thanks.