Jquery – Horizontal scroll bar in jqgrid when needed

cssjqgridjquery

I have a jqgrid where there are 19 columns, I want to display full column headers and have a horizontal scroll bar (only when the the header columns exceed the mainWidth)

This is how I get my grids, but as you can see in Database Version panel all the 5 header columns are visible i want similar thing in Database Release panel but in this case as it will increase the width of the container so a horizontal scroll bar should appear displaying all the columns

enter image description here

Below is my code for the jqgrid

    var mainWidth=jQuery('#detailTable').width();

    panels+='<div title="Database Release" class="class">'+
                '<div class="jqUIDiv" style="width:'+mainWidth+'px; overflow-x:auto;">'+
                    '<table id="tblOrsDatabaseRelease" width="100%"></table>'+
                    '<div id="OrsDatabaseReleaseGridpager"></div>'+
                '</div>'+
            '</div>';

    $('#detailTable').empty();
    $('<div>')
    .html('<div class="titleBlue">ORS Information</div>'+panels)
    .appendTo('#detailTable').delay(10).queue(function(){
        $('.class').jPanel({
            'effect'    : 'fade',
            'speed'     : 'slow',
            'easing'    : 'swing'
        });
    });

I am using JPanel (collapsible panels) above

    //Master Database Release
    jQuery("#tblOrsDatabaseRelease").jqGrid({
        datatype: "clientSide",
        colNames:['Debug Ind','Debug File Path','Debug Level','Debug File Name','LOG_FILE_SIZE','LOG_FILE_NUMBER','TNS_NAME','CONNECTION_PORT','ORACLE_SID','DATABASE_HOST','SCHEMA_WRITE_LOCK_DISABLED_IND','COLUMN_LENGTH_IN_BYTES_IND','MTIP_REGENERATION_REQUIRED_IND','GLOBAL_NOLOGGING_IND','PRODUCTION_MODE_IND','LAST_CHANGE_DATE','API_BATCH_INTEROP_IND','ZDT_IND','WORKFLOW_ENGINE_NAME'],
        colModel:[
            {name:'debugInd',index:'debugInd', align:"left"},   
            {name:'debugFilePath',index:'debugFilePath', align:"left"},
            {name:'debugLevel',index:'debugLevel', align:"left"},
            {name:'debugFileName',index:'debugFileName', align:"left"},
            {name:'LOG_FILE_SIZE',index:'LOG_FILE_SIZE', align:"left"},
            {name:'LOG_FILE_NUMBER',index:'LOG_FILE_NUMBER', align:"left"},
            {name:'TNS_NAME',index:'TNS_NAME', align:"left"},
            {name:'CONNECTION_PORT',index:'CONNECTION_PORT', align:"left"},
            {name:'ORACLE_SID',index:'ORACLE_SID', align:"left"},
            {name:'DATABASE_HOST',index:'DATABASE_HOST', align:"left"},
            {name:'SCHEMA_WRITE_LOCK_DISABLED_IND',index:'SCHEMA_WRITE_LOCK_DISABLED_IND', align:"left"},
            {name:'COLUMN_LENGTH_IN_BYTES_IND',index:'COLUMN_LENGTH_IN_BYTES_IND', align:"left"},
            {name:'MTIP_REGENERATION_REQUIRED_IND',index:'MTIP_REGENERATION_REQUIRED_IND', align:"left"},
            {name:'GLOBAL_NOLOGGING_IND',index:'GLOBAL_NOLOGGING_IND', align:"left"},
            {name:'PRODUCTION_MODE_IND',index:'PRODUCTION_MODE_IND', align:"left"},
            {name:'LAST_CHANGE_DATE',index:'LAST_CHANGE_DATE', align:"left"},
            {name:'API_BATCH_INTEROP_IND',index:'API_BATCH_INTEROP_IND', align:"left"},
            {name:'ZDT_IND',index:'ZDT_IND', align:"left"},
            {name:'WORKFLOW_ENGINE_NAME',index:'WORKFLOW_ENGINE_NAME', align:"left"}
        ],
        pagination:true,
        pager : '#OrsDatabaseReleaseGridpager',
        rowNum:10,
        rowList:[10,50,100],
        scrollOffset:0,
        height: 'auto',
        autowidth:true,
        viewrecords: true,
        gridview: true,
        edit:false,
        add:false,
        del:false,
        loadComplete: function() {
            var gr = jQuery('#tblOrsDatabaseRelease');
            fixGridWidth(gr);
        }
    });
    for(var i=0;i<orsDbRelease.length;i++)
        jQuery("#tblOrsDatabaseRelease").jqGrid('addRowData',i+1,orsDbRelease[i]);
    jQuery("#tblOrsDatabaseRelease").setGridParam({rowNum:10}).trigger("reloadGrid

I used Oleg's answer to get the below function

    var fixGridWidth = function (grid) {
        var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
        var mainWidth = jQuery('#detailTable').width();
        var gridScrollWidth = grid[0].scrollWidth;
        var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
        var scrollWidth = gridScrollWidth;
        if (htable.length > 0) {
            var hdivScrollWidth = htable[0].scrollWidth;
            if ((gridScrollWidth < hdivScrollWidth))
                scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
        }
        if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
            var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;  // min (scrollWidth, mainWidth)
            // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
            if (newGridWidth != gviewScrollWidth)
                grid.jqGrid("setGridWidth", newGridWidth);
        }
    };

Best Answer

I suppose that the problem which you have exists because of misunderstanding of different parameters of jqGrid which defines column width. To tell the trust there are many scenarios of the width choosing and you are not the only person who don't full understand the possibilities of choosing width of grid and columns in jqGrid.

You wrote

I have a jqgrid where there are 19 columns, I want to display full column headers and have a horizontal scroll bar.

To implement the requirements you need do following

  • remove autowidth: true option of jqGrid.
  • add shrinkToFit: false option of jqGrid.
  • add width property in every column of colModel. If you don't specify any width value for the column the default value width: 150 You should choose the width which you really need to see. The width value will be not changed by jqGrid because you use shrinkToFit: false.
  • you should not use and value for width option of jqGrid. In the case the grid width will be the sum of the widths of all columns of the grid.
  • remove call of fixGridWidth from loadComplete. I suppose you will not need the function at all.

I don't use JPanel plugin and don't see any advantage of the plugin comparing to jQuery UI Accordion widget. Probably there are some issues specific for JPanel plugin. Nevertheless I suppose that you should remove width="100%" attribute from the <table> element which you will use as grid.

I can't test my suggestions in your environment, but I hope it is very close to what you need.

Some common remarks to your code:

  • there are no options pagination, edit, add or del in jqGrid. You should remove the parameters.
  • to fill the grid with data you should add data: orsDbRelease parameter to jqGrid and remove the usage of addRowData in the loop and reloadGrid after the loop. If you use data parameter the grid will be filled more quickly and will have already correct pagination.
  • the default value of the property align in items of the colModel is already 'left' (see the value in the column "Default" in the table from the page of documentation). So you can remove the property align:"left" from every column.
  • You should consider to include sorttype property for all non-text column in the grid. It will make the sort order of the corresponding column correctly. Probably the usage of different formatter properties can additionally improve the visibility of the grid. See the documentation for more details.
Related Topic