Dynamic Allocation Of Vertical Scroll Space In JQGrid

 While using jQgrid, most of us have faced a situation when after displaying all the columns, there is an extra space for scrollbar at very end of the grid. The scrollbar helps us to scroll through records inside jQgrid, if it exceeds the page size.
But usually we don’t need to show the last allocated space (for scrollbar) if there’s no need. Lets have a situation where we need  to allocate and show the scrolling space in jqgrid dynamically. For example: If data entry are exceeding the view space of jqgrid then show scrolling space (showing scrollbar), otherwise no need to show extra space.

-Setting the scrollOffset : 0   //After setting this property in js, we can remove the scrollbar space. But when no. of row increases, vertical scroll will come. As scrolling space is removed explicitly(making to 0), it will take some space reducing the allocated view space width(data rows) for grid, which will result in displaying horizontal scrollbar.

Here both scroll bars are shown.

We are setting the width of jqGrid as per window size.

$(window).width() - (26 / 100) * $(window).width(); //this width comes roughly as 998.26 (in a resolution of 1366*768 )

But Grid Table width comes as 980. So there is an extra 18.26 value coming.. This is because of some scrolling and other css value set in Jqgrid plugin.

So try setting the grid width as equal to table by setting it explicitly in the loadComplete() event (jQgrid event, called when jQgrid loading completes).

   jQuery.fn.extend({
             loadComplete: function () {
$('#jqGridDemoId').setGridWidth($('#jqGridDemoId').width());
  //Here jqGridDemoId is the table id
             }
           });

Still the grid header will seem not to be in sync with data rows. So let’s add custom css for jQgrid Plugin also.

.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-btable  
  {
    table-layout:auto;
  }

The problem in this case is like suppose Table width is 950 and scrollbar added of 18px(default width) then it will reduce the entire grid width on next time load to 932px.And on subsequent grid load (data refresh) event it’ll reduce it further by same amount.

So finally try to set the grid width to total visible window width (assigned to outer div), instead of the table inside it like

$('#jqGridDemoId').setGridWidth($(window).width() - (26 / 100) * $(window).width());

It works fine. But when you’ll delete all the records in Grid, then that extra space will repopulate. To handle this situation, we need to add the following (in case of zero records)

$(".ui-jqgrid-htable").css('width', gridWidth);   // ui-jqgrid-htable -Css class added for Jqgrid                                                             header in that plugin css

Bote: This specific situation deals with Jqgrid having fixed width.