How to Scroll Into View and Highlight Row in Grid

[Layla]

Hey Team!

We're looking to implement a scroll into view for our Kendo grid using Typescript. This example is similar to what we are looking to do when the grid first loads. https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/scroll-into-view 

Is it possible to change the background color of the row once it scrolls to the target row?

Thanks in advance!

[Vessy]

Hi, Layla,

The functionality demonstrated in the linked demo of the Grid is achieved with the `scrollIntoView` method which aims to scroll to the n-th child of an HTML container and cannot work with the dataItems bound to the Grid Row objects. If you implement a logic finding the index of the row containing the target data, though, you can execute the `scrollIntoView` logic from the linked demo once the Grid is loaded through the useEffect hook like follows:

• https://stackblitz.com/edit/react-tpwhyp4w-ne6wbegm?file=app%2Fapp.tsx 

  const [targetRowIndex, setTargetRowIndex] = React.useState(20);

  React.useEffect(() => {
    if (gridRef.current) {
      gridRef.current.scrollIntoView({ rowIndex: targetRowIndex });
    }
  });

I hope this helps.

Kind regards,
Vessy
Progress Telerik

[Layla]

Hi Vessy,

Thank you for your response. When I try to import GridHandle, I get an error:

Module '"@progress/kendo-react-grid"' has no exported member 'GridHandle'.ts(2305)

It looks like we are using "@progress/kendo-react-grid": "^5.16.1". Is the scroll into view functionality still possible with this older version? 

 

[Vessy]

Hi, Layla,

Yes, you should be able to use the scroll into view functionality in the used by you version as well. You can try removing the GridHandle import and replacing its usage with <any> (in case you are using Typescript):
https://stackblitz.com/edit/react-tpwhyp4w-dzpzevcz?file=package.json,app%2Fapp.tsx