Loading all Kendo UI TabStrip Tabs Simultaneously

You might have a web application that loads separate processes using a Kendo UI TabStrip and you want to make things load faster by preloading the background tabs alongside the first tab, well it’s not that straight forward as you need to iterate all tabs you have then reload them one by one.

Here is how to do it.

Lets say your view looks like this, where you have five tabs that loads different Actions from YourController.

@model YourProject.Web.Mvc.Controllers.ViewModels.YourController.YourViewModel

@(Html.Kendo().TabStrip()
.Name("myKendoTabs")
    .Items(t =>
        {
            t.Add().Text("Tab 1")
                .Selected(true)
                .ImageUrl("/Content/images/icons/yourIcon.png")
                .LoadContentFrom("YourAction1", "YourController", new { yourRouteValue1 = Model.YourRouteValue1 });
            t.Add().Text("Tab 2")
                .ImageUrl("/Content/images/icons/yourIcon.png")
                .LoadContentFrom("YourAction2", "YourController", new { yourRouteValue1 = Model.YourRouteValue2 });
            t.Add().Text("Tab 3")
                .ImageUrl("/Content/images/icons/yourIcon.png")
                .LoadContentFrom("YourAction3", "YourController", new { yourRouteValue1 = Model.YourRouteValue3 });
            t.Add().Text("Tab 4")
                .ImageUrl("/Content/images/icons/yourIcon.png")
                .LoadContentFrom("YourAction4", "YourController", new { yourRouteValue1 = Model.YourRouteValue4 });
            t.Add().Text("Tab 5")
                .ImageUrl("/Content/images/icons/yourIcon.png")
                .LoadContentFrom("YourAction5", "YourController", new { yourRouteValue1 = Model.YourRouteValue5 });
        }).Events(e => {
            e.ContentLoad("$.viewname.home.onContentLoad");
            e.Select("$.viewname.home.onSelect");
        })
)

Looks like a normal view isn’t it. If you run this normally now what happens is that Tab 1 will load when you go to this view, Tabs 2 to 5 will only load once you click them.  Now lets create a script that will load these tabs together with the first tab.

To load tab items all you need is to perform a reload on it by doing something like this

$('#myKendoTabs').data().kendoTabStrip.reload({yourItem});

Just replace {yourItem} with the tab you want to load, so what are those tabs? you don’t need the first one as it automatically load on the load of your view so you need the second to last.  To get that by using jQuery you do something like this.

var yourTab = $('#myKendoTabs .k-item:nth-child(2)');

you notice we hardcoded the number 2 on the nth-child, this designates which tab you want but take note the 5th tab is not called like this

var yourTab = $('#myKendoTabs .k-item:nth-child(5)');

It would not work as it is defined as last not 5, so you need to know what is your last item always.  So instead of the code above you have to do it something like this

var yourTab = $('#myKendoTabs .k-item:last');

If in case you need to find how to do the first one it is done like this

var yourTab = $('#myKendoTabs .k-item:first');

So bringing them together you need to loop through items 2 to 4 to load them, so it should look something like this.  Place them in the bottom of your view code, run and all tabs should all load at the same time.

<script>
    $(function () {
        for (var i = 2; i < 5; i++) {
            var nthItem = $('#myKendoTabs .k-item:nth-child(' + i + ')');
            $('#myKendoTabs').data().kendoTabStrip.reload(nthItem);
        }
        var lastItem = $('#myKendoTabs .k-item:last');
        $('#myKendoTabs').data().kendoTabStrip.reload(lastItem);
    });
</script>