在标题列之间切换时，网格数据与Grid标题不对齐 [英] Grid data isn't align with Grid header when tabbing through header columns

问题描述

当我在标题单元格中浏览我的kendo-ui网格时，我面临以下问题:仅滚动标题列，而不滚动内容列.请参阅:网格具有错误的对齐列.

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.

要重现此问题，我创建了一个DOJO，请参见: http://dojo.telerik.com/OFORe/2 .

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.

谢谢， bizlina

Thanks, bizlina

推荐答案

问题是，一旦启用滚动，kendo将kendo-grid分为两个单独的表，如kendo文档中所述:

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

启用滚动后，网格将渲染两个表-一个用于标题区域，另一个用于可滚动数据区域. ( http://docs.telerik.com/kendo -ui/controls/data-management/grid/appearance#scrolling )

要实现两个单独的表水平同步滚动，我为我的网格实现了此事件处理程序(另请参见更新的DOJO:

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());
 });

使用此技巧，内容将相应地滚动到标题.当前，当您使用网格底部的滚动条时，也会调用滚动事件.为避免这种情况，我将事件包装在keydown事件中，该事件已在网格标题的输入字段中注册.通过检查正确的keyCode，仅在按下Tab键时才执行注册.

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.仅执行一次滚动事件，请在使用上述代码之前注销它.

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

这篇关于在标题列之间切换时，网格数据与Grid标题不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！