jQuery Grid Plugin - jqGrid

Hi,

Fairly new to jqGrid and consider my testing quite successful. I have 1 probelm that I've searched and changed most possible settings and still can't get the headers to allign with data.

Asp.net 3.5 MVC (VS 2008)

Entity Framework using Firebird database

Jquery: 1.4.2

JqueryUI: 1.8.rc3

jqgrid 3.6.4

GridDemo.Home.GridDemo = {

    setupGrid: function(grid, pager, search) {
   grid.jqGrid({
            datatype: 'json',
            mtype: 'GET',
            width:850,{or autowidth:true}
           
            shrinkToFit: false,
            colNames: ['Art ID', 'Title', 'Category','CatDesc', 'Date', 'Ref'],
            colModel: [
     { name: 'ARTICLE_ID', index: 'ARTICLE_ID', width: 150, search: true, editable: true, editoptions: { readonly: true, size: 10} },
     { name: 'ARTICLE_TITLE', index: 'ARTICLE_TITLE', width: 150, search: true, sortable: true, editable: true, edittype: 'text', editoptions: { size: 100, maxlength: 100} },
     { name: 'CATEGORY_ID', index: 'CATEGORY_ID', width: 150, hidden: false, editable: true, jsonmap: "CAT_DESC", edittype: 'select',
         editoptions: { value: calcMethodSelect(), editrules: { required: true },

             dataEvents: [{
                 type: 'change', fn: function(e) {
                     var thisval = $(e.target).val();
                     $("#targetsel").html(targetSelect(thisval))
                 } }]
             }
         },
   { name: 'CAT_DESC', index: 'CAT_DESC', search: false, editable: false, hidden:true},
   
      { name: 'DATE_ADD', index: 'DATE_ADD', width: 150, editable: true },
        { name: 'REF', index: 'REF', width: 150, editable: false, sortable: false }
            ],
            pager: pager,
            sortname: 'ARTICLE_ID',
            rowNum: 10,
            rowList: [10, 20, 50],
            sortorder: "asc",
            url: "GridDemoData",
            viewrecords: true,
            ondblClickRow: ShowArticleDetails,
            editurl: "GridSave",

            caption: 'Articles from 2008'
        }).navGrid("#pager", { edit: true, add: false, del: false, search: true },
        {
            modal: true,
            width: 450,
            height: 'auto',  
            reloadAfterSubmit: false, closeAfterEdit: true,
            closeAfterAdd: false,
            onInitializeForm: function(formid) {
                jQuery("#DATE_ADD", formid).datepicker({ showOn: 'focus' });
});
            }
        });

        search.filterGrid("#" + grid.attr("id"), {
            gridModel: false,
            filterModel: [{
                label: 'Search',
                name: 'search',
                stype: 'text'}]
            });
        }
    };

=====

Site.Master

   <link href="<%= Url.Content("../../css/ui-lightness/jquery-ui-1.8rc3.custom.css") %>" rel="stylesheet"   type="text/css" />
   <link href="<%= Url.Content("../../js/src/css/ui.jqgrid.css") %>" rel="stylesheet"   type="text/css"/>
   <link href="<%= Url.Content("../../js/src/css/jquery.searchFilter.css") %>" rel="stylesheet"   type="text/css" />

...

    <script src="../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
    <script src="<%= this.ResolveClientUrl("../../Scripts/jquery-ui-1.8rc3.custom.min.js") %>" type="text/javascript"></script>
    <script src="<%= this.ResolveClientUrl("../../js/i18n/grid.locale-en.js") %>" type="text/javascript"></script/-->
    <script src="../../js/src/grid.loader.js" type="text/javascript"></script>

Thanks,

John[Image Can Not Be Found]