CODEWITHSUNDEEP
javascriptjqueryslickgrid
user2921504
user2921504

Reputation: 113

Slickgrid: Possible to scroll horizontally on grid while dragging column?

I'm working with Slickgrid to display a large data set which may be used with anywhere from a few to 50 columns. I need the ability for users to reorder the columns as they wish, which I am currently able to do but with some inconvenience. If I happen to be grabbing the very last column and moving it to the front of a grid with several horizontal window widths of columns, I have to drag/drop and manually scroll left before I get the column positioned where I want it.

Does anyone know if there's a way to force the grid to automatically scroll horizontally based on where I'm trying to drag a column (i.e. when I attempt to drag the column outside the current grid viewport)?

Upvotes: 1

Views: 2185

Answers (2)

user2921504
user2921504

Reputation: 113

I ended up solving this problem by creating a sortable list of the grid's column names outside of the grid. When the order of the column names changes, the columns displayed on the grid resets based on the new order by calling the function grid.setColumns().

Upvotes: 1

Gunjan
Gunjan

Reputation: 1244

Find mouse pointer position where you want to scroll and apply scrolling by this method...

$('#myGrid').mousemove(function(e){ //#myGrid is id of div of grid container
          var parentOffset = $(this).offset(); 
          diffX = ( ( parentOffset.left + $('#myGrid').width() ) - e.pageX);

          if (diffX < 59 && diffX > 17){ //change the minimum and maximum area where you want to scroll. mine requirement is 59 and 17. You can find your custom position by some alerting or console.log
              $('.slick-viewport ').scrollLeft($('.slick-viewport ').scrollLeft() + 5);
          }
  });

Upvotes: 1

Related Questions