To demonstrate:
1. Open your simplest interactivity/selection demo, which is not grouped, in StackBlitz. See: https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/
2. Add the Grid's group prop. To demonstrate the bug nothing else needs changed
<Grid group={[]} ...
3. Run demo, scroll down and pick a row.
4. Observe the grid scrolls to the top and you cannot see your selected row unless you scroll back.
We use data grids with virtual scrolling for inline editing a large number of records. However, when we want to add a new row to the grid it automatically resets the scroll position and doesn't even fire onPageChange event so the records you see do not correspond to the scroll position.
Check the following example (scroll to bottom, click anywhere on the table - this will add a new row - and observe the described problem):
https://stackblitz.com/edit/react-52zzvz?file=app%2Fapp.tsx%3AL78
In our project we control column widths manually as we have complex logic on how wide each column should be, based on a number of external criteria. However, those widths are not fixed and might change during the lifetime of the data grid.
This was not causing any problems up to version 5.11.0 but after we upgraded the Kendo packages this controlled behavior of the column widths broke:
kendo-react-grid v5.11.0 example (working):
https://codesandbox.io/s/crazy-bird-ss7mgl?file=/app/main.tsx
kendo-react-grid latest example (broken):
https://codesandbox.io/s/dazzling-antonelli-wxsflj?file=/app/main.tsx
If we inspect the elements of the data grid, we can see that there is an inline style attribute on the header and body tables, setting the total width of those <table> elements to the sum of its columns. However, that value is not updating after the initial mount as it was prior to v5.12.0 which effectively makes the column widths uncontrollable.
The issue can be seen on your demo at https://www.telerik.com/kendo-react-ui/components/grid/
Steps:
1) Load the demo from https://www.telerik.com/kendo-react-ui/components/grid/
2) Click on (x) in customerID grouping
3) Look at the console and see the line with exception:
The problem is that `e.originalEvent.target` is an svg object and it's className property is an object, not a string. The object is `SVGAnimatedString {baseVal: '', animVal: ''}` and it doesn't have the method indexOf.
Please fix asap.
Hello,
Seems the link to the GridColumnMenu accessibility page from the DataGrid accessibility page is broken.
Our tools are also warning us about empty links, caused by the GridColumnMenu button. How would we solve these?
Thank you,
Kristiyan Dimitrov