【问题标题】:Grid data isn't align with Grid header when tabbing through header columns切换标题列时,网格数据与网格标题不对齐
【发布时间】:2017-03-01 17:47:47
【问题描述】:

当我在标题单元格中浏览我的 kendo-ui 网格时,我遇到了以下问题:只有标题列被滚动,而不是内容列。见:grid with wrong aligned columns

为了重现这个问题,我创建了一个 DOJO,请参阅:http://dojo.telerik.com/OFORe/2

任何想法,如何在选项卡时让内容与标题一起滚动?顺便说一句,当我使用水平滚动条并手动向右滚动时,列对齐正确。

谢谢, 比利娜

【问题讨论】:

    标签: kendo-ui kendo-grid


    【解决方案1】:

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

    启用滚动后,Grid 会呈现两个表格 - 一个用于标题区域,一个用于可滚动数据区域。 (http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling)

    为了实现两个单独的表格水平同步滚动,我为我的网格实现了这个事件处理程序(另见更新的 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 键时才执行注册。

    P。 S. 只执行一次滚动事件,在使用上述代码之前取消注册。

    【讨论】:

    • 如果您尝试使用左右按钮滚动或单击栏(检查您提供的示例),您的代码将不起作用。还有其他建议吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-20
    • 1970-01-01
    • 1970-01-01
    • 2018-04-22
    • 2014-04-05
    • 1970-01-01
    相关资源
    最近更新 更多