Grid - Clicking on GroupingRow causes shift to left

[Christine]

Hi,

I tried several different ways to fix this, but I'm not having any luck. I have a grid with 20 columns. When I add my first grouping (which has a checkbox in the groupTemplateHeader), I have no problem clicking on the checkbox and having it check. If I do a subsequent grouping, when I click on the second grouping, it does not check the checkbox and shifts the grid to left. The second click actually checks the checkbox. I have tried to take out the horizontal scrollbar programmatically when grouping is applied and I have tried to make the table-layout fixed. However, nothing does the trick - it still shifts.

I am not having this issue with grids that have less columns and if I bring down the amount of columns in this grid, it's fine.

I have my code attached - please let me know if you have any questions about the components.

 

Thanks,

Chris

[Stefan]

Hello, Christine,

Thank you for the code.

I tried using the code relevant to this functionality, but the grouping and selecting was working:

https://stackblitz.com/edit/react-aswjjy?file=app/main.js

As the provided code is not runnable and over 1000+ lines, it is hard to determine only by looking at it why this occurs.

Is it possible to either modify the one I have sent or to make a new runnable one with this issue, so we can debug it in details and provide a suggestion best suited for it?

Regards,
Stefan
Progress Telerik

[Christine]

Hi Stefan,

Sorry it took a while to get back to you. I was trying to find what was different between your example and my code. I found out what the issue is. It's because I have navigatable set to true. If I turn that option of, I no longer get the issue. However, I have to have it set. Any ideas?

Thanks again!

[Stefan]

Hello, Christine,

Thank you for finding this difference.

Indeed adding the property to the example replicates the issue.

As it is a very specific one as it only occurs with multiple columns and the navigatable property, we will need some time to investigate it.

Once I have more details on this, I will let you know immediately.

Regards,
Stefan
Progress Telerik

[Stefan]

Hello, Christine,

Thank you for the patience.

This occurs because there is a logic that focuses the header rows on click when the Grid is navigatable. It occurs with many columns as when there are not many columns the row has enough space and it is not needed to be moved.

Currently, the only option is to disable this logic:

componentDidMount(){
  kendo.ui.Grid.fn._scrollCurrent = $.noop;
}

Please have in mind that this is directly accessing internal logic in the Grid, and should be used with caution. 

Regards,
Stefan
Progress Telerik