jQuery Grid Plugin - jqGrid

I am trying to put a custom search form for the basic grid. Following the custom search documentation I added following lines to my already working basic grid

<div id="filter"></div>
<script  type="text/javascript">
jQuery("#filter").filterGrid("list",
  {
    gridModel:true,
    gridNames:true,
    formtype:"vertical",
    enableSearch:true,
    enableClear:false,
    autosearch: false,
  }
);

</script>

and I get a javascript error .navGrid is not a function on the previous line where on document ready I have this

 jQuery(document).ready(function(){
      jQuery('#list').jqGrid({
        url:'/data2.json',
        datatype: 'json',
        mtype: 'GET',
        height: '300px',
        postdData: {tpe:0,user_id:'123'},
        colNames:['Num#','Client Ref','Name','Name 2', 'Status','Balance'],
        colModel:[
          {name:'id',index:'id',width:80 },
       ---
          {name:'balance', index:'balance', width:100,align:"right" }
          ],
        pager: '#pager',
        emptyrecords: "Nothing to display",
        rowNum:20,
        rowList:[10,20,30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        viewsortcols : [true,'vertical',true],
        imgpath: '/themes/base/images',
        caption: 'Debtors'
      }).navGrid('#pager',{edit:false,add:false,del:false});
    });
I am not much familiar with new javascript syntax. Please check what I am doing wrong?

Thanks

Sue