Put the scroll position at the desired slick grid position

Question

If you press the button in the middle of slickgrid in the project I'm currently working on, a pop-up window to save the contents appears. If you save the contents in the pop-up window, the scrolling does not stay in the part you were working on, but you have to go back to the top and scroll down again. Do you have any idea how to make the scroll stay where you were working? Now, I tried to take the row value in scrollRowIntoView(), but in my project, when the row values ​​are mixed with sortUtil, the work with sortUtil is solved, so I want to know a method other than how to move the scroll based on the row.

Answer 1

In the future, you should try to add the code that you tried to your question so that anyone could help you, without any code most people won't answer you.

To provide some guidance and a possible answer, in 1 of our project I wanted to refresh the grid without losing the scroll position (which do get lost after refreshing the grid) for both the grid and the browser, so the best way to handle that is to save the scroll position before doing the save/refresh and then re-apply the scroll position after the grid refresh

Here's some piece of code

const gridId = 'myGrid';
const data = [ /*...*/ ];
const columnDefs = [ /*...*/ ];
const gridOptions = { /*...*/ };
const grid = new Slick.Grid(gridId, data, columnDefs, gridOptions);

// before save/refresh
const prevScrollPositions = getScrollPositions();

// after save/refresh
reApplyScrollPosition(prevScrollPositions);

function getScrollPositions() {
  const gridViewportElm = document.querySelector(gridId)?.querySelector('.slick-viewport');
  let viewportScrollTopPosition = 0;
  if (gridViewportElm) {
    viewportScrollTopPosition = gridViewportElm.scrollTop;
  }
  return { gridScrollY: viewportScrollTopPosition, browserScrollX: window?.pageXOffset ?? 0, browserScrollY: window?.pageYOffset ?? 0 };
}

// put back the Grid & Browser scroll top position (Y coordinate) after the grid refresh is done
// browser reposition seems to requires a small delay to work properly
function reApplyScrollPosition(scrollPositions) {
  grid.scrollTo(scrollPositions.gridScrollY || 0);
  setTimeout(() => window.scrollTo(scrollPositions.browserScrollX || 0, scrollPositions.browserScrollY || 0), 0);
}