Grid - Clicking on GroupingRow causes shift to left

5 posts, 0 answers
  1. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 20 Nov 2018 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 21 Nov 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 26 Nov 2018 in reply to Stefan Link to this post

    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!

  4. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 27 Nov 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 28 Nov 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top