KendoGrid在kendoTabStrip中不起作用

Question

我正在使用kendoTabStrip，如KendoUI Page所示。在我的情況下，在每個div我已經呈現局部視圖。在我的部分觀點中，我還有一些其他的意見kendoGrid。

問題

當我重新加載頁面的任何選項卡，然後轉至包含kendoGrid選項卡，然後它不能正常工作。 例如：我在選項卡＃0上並轉到包含kendoGrid分頁的選項卡3，然後不顯示分頁。但是當我重新加載它時，分頁工作正常。

我能做些什麼來我Grids作品TabStrip？

任何幫助，將不勝感激。

UPDATE

我的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)); 

實現，因此我需要它從控制器使某些重寫。

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計算隱藏元素的寬度錯誤。

Answer 2

我把一個在TabStrip內工作的網格的例子放在一起：http://jsfiddle.net/dpeaep/SJ85S/。也許，我錯過了你在問題中提出的部分內容。如果是這樣，你可以修改jsfiddle來澄清問題所在。

HTML

<div id="tabstrip"> 
    <ul> 
    <li>Grid 1</li> 
    <li>Grid 2</li> 
    <li>Grid 3</li> 
    </ul> 
    <div><div id="grid1"></div></div> 
    <div><div id="grid2"></div></div> 
    <div><div id="grid3"></div></div> 
</div> 

的Javascript

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 
tabstrip.select(0); 

$("#grid1").kendoGrid({ 
    columns: [ 
    { field: "FirstName", title: "First Name" }, 
    { field: "LastName", title: "Last Name" } 
    ], 
    dataSource: { 
    data: [ 
     { FirstName: "Joe", LastName: "Smith" }, 
     { FirstName: "Jane", LastName: "Smith" } 
    ] 
    } 
}); 

$("#grid2").kendoGrid({ 
    columns: [ 
    { field: "FirstName", title: "First Name" }, 
    { field: "LastName", title: "Last Name" } 
    ], 
    dataSource: { 
    data: [ 
     { FirstName: "Betty", LastName: "Lakna" }, 
     { FirstName: "Fumitaka", LastName: "Yamamoto" }, 
     { FirstName: "Fred", LastName: "Stevenson" } 
    ] 
    } 
}); 

$("#grid3").kendoGrid({ 
    columns: [ 
    { field: "Title", title: "Title" }, 
    { field: "Year", title: "Year" } 
    ], 
    dataSource: { 
    data: [ 
     { Title: "Lost in Domtar", Year: "2012" }, 
     { Title: "Evergreen", Year: "2012" }, 
     { Title: "Fields of Yellow", Year: "2010" }, 
     { Title: "Where the Whistle Blows", Year: "2008" } 
    ] 
    } 
});