This is a migrated thread and some comments may be shown as answers.

Bug when navigating in filter row using tab

1 Answer 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Salim
Top achievements
Rank 1
Salim asked on 09 Mar 2017, 09:38 AM

We have a simple grid having a the filters in a row. When the grid has a horizontal scrollbar, and the user is navigating using tab across the filters, only the header scrolls and not the body. Check the attached gif and below is its source code (which is a straightforward demo on Telerik):

http://dojo.telerik.com/

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 09 Mar 2017, 03:40 PM
Hi Salim,

We are aware of this issue, but actually it turned out there is no straightforward browser- and system-agnostic way of handling it.

We were syncing the header and content containers scroll positions in the Grid internal logic, but this was causing bad user experience (very slow scrolling) in some scenarios, and thus we decided to decouple the header wrapper and content wrapper scroll events.

I can suggest the following workaround - handle the Grid header wrapper scroll event, and scroll the content in accordance with the current header scroll position, e.g.:

$('#grid .k-grid-header-wrap').scroll(function(){
        var scrollTo = $('#grid .k-grid-header-wrap').scrollLeft();
        $('#grid .k-grid-content').scrollLeft(scrollTo);
      });

I have prepared an example, illustrating the described approach:

http://dojo.telerik.com/AkaLux/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Salim
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or