Question

I’m using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.

Problem

When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I’m on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.

What can I do to my Grids works inside TabStrip?

Any help would be appreciated.

UPDATE

My implementation of 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));

So I need it to make some rewrites from controller.

Answer 1

To fix this problem we must change :

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

for:

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

Event activate is ‘Triggered just after a tab is being made visible, but before the end of the animation’. So we must refresh our grids then becouse js counts widths of hidden elements wrong.