kendo grid footer/пейджер сломанный внутри загрузочной вкладки

Question

Я обнаружил, что сетка kendo имеет проблему при размещении внутри вкладки начальной загрузки, которая в настоящее время не видна. Когда вкладка становится видимой, нижний колонтитул (пейджер) отображается отсоединенным от сетки. Если сетка инициализируется после отображения вкладки, все выглядит нормально. Кроме того, если источник данных считывается(), все выглядит нормально (привязывается к месту). Ни один из них не может быть желательным (я могу захотеть инициализировать на dom ready или не читать, когда выбрана вкладка).

Как я могу это решить?

Я отвечаю на свой вопрос ниже, но вас будут интересовать альтернативные, изысканные или «более правильные» решения.

Answer 1

Предполагая, что это проблема, указанная здесь http://www.kendoui.com/forums/kendo-ui-web/grid/grid-height-issues.aspx, высота div для k-grid-контента должна быть пересчитана, но только один раз (поскольку это, по-видимому, устраняет проблему для конкретного просмотра страницы).

Этот код должен решить вопрос:

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

Надеется, что это полезно.