asp.net-mvc-3 - KendoGrid 在 kendoTabStrip 中不起作用

Question

我正在使用kendoTabStrip，如KendoUI Page所示。就我而言，在每个 div 中我都渲染了部分 View 。在我的一些部分 View 中，我还添加了 kendoGrid。

问题

当我在任何选项卡中重新加载页面并转到包含 kendoGrid 的选项卡时，它无法正常工作。 例如:我在 tab#0 上，然后转到包含带有分页的 kendoGrid 的 tab#3，然后不显示分页。但是当我重新加载它时，分页工作正常。

我可以对 TabStrip 内的 Grids 作品做什么？

如有任何帮助，我们将不胜感激。

更新

我的tabstrip实现

    $("#tabStrip").kendoTabStrip({
        animation: { open: { effects: false} },
        select: function (e) {
            document.location.hash = 'tab-' + $(e.item).index();
        }
    });

    var tabStrip = $('#tabStrip').data('kendoTabStrip');
    var tabId = 0;
    var scheduledId = 0;
    if (document.location.hash.match(/tab-/) == 'tab-') {
        tabId = document.location.hash.substr(5);
    }
    if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
        tabId = 1;
        scheduledId = document.location.hash.substr(11);
        editSchedule('/admin/Course/Scheduled/' + scheduledId +  '/Edit/' );

    }
    tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));

所以我需要它从 Controller 进行一些重写。

Answer 1

要解决这个问题，我们必须改变:

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    }
});

对于:

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    },
    activate: function(e) {
        $(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
            $(this).data("kendoGrid").refresh();
        });                
    }
});

事件activate是“在选项卡变得可见之后、动画结束之前触发”。因此我们必须刷新网格，因为 js 计算隐藏元素的宽度是错误的。