[Solved] 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 

[Jie]

Hi,

I am implementing a logic to use the `SelectDescriptor` to get the ID of the selected row. Then find the index 

const rowIndex = dataResult.data.findIndex((item) => item.ID === selectedId)

This works well when the grid is not grouped, but won't work if it is grouped. Because the dataResult.data has a nested data structure, not a simple array anymore.

Does KendoReact provide a utility function to find the index for grouped data?

 

Thanks,

Jie

[Vessy]

Hi, Jie,

When the Grid has grouping applied, `dataResult.data` returns an array of `GroupResult` objects from `@progress/kendo-data-query`. Each `GroupResult` has an `items` property that holds either the actual data rows or nested `GroupResult` objects (for multi-level grouping). A flat `Array.findIndex` on the top-level array will therefore not find rows that live inside those groups.

KendoReact does not currently expose a public utility function for flattening this grouped structure. A small recursive helper achieves the same result and works regardless of grouping depth, though:

import { GroupResult } from '@progress/kendo-data-query';

function flattenGroupedData(data: any[] | GroupResult[]): any[] {
  return data.reduce<any[]>((acc, item) => {
    if (item.items !== undefined) {
      // GroupResult — recurse into nested items
      return acc.concat(flattenGroupedData(item.items));
    }
    acc.push(item);
    return acc;
  }, []);
}

This helper can then be used in place of `dataResult.data` when looking up the row index:

const flatItems = flattenGroupedData(dataResult.data);
const rowIndex = flatItems.findIndex((item) => item.ID === selectedId);

[Jie]

Thanks a lot, that works in general. I needed to add two placeholder rows when flattening, one for the group header row, one for the footer row, also need to check whether the group is expanded or not.