CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvckendo-tabstrip
Akbari
Akbari

Reputation: 2409

Eager loading in Kendo Tabstrip

I'm using LoadContentFrom method of Kendo TabStrip, it allows tabstrip to load content from another action method.

The content will be loaded only when user clicks the link, tab, therefore it causes a short delay that I'd like to avoid. I wasn't able to find any method to enable eager loading for this control and load all the tabs at once. Any suggestion or workaround is welcome.

This is a sample tabstrip:

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Animation(false)
    .SelectedIndex(0)
            .Items(i =>
            {
                i.Add()
                    .Text("Action1")
                    .LoadContentFrom("Action1", "Controller");
                i.Add()
                    .Text("Action2")
                    .LoadContentFrom("Action2", "Controller");
                i.Add()
                    .Text("Action3")
                    .LoadContentFrom("Action3", "Controller");
            })
)

UPDATE

Thanks to @joaumg, this is the JS code that I'm using:

$('#tabstrip').data().kendoTabStrip.reload($('#tabstrip ul li'))

Reload method does the job and loads the tab, and $('#tabstrip ul li') selector return an array of all tabs.

Upvotes: 2

Views: 2795

Answers (1)

joaumg
joaumg

Reputation: 1248

There are 3 ways of doing it...

First, generating the HTML and calling $("#tabstrip").kendoTabStrip();

Second, generate a JSON, and pass it as dataSource

Both uses the client side and can be seen here: http://docs.telerik.com/kendo-ui/web/tabstrip/overview#initialize-the-tabstrip

A server side uses the TabStrip HtmlHelper, which doc's can be found here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/tabstrip/overview#tabstrip ( look at the .Items and .Content methods )

Upvotes: 2

Related Questions