Header and data column not allign Grid 3.8.2

Question

i am using JQGRID version 3.8.2 in my MVC Project. my problem is jqgrid header and data column not align well image is attached below.

Code of jqgrid is given below. .cshtml code

 <div class="list-grid-section">
        <table id="grid" cellpadding="0" cellspacing="0"> </table>
        <div id="pager" style="text-align: center;"></div>
 </div>

Code of Java script file is given below.

$(function () {
 orgId = document.getElementById('Organization').value;
$("#grid").jqGrid({
    // Ajax related configurations
    url: jqDataUrl,
    datatype: "json",
    mtype: "GET",
    postData: { orgId: orgId},
    colNames: ['OID', 'Year Code','Year Desc','From Date','To Date','Organization',''],
    colModel: [ { name: 'Oid', index: 'Oid', sortable: false,hidden:true,
                        editable: true, editoptions: { dataInit: ShowHint }, align:'center',
                        description: 'OID'
                    },
                    { name: 'YearCode', index: 'YearCode', sortable: true,align:'right',
                        editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Year Code', searchoptions: { sopt: ['bw'] }
                    },
                    { name: 'FinYearDesc', index: 'FinYearDesc', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Fin Year Desc', searchoptions: { sopt: ['bw'] }
                    },

                        { name: 'FromDate', index: 'FromDate', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'From Date', searchoptions: { sopt: ['eq'] }
                    }, 
                     { name: 'ToDate', index: 'ToDate', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'To Date', searchoptions: { sopt: ['eq'] }
                    },     
                     { name: 'Organization', index: 'Organization', sortable: false,
                        hidden:true, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Organization'
                    },                        

                     { name: 'EditDelete', editable: false, description: '', align:'left' ,editoptions: { dataInit: ShowHint} ,sortable:false }

                  ],
                  gridComplete: function () {

                      $("#grid thead tr").children('th').first().css("width","24px");
                       $("#grid tbody tr").children('td').first().css("width","24px");

$("#grid tbody tr").children('td').eq(1).css("width","26px");
                var ids = $("#grid").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {

                 var   be = '<input  type="image"  src= '+btnEditImg+'    onclick="editForm(' + ids[i] + ');"/>';
                 // var  del = '<input  type="image"  src="/Content/images/trash-delete4.gif"   onclick=" return dialogOpen(' + ids[i] + ');"  />';
                    $("#grid").jqGrid('setRowData', ids[i], { EditDelete: be});                      
                };
                 jQuery(".ui-jqgrid-title").replaceWith('<div style="height: 17px;"><span></span></div>');
                      $("#grid").jqGrid("gridResize", { shrinkToFit: false });
            },

    // Grid total width and height
   autowidth:true, 
    shrinkToFit:false,
    height: "460",

    // Paging
    toppager: true,
    pager: $("#pager"),
    rowNum: 100,
    rowList: [100,200],
    viewrecords: true, // Specify if "total number of records" is displayed
    resizable: true,
    // Default sorting
    sortname: "Oid",
    sortorder: "asc",
    toppager: false,
    rownumbers: true,
           // Grid caption
    caption: " ",
    multiselect: true,
}).navGrid('#pager', { view: false, del: false, add: false, edit: false,search:true , searchtext: "Search" },
   {}, // default settings for edit
   {}, // default settings for add
   {}, // delete instead that del:false we need this
   {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
   {} /* view parameters*/
     );
$('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });

jQuery(".ui-jqgrid-title").replaceWith('<div style="height: 17px;"><span></span></div>');

});

Answer 1

I would strictly recommend you to use the current version of jqGrid instead of usage retro versions like 3.8.2 from the year 2010.

I suppose that the reason of your problem is the manual setting of width attributes inside of gridComplete.

All what you do in gridComplete makes rendering of the grid in many many times slowly. Every call of setRowData in the loop follows to repainting or at least to reflow of the most existing elements on the page. See the answer for details and the video for advanced information. I recommend you to use gridview: true option and don't use gridComplete at all (see the answer which explains disadvantages of gridComplete). You should use custom formatter or formatter: "actions" to implement the same what you do in gridComplete now. I would recommend you additionally to use column templates (see the answer) to reduce your code and to make it more easy to read and to maintain.