JQGrid empty grid and no navigation or edit icons

For some reason, my grid is blank with no rows (not even an empty row), no navigation icons and no editing icons. I'm using a few add-in features such as an autocomplete field (inside the grid), and a font resizing script so my script is a bit long. The page is receiving the properly formatted response from my functions page and it seems to match my jsonReader settings but it's not populating the grid with it. Here is my JSON formatted response from the page:

{"page":"1",
"total":1,
"records":"4",
"rows":[{"DetailID":"1","Quantity":"2","TaskName":"Differencial With Housing","UnitPrice":"335.00","ExtendedPrice":"670.00"}, {"DetailID":"2","Quantity":"1","TaskName":"Left axel seal","UnitPrice":"15.00","ExtendedPrice":"15.00"},{"DetailID":"3","Quantity":"1","TaskName":"Upper and Lower Bearings","UnitPrice":"55.00","ExtendedPrice":"55.00"}, {"DetailID":"5","Quantity":"1","TaskName":"Fluids","UnitPrice":"45.00","ExtendedPrice":"45.00"}]}

And here is my grid script:

<script>    
    function autocomplete_element(value, options) {
      var $ac = $('<input type="text"/>');
      $ac.val(value);
      $ac.autocomplete({source: "autocomplete.php?method=fnAutocomplete"});
      return $ac;
    } 
    function autocomplete_value(elem, op, value) {
      if (op == "set") {
        $(elem).val(value);
      }
      return $(elem).val();
    }
        $(document).ready(function()
            {
                $('#filter').jqm();
                var selectedRow = 0;                
                $("#list").jqGrid(
                {
                    url:'managegrid.php',
                    datatype: 'json',
                    colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'],
                    colModel :[
                        {name:'DetailID', index:'DetailID', hidden:true, editable:false},
                        {name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true},
                        {name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}},
                        {name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},                           
                        {name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'},
                        {name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'}
                    ],
                    onSelectRow: function(id){
                      if(DetailID && DetailID!==mkinline){
                        jQuery('#list').saveRow(mkinline);
                        jQuery('#list').editRow(DetailID,true);
                        mkinline=DetailID;
                      }
                    },
                    pager: $('#pager'),
                    rowNum:20,
                    rowList:[],
                    pgbuttons: false,
                    pgtext: null,
                    sortorder: "asc",
                    sortname: "DetailID",
                    viewrecords: true,
                    imgpath: '/js/jquery/css/start/images',
                    caption: 'Project Details',
                    height:'auto',
                    width:823,
                    mtype:'GET',
                    recordtext:'',
                    pgtext:'',
                    editurl:"editgrid.php",
                    toolbar:[true,"bottom"],
                    loadComplete:function(){
                            var recorddata = $("#list").getUserData();
                            $("#t_list").html(recorddata.MSG);
                        },
                    jsonReader: {
                        page: "PAGE",
                        total: "TOTAL",
                        records:"RECORDS",
                        root: "ROWS",
                        userdata:"USERDATA"
                        }
                    }
                );
                $("#t_list").css("color","blue");
                jQuery("#list").jqGrid("inlineNav",'#pager',{edit:true,editicon: "ui-icon-pencil",add:true,addicon: "ui-icon-plus",search:false}, {}, {},
                {url:"delgridrow.php",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"})
                .navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)
                    {
                        resetForm();            
                        $("#list").setGridParam(
                            {
                                url:"managegrid.php",
                                page:1
                            }
                        ).trigger("reloadGrid");
                    }
                });         
            }       
        );
    function gridSearch()
    {
        var pid = $("#DetailID").val();
        var qty = $("#Quantity").val();
        var tn = $("#TaskName").val();
        var up = $("#UnitPrice").val();
        $("#list").setGridParam(
            {
                url:"managegrid.php?ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up,
                page:1
            }
            ).trigger("reloadGrid");
        $("#filter").jqmHide();
        return false
    }
    function commonSubmit(data,params)
    {
        var a = eval( "(" + data.responseText + ")" );
        $("#t_list").html(a.USERDATA.MSG);
        resetForm();
        return true;
    }   function resetForm()
    {
      window.location.reload(false);
    }
</script>

I've been trying to figure this one out all weekend and it's driving me crazy so any help would be appreciated.

You should add the line of code

jQuery("#list").jqGrid("navGrid", '#pager',
    {add: false, edit: false, del: false, search: false, refresh: false});

directly before calling of inlineNav.

UPDATED: Your code have many other problems too. For example, you should remove jsonReader option from your code, because it contains wrong values of properties (like root: "ROWS" instead of root: "rows", which is default and can be removed). You can consider to use jsonReader: { id: 'DetailID' } to use the value of DetailID as the rowid and to use DetailID instead of id during editing. I'd recommend you to define all variables before the usage (see mkinline and DetailID for example).