Grid data isn't align with Grid header when ta

Question

when I tab through my kendo-ui grid in the header cells, I face the following issue: only the header columns are scrolled and not the content columns. See: grid with wrong aligned columns.

To reproduce this issue I created a DOJO, see: http://dojo.telerik.com/OFORe/2 .

Any ideas, how to get the content scroll with the header while tabbing? Btw when I use the horizontal scrollbar and scroll manually to the right, the columns are aligned correctly.

Thanks, bizlina

Answer 1

the problem is, that kendo divides the kendo-grid into two separate tables once scrolling is enabled, as described in the kendo documentation:

When scrolling is enabled, the Grid renders two tables - one for the header area and one for the scrollable data area. (http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling)

To achieve the two separate tables scrolling synchronously horizontally I implemented this event handler for my grid (also see the updated DOJO: http://dojo.telerik.com/OFORe/3):

 $("#grid .k-grid-header-wrap").on('scroll', function () {
        $("#grid .k-grid-content").scrollLeft($("#grid .k-grid-header-wrap").scrollLeft());
 });

With this hack the content is scrolled accordingly the header. Currently the scroll event is also called when you use the scrollbar on the bottom of the grid. To avoid that I wrapped the event in a keydown event which is registered on the input fields in the header of the grid. With a check for the correct keyCode the registration is only performed when the tab key is pressed.

P. S. to execute the scroll event only once, deregister it before using the above code.