slickgrid - autoscroll the viewport when selecting data

Question

I am using slickgrid for ability to enter data like excel style.

User will enter data. Then after selecting required data graph will generate.

Problem is , When selecting data with mouse, spreadsheet will not let you scroll with the mouse past AG cells or below the number 10 cell. Which means if there is large amount of data then selection will not remain user friendly.

I want auto scroll of spreadsheet when user want to select data beyond AG column and row10.

I want something like this

Answer 1

I have figured out this issue by finding mouse pointer position and applied scrolling at the positions where i wanted automatic scroll ...

$('#myGrid').mousemove(function(e){
      var parentOffset = $(this).offset(); 
      diffX = ( ( parentOffset.left + $('#myGrid').width() ) - e.pageX);
      diffY = ( ( parentOffset.top + $('#myGrid').width() ) - e.pageY);
      if (diffX < 59 && diffX > 17){
          $('.slick-viewport ').scrollLeft($('.slick-viewport ').scrollLeft() + 5);
      }

      if (diffY < 389 && diffY > 366){
          $('.slick-viewport ').scrollTop($('.slick-viewport').scrollTop() + 5);
      }

    });

Answer 2

Add this CSS to your page

.slick-viewport { overflow-x: auto !important; overflow-y: auto !important; }