Eager loading in Kendo Tabstrip

Question

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.

score 2 · Answer 1 · answered Jan 11 '16 at 10:24

2

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 )

answered Jan 11 '16 at 10:24

joaumg

1,238
1
12
27

1

Thanks for your answer, but it's not what I asked about. I know how to initialize the tabstrip and my question contains the code as well, I'd like to load all of the ajax tabs at once, not on demand and after user's click. – Akbari Jan 12 '16 at 03:34
1

@Akbari, if you want to eager load the tabstrip, you need to fetch the content and then initialize it, this will obviously cause more content to be pushed to user's browser, now, if want an "fake eager loading" ( load first tab, defer other tabs ), that you can do with a little of javascript with something like `.reload` ( http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#methods-reload ) – joaumg Jan 12 '16 at 10:31

Eager loading in Kendo Tabstrip

1 Answers1