0

How can I get the header fixed in my jqGrid ?

As you can see in the images the scrollbar is next to the header and it scrolls with the data, the footer seelms fine.

!http://i57.tinypic.com/ilveq8.jpg

!http://i60.tinypic.com/2yx0l55.jpg

This is the javascript I use for the grid :

$('#list').jqGrid({
      url: url,
      datatype: 'json',
      colNames:colNames[lang],
      colModel:[ {name:'Image', index:'Image', width:50,formatter: imageFormatter, align: 'center', sortable:false, search:false},                     
                 {name:'ItemId', index:'ItemId', width:125, align: 'center'}, 
                 {name:'ItemName', index:'ItemName', width:445, align: 'left'},                     
                 {name:'UnitId', index:'UnitId', width:40, align: 'center', sortable:false, search:false},
                 {name:'MultipleQty', index:'MultipleQty', width:40, align: 'right', sortable:false, search:false},
                 {name:'SheetSeparator', index:'SheetSeparator', width:40,  align: 'right', sortable:false, search:false},
                 {name:'StandardPalletQuantity', index:'StandardPalletQuantity', width:40, align: 'right', sortable:false, search:false},
                 {name:'Quantity', index: 'Quantity', width:75,align:'center',editable:true,sortable:false,editrules:{number:true}, edittype:'text', editoptions:{size:5,maxlength:8}, search:false, classes:'quantityRed'},                    
                 {name:'Price', index:'Price', width:70, align: 'center', sortable:false, search:false},
                 {name:'Basket', index:'Basket', width:75, align: 'center', sortable:false, search:false},
//                 {name:'Info', index:'Info', width:50, align: 'center', sortable:false, search:false},
               ],              
      pager: '#pager',
//      toppager:true,
//      cloneToTop:true,  
      cellEdit: true,
      rowNum:25,
      rowList:[25,50,75],
      sortname: 'ItemId',
      viewrecords: true,
      caption: caption[lang],
      height:'500',
      cellsubmit: 'clientArray',     
      recreateFilter:true,
      afterInsertRow: function(rowid, aData) {      
        $('#list').setCell(rowid, 'Quantity', '', '', { 'title': quantityToolTip});
      },
      afterSaveCell : function(rowid,name,val,iRow,iCol) {
        var itemId = jQuery('#list').jqGrid('getCell',rowid, 'ItemId');
        var multipleQty = jQuery('#list').jqGrid('getCell',rowid, 'MultipleQty');
        //alert('Bestelling ' + val + ' stuks van ' + itemId + ' te bestellen per ' + multipleQty);
        validateQuantity(rowid, val, multipleQty);
      },   
      onCellSelect: function (rowid, iCol, cellContent, e) {          
        if (iCol === 7){
          $("#list").jqGrid('setCell', rowid, 'Basket', '<img src="/img/basket_off.gif">');
          $("#list").jqGrid('setCell', rowid, 'Quantity', '&nbsp;');
        }
        if (iCol === 9 && e.target.nodeName.toLowerCase() === "img" && cellContent.toLowerCase() === '<img src="/img/basket_on.gif">') {              
          add2Basket(rowid, e);
        }
        if (iCol === 10) {              
          showInfo(rowid);
        }        
      },
      loadComplete: function() {
        $("#list").jqGrid("setLabel","UnitId","",{"text-align":"left"});
      }
  });  

  $('#list').jqGrid('filterToolbar','{stringResult:false,defaultSearch:cn, searchOnEnter:true}');
  //$('#list').jqGrid('navGrid','#pager',{add:false,edit:false,del:false,cloneToTop:true});      
  $('#list').jqGrid('navGrid','#pager',{add:false,edit:false,del:false});      
  // reset url
  $('#list').setGridParam({url:url});
  // reset search parameters
  $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} });  
  $('#list').trigger('reloadGrid');
PhDJ
  • 173
  • 1
  • 4
  • 15
  • the problem should not exist in jqGrid. Do you made some "customization" of column headers? You should include more JavaScript code which shows what you do. – Oleg Feb 17 '15 at 12:14
  • Thanks for the quick response Oleg, added the code. – PhDJ Feb 18 '15 at 16:20
  • The code which you posted is not full. One can't use it to reproduce the problem because it contains a lot of undefined variables (`colNames`, `lang`, `quantityToolTip` and so on), functions (`imageFormatter`) and use some clear wrong code like `$('#list').jqGrid('filterToolbar','{stringResult:false,defaultSearch:cn, searchOnEnter:true}');` instead of `$('#list').jqGrid('filterToolbar', {stringResult:false,defaultSearch:"cn", searchOnEnter:true});`. The pictures looks like you miss jQuery UI CSS or have included some strange CSS rules, but you don't included any information about CSS. – Oleg Feb 19 '15 at 08:45
  • Which version of jqGrid you use? Which version of jQuery and jQuery UI? By the way the usage of `$('#list').setCell(rowid, 'Quantity', '', '', { 'title': quantityToolTip});` inside of `afterInsertRow` is **very ineffective**. One should remove `afterInsertRow` callback add `gridview: true` and to use `cellattr` in `Quantity` column like in [the answer](http://stackoverflow.com/a/7408355/315935). – Oleg Feb 19 '15 at 08:48

0 Answers0