Kendo Tabstrip Doesn't Load First Tab Properly

Question

I'm currently using the new Q3 release of Kendo and am having an issue with the Kendo tabstrip control. I have a tabstrip that has 11 tabs and the third tab navigates out of the page to a different view. From this view when I navigate back (either with breadcrumbs or through the back button on the browser), I select the third tab and refresh it's content. However, after this reverse page navigation the content in the first tab doesn't show when I click on it; all I see is a grey background in the tab. When I inspect the control I can see all of the controls there with the correctly bound information. If I select the first tab when I navigate back to the page everything gets loaded correctly.

I have no idea what is wrong or how to fix this issue. Any help would be appreciated thanks!

--EDIT-- Below is how the tabstrip is set up.

<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-->

and in the script:

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

The select method gets the first tab and selects/refreshes it, and the activate method just involves grid formatting on a separate tab. Below is the method being called when the first tab is selected

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

Everything works fine on first load and navigation on the same page.

Answer 1

From the demo for ajax loaded content it appears that you need to pass in your content urls as an array in the tabstrip declaration:

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

When you go to dev tools (assuming you're using Chrome or IE) do you see any script errors in the console?