剑道网格页脚/寻呼机在引导选项卡内损坏答案

【问题标题】：kendo grid footer/pager broken inside bootstrap tab剑道网格页脚/寻呼机在引导选项卡内损坏
【发布时间】：2013-09-17 19:30:21
【问题描述】：

我发现将剑道网格放置在当前不可见的引导选项卡中时会出现问题。 When the tab is made visible, the footer (pager) appears disconnected from the grid. 如果在显示选项卡后初始化网格，则一切正常。此外，如果数据源是从中读取（），一切看起来都很好（卡入到位）。这些都不是可取的（我可能希望在 dom 准备好时初始化，或者不希望在选择选项卡时阅读）。

我该如何解决这个问题？

我在下面回答我自己的问题，但对替代的、精致的或“更合适”的解决方案感兴趣。

【问题讨论】：

标签： twitter-bootstrap tabs grid kendo-ui

【解决方案1】：

假设这是http://www.kendoui.com/forums/kendo-ui-web/grid/grid-height-issues.aspx 此处列出的问题，则需要重新计算 k-grid-content div 的高度，但只需要重新计算一次（因为这似乎可以解决特定页面视图的问题）。

这段代码应该可以解决问题：

function recalculateGridSize(gridElement) {
    gridElement = $(gridElement);
    var contentHeight = $('.k-grid-content').height();
    var headerHeight = gridElement.find('.k-grid-header').height(),
        pagerHeight = gridElement.find('.k-grid-pager').height();
    contentHeight = contentHeight - (pagerHeight + headerHeight);
    gridElement.find('.k-grid-content').css('height', contentHeight);
};

$('body').on('shown.bs.tab', function(e) {
    var currentTabHref = $(e.target).attr('href');
    $($(e.target).attr('href')).find('.k-grid:not([data-recalculated])').each(function() {
        recalculateGridSize(this);
        $(this).attr('data-recalculated', 'true');
    });
});

希望这有帮助。

【讨论】：