Grid with virtual scrolling broken in TabStrip

3 posts, 1 answers
  1. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 22 Apr 2016 Link to this post

    Hello Kendo team,

    I have a AngularJs Grid with scrollable set to { virtual: true } inside a TabStrip tab. This tab is not the selected tab, but the grid loaded in the background tab anyhow. When I switch to the tab containing grid, the scrolling is broken. If I hide (ng-if="false") the grid, and reload it again while I have this grid tab selected, the grid works fine. See plunk for demo of the problem.

    Instruction for reproduce:

    1. Select "Virtualized locked Grid" tab and try to scroll. Cannot, the scrolling is broken.

    2. Without leaving this tab, click on the "Hide / Show Grids" button to remove the grid, and click again to reload the grid. Try scrolling, the scrolling works!

    3. Select "Simply Locked Grid" tab and try to scroll. Scrolling works fine.

    4. Select "Simply Virtualized Grid" tab and try scroll. Cannot, scrolling is broken like the "Virtualized locked Grid" tab.

    5. Try step #2 on the "Simply Virtualized Grid" tab, and the scrolling works again. 

    It seems grid with scrollable set to { virtual: true }, with or without locked columns have scrolling problems when loaded inside a tab when the tab is not actively selected.

     

    Help! Will you guys fix this as a bug, or do you have any suggestions to combat this problem meanwhile? (I know I can refresh the widget on activation event, but that's hell of annoyance. The whole reason we ditched our self made tab directive was to avoid complicated refresh widget dance on tab selection. )

    Best,

    Ama

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Apr 2016 Link to this post

    Hi Ama,

    Please call the Grid's resize method with a true argument in the TabStrip's activate event.

    Here is some further reading:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#hidden-containers
     
    http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-activate

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 26 Apr 2016 in reply to Dimo Link to this post

    It's unfortunate to hear this. Hope this issue can be resolved in the future.
Back to Top