Проблемы с Free JqGrid и использованием InlineNav, Frozen Columns и заголовков групп

Question

Я использую бесплатную JqGrid 4.15 и имею графические глюки с InlineNav, Frozen Columns и заголовками групп.

Первая проблема заключается в том, что столбцы накладываются друг на друга. Вторая проблема заключается в том, что в верхнем левом углу есть маленькие квадраты, которые просто остаются на том же месте при использовании горизонтальной полосы прокрутки. Я не уверен, как исправить эти проблемы.

Вот скрипта js, которая показывает, в чем проблемы https://jsfiddle.net/jaredml/r4bda5pL/18/

вот код также

$(function() {
  //debugger;
  $("#grid").jqGrid({
    url: "/Home/GetBidValues",
    datatype: 'json',
    mtype: 'Get',
    //table header name   
    colNames: ['Client Cost', 'ElementId', 'Note', 'Area', 'Element', 'Item', 'Qty', 'Description', 'Project Mgmt', 'Principle', //MGMT
      'Concept Art', '3D Modeling', 'Inhouse CAD', 'Tech/Cad', 'Jr. Engineering', 'Sr.Engineering', 'Eng. Sub', 'Comptr Mat.', 'Design Materials', //Design & Engineering
      'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead' //Construction

    ], //Othr Misc
    //colModel takes the data from controller and binds to grid   
    colModel: [{
        name: "Sum",
        // formatter: sumFmatter,
        editable: "hidden",
        frozen: true,
        width: 70,
        align: 'center'
      }, {
        key: true,
        hidden: true,
        name: 'ElementId',
        index: 'ElementId',
        frozen: true,
        editable: false
      }, {
        key: false,
        name: 'Note',
        index: 'Note',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'
      }, {
        key: false,
        name: 'Area',
        index: 'Area',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'
      }, {
        key: false,
        name: 'Element',
        index: 'Element',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'

      }, {

        //hidden: true,
        name: 'Item',
        index: 'Item',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'
      }, {
        key: false,
        name: 'Qty',
        index: 'QTY',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'
      }, {
        key: false,
        name: 'Description',
        index: 'Description',
        frozen: true,
        editable: true,
        width: 70,
        align: 'center'
      },
      //Fabrication

      { //MGMT
        key: false,
        name: 'FabMGMTProjMG',
        index: 'FabMGMTProjMG',
        editable: true,
        width: 70,
        align: 'center'
      }, {
        //key: true,
        //hidden: true,
        name: 'FabMGMTPrinc',
        index: 'FabMGMTPrinc',
        editable: true,
        width: 70,
        align: 'center'
      },

      { //Design & Engineering
        key: false,
        name: 'FabDAEConcArt',
        index: 'FabDAEConcArt',
        editable: true,
        width: 70
      }, {
        key: false,
        name: 'FabDAE3DMod',
        index: 'FabDAE3DMod',
        editable: true,
        width: 70
      }, {
        key: false,
        name: 'FabDAEInCad',
        index: 'FabDAEInCad',
        editable: true
      }, {
        //key: true,
        //hidden: true,
        name: 'FabDAETechCad',
        index: 'FabDAETechCad',
        editable: true
      }, {
        key: false,
        name: 'FabDAEJrEng',
        index: 'FabDAEJrEng',
        editable: true
      }, {
        key: false,
        name: 'FabDAESrEng',
        index: 'FabDAESrEng',
        editable: true
      }, {
        key: false,
        name: 'FabDAEEngSub',
        index: 'FabDAEEngSub',
        editable: true
      }, {
        // key: true,
        //hidden: true,
        name: 'FabDAECmptrMat',
        index: 'FabDAECmptrMat',
        editable: true
      }, {
        key: false,
        name: 'FabDAEDesMat',
        index: 'FabDAEDesMat',
        editable: true
      },

      { //Construction
        key: false,
        name: 'FabConCarpMat',
        index: 'FabConCarpMat',
        editable: true
      }, {
        key: false,
        name: 'FabConCarpLead',
        index: 'FabConCarpLead',
        editable: true
      }, {
        //key: true,
        //hidden: true,
        name: 'FabConMetMat',
        index: 'FabConMetMat',
        editable: true
      }, {
        key: false,
        name: 'FabConMetLead',
        index: 'FabConMetLead',
        editable: true
      }, {
        key: false,
        name: 'FabConElecMat',
        index: 'FabConElecMat',
        editable: true
      }, {
        key: false,
        name: 'FabConElecLead',
        index: 'FabConElecLead',
        editable: true
      }, {
        //key: true,
        //hidden: true,
        name: 'FabConMechMat',
        index: 'FabConMechMat',
        editable: true
      }, {
        key: false,
        name: 'FabConMechLead',
        index: 'FabConMechLead',
        editable: true
      }, {
        key: false,
        name: 'FabConCNCH20Mat',
        index: 'FabConCNCH20Mat',
        editable: true
      }, {
        key: false,
        name: 'FabConCNCH20Lead',
        index: 'FabConCNCH20Lead',
        editable: true
      }
    ],

    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30, 40],
    gridview: true,
    ignoreCase: true,
    rowNumbers: false,
    shrinkToFit: false,
    height: '100%',
    width: 1000,
    viewrecords: true,
    //footerrow: true,
    //userDataOnFooter: true,
    emptyrecords: 'No records to display',
    jsonReader: {
      root: "rows",
      page: "page",
      total: "total",
      records: "records",
      repeatitems: false,
      Id: "0"
    }

  });
  $('#grid').jqGrid('navGrid', '#pager', {
    edit: false,
    add: false,
    del: false,
    search: false,
    view: false
  });
  $("#grid").jqGrid('setFrozenColumns');
  $('#grid').jqGrid('inlineNav', '#pager', {


    edit: true,
    add: true,
    del: true,
    cancel: true,
    search: true,
    refresh: true,
    editparams: {
      keys: true
    }
  }, {
    // edit options  
    zIndex: 100,
    url: '/Home/EditBid',
    //closeOnEscape: true,
    //closeAfterEdit: true,
    recreateForm: true,
    afterComplete: function(response) {
      if (response.responseText) {
        alert(response.responseText);
      }
    }
  }, {
    // add options  
    zIndex: 100,
    url: "/Home/CreateBid",
    //closeOnEscape: true,
    //closeAfterAdd: true,
    afterComplete: function(response) {
      if (response.responseText) {
        alert(response.responseText);
      }
    }
  }, {
    // delete options  
    zIndex: 100,
    url: "/Home/DeleteBid",
    //closeOnEscape: true,
    //closeAfterDelete: true,
    recreateForm: true,
    msg: "Are you sure you want to delete this task?",
    afterComplete: function(response) {
      if (response.responseText) {
        alert(response.responseText);
      }
    }
  });






  //group headers
  $("#grid").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders: [{
      startColumnName: 'FabMGMTProjMG',
      numberOfColumns: 22,
      titleText: 'Fabrication'
    }]
  });

  $("#grid").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders: [{
        startColumnName: 'FabMGMTProjMG',
        numberOfColumns: 2,
        titleText: 'MGMT'
      },
      {
        startColumnName: 'FabDAEConcArt',
        numberOfColumns: 10,
        titleText: 'Design & Engineering'
      },
      {
        startColumnName: 'FabConCarpMat',
        numberOfColumns: 10,
        titleText: 'Construction'
      }

    ]
  });

  $("#grid").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,
    groupHeaders: [ //Fabrication
      //construction
      {
        startColumnName: 'FabConCarpMat',
        numberOfColumns: 2,
        titleText: 'Carpentry'
      },
      {
        startColumnName: 'FabConMetMat',
        numberOfColumns: 2,
        titleText: 'Metal'
      },
      {
        startColumnName: 'FabConElecMat',
        numberOfColumns: 2,
        titleText: 'Electrical'
      },
      {
        startColumnName: 'FabConMechMat',
        numberOfColumns: 2,
        titleText: 'Mech.'
      },
      {
        startColumnName: 'FabConCNCH20Mat',
        numberOfColumns: 2,
        titleText: 'CNC & H20 Jet'
      }
    ]
  });
  $("#grid_Sum,#grid_Note,#grid_Area,#grid_Element,#grid_Item,#grid_Qty,#grid_Description").attr("rowspan", "2");
  var $frozenHDiv = $("#grid").closest(".ui-jqgrid-view");
  $frozenHDiv.find(".frozen-div.ui-jqgrid-hdiv");

  // remove unneeded rowspan attribute
  $frozenHDiv.find("tr.ui-jqgrid-labels");
  $frozenHDiv.children("th");
  $frozenHDiv.removeAttr("rowspan");

  $frozenHDiv.find("tr.ui-jqgrid-labels").height(45);
  $frozenHDiv.find("tr.ui-search-toolbar").height(22);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.src.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>