Bug when navigating in filter row using tab

[Salim]

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/

[Dimiter Topalov]

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