Kendo Tabstrip無法正確載入第一個標籤

Question

我目前正在使用Kendo的新Q3版本，並且遇到了Kendo tabstrip控件的問題。我有一個帶有11個選項卡的標籤頁，第三個標籤頁導航到不同的視圖。從這個視圖導航回（使用麪包屑或通過瀏覽器上的後退按鈕）時，我選擇第三個選項卡並刷新它的內容。但是，在反向頁面導航之後，當我點擊它時，第一個選項卡中的內容不會顯示;我看到的只是標籤中的灰色背景。當我檢查控制器時，我可以看到所有的控件都帶有正確的綁定信息。如果我在導航回頁面時選擇第一個選項卡，則所有內容都可以正確加載。

我不知道什麼是錯的或如何解決這個問題。任何幫助，將不勝感激謝謝！

- EDIT-- 下面是如何設置標籤條。

<div class="" id="tabstrip"> 
<ul> 
    <li class="k-state-active"> 
      <i class="green icon-info-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_juryMaster_lbl_CandidateInfo    
    </li> 
    <li>    
      <i class="green icon-info-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_juryMaster    
    </li> 
    <li>    
      <i class="green icon-question-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_eQuestion    
    </li> 
    <li> 
      <i class="green icon-bell bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Events    
    </li> 
    <li>    
      <i class="green icon-flag bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Flags    
    </li> 
    <li>    
      <i class="green icon-file bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_DM    
    </li> 
    <li> 
      <i class="green icon-calendar bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Scheduling 
    </li> 
    <li>    
      <i class="green icon-money bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Financials    
    </li> 
    <li>    
      <i class="green icon-exchange bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Merge    
    </li> 
    <li>    
      <i class="green icon-suitcase bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_NameHistory    
    </li> 
    <li>    
      <i class="green icon-list-ul bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_JudgesNotes    
    </li> 

</ul> 
<div><div id="candidateInfo"></div></div> 
<!--BEGIN juryMaster CONTENT--> 
<div id="juryMaster"> 
    @Html.Partial("~/Views/Person/Partial_JuryMaster.cshtml")   
</div> 
<!-- /juryMaster --> 

<!--BEGIN eQuestion CONTENT--> 
<div id="eQuestion"> 
    @Html.Partial("~/Views/Person/Partial_eQuestion.cshtml") 

</div> 
<!-- /eQuestion --> 

<!-- BEGIN Events CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Events.cshtml") 
</div> 
<!--/Events--> 

<!-- BEGIN Flags CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Flags.cshtml") 
</div> 
<!--/Flags--> 

<!-- BEGIN DM CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_DM.cshtml") 
</div> 
<!--/DM--> 

<!-- BEGIN Scheduling CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Scheduling.cshtml") 
</div> 
<!--/Scheduling--> 

<!-- BEGIN Financials CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Financials.cshtml") 
</div> 
<!--/Financials--> 

<!-- BEGIN MergeUnMerge CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_MergeUnMerge.cshtml") 
</div> 
<!--/MergeUnMerge--> 

<!-- BEGIN NameHistory CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_NameHistory.cshtml") 
</div> 
<!--/NameHistory--> 

<!-- BEGIN JudgesNotes CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_JudgesNotes.cshtml") 
</div> 
<!--/JudgesNotes--> 

和在腳本：

 $("#tabstrip").kendoTabStrip({ 
     select: onSelect, 
     effects: "expand:vertical", 
     activate: onActivate, 
     animation: false 
    }); 

select方法獲取第一選項卡和選擇/刷新它，並且激活方法只是涉及網格一個單獨的標籤上進行格式化。下面是在選擇了第一個選項卡

function loadJurorSummary(jurorID) { 
    $.ajax({ 
     url: '@Url.Content("~/Person/getPersonSummary")', 
     type: "GET", 
     data: { id: jurorID }, 
     success: function (data) { 
      $("#candidateInfo").html(data); 
     } 
    }); 
} 

一切正常，第一次加載和導航在同一頁上罰款被調用的方法。

Answer 1

從demo for ajax loaded content看來，你需要在你的網站內容的網址通過在標籤欄聲明數組：

$(document).ready(function() { 
    $("#tabstrip").kendoTabStrip({ 
     animation: { open: { effects: "fadeIn"} }, 
     contentUrls: [ 
        '../../content/web/tabstrip/ajax/ajaxContent1.html', 
        '../../content/web/tabstrip/ajax/ajaxContent2.html', 
        '../../content/web/tabstrip/ajax/ajaxContent3.html' 
       ] 
    }); 
}); 

當你去開發工具（假設你使用Chrome或IE）你看到控制檯中的任何腳本錯誤？