Search code examples
jqueryjqgridjquery-jscrollpane

JQGrid with JScrollpane: scroller jumps around

I am using a JQGrid which has a Jscrollpane inside it. The Grid has pagination to it.

When I select 10 or 20 records and after that I scroll down the grid, the scroller jumps to the top even if I scroll using the mousewheel plugin. It is always on top, it just won't come down.

If I use normal scroll bars, everything works fine. I have tried maintainPosition:true and false but even then, the scroller is always on top.

gridComplete: function(){
                var table_header = $('#gbox_list').find('.ui-jqgrid-hbox').css("position","relative");
            $('#gbox_list').find('.ui-jqgrid-bdiv').bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight){
          table_header.css('right', scrollPositionX);
         }).jScrollPane({
             showArrows: true, 
            autoReinitialise: true,            
        horizontalDragMaxWidth: 30,
        verticalDragMaxHeight: 30,  
        maintainPosition:false
      });
            },

Working model

Keep using the scrollbar and try selecting 5///10///20 records... You will notice the error.

Everytime the content gets changed, I need the scrollbar to be on the top as well as to the left when reinitialized.

Solution

  • I did 3 things to get this working.

    1. jScrollPane was not initializing from inside jqGrid's gridComplete function so I moved it to the end of the script.
    2. I then initialized jScrollPane against $('div.ui-jqgrid-bdiv').
    3. I commented out autoReinitialise: true.

    Put this at the end of your script and comment out the contents of gridComplete.

    $('div.ui-jqgrid-bdiv').jScrollPane({
  showArrows: true, 
  //autoReinitialise: true,            
  horizontalDragMaxWidth: 30,
  verticalDragMaxHeight: 30,     
  maintainPosition:false
});