Question

The expand/collapse button does not work properly with jqGrid when using the re-sizable grid with mouse.

The jqGrid is wrapped by a dragable div that sets the width/height of the grid. When I collapse the Grid it continues to show the ‘resize’ div even though the grid itself is collapsed.

Anyone have suggestions for this issue? Even the jqGrid Demo has this issue. The issue only happens after you resize it once first. Then try to collapse the Grid.

http://trirand.com/blog/jqgrid/jqgrid.html

This demo is replicating my issue. I am using the exact same code. You will notice that the grid also looks rather ugly when dragging.

Answer 1

So whenever you add the ability to resize the jqgrid it actually wraps the grid inside of a grid that is generated after you resize your grid. Jqgrid appears to statically set values in inline css which causes some problems.

What I have done to fix this problem is look for the button that will trigger this event. In the case of jqgrid there is an tag with a class of ‘HeaderButton’ (it is the button in the upper right hand corner). So I used jQuery to target the ‘click’ event and then changed the height of the ‘resize’ wrapper div to ‘auto’.

So essentially I did this:

//This first line select an element with a class="HeaderButton"
$('.HeaderButton').click(function () {
//Find the ID of the div that jqgrid is creating and replace RESIZEGRIDID with appropriate name
      if ($('#RESIZEGRIDID "/>').attr('data-status') != 'hidden' || $('#RESIZEGRIDID ').attr('data-status') == undefined) {
      $('#RESIZEGRIDID "/>').attr('data-status', 'hidden');
      $('#RESIZEGRIDID "/>').css({ 'height': 'auto' });
      } else {
      $('#RESIZEGRIDID "/>').attr('data-status', 'active');
      $('#RESIZEGRIDID "/>').css({ 'height': 'auto' });
      }

Hopefully this help 😉