calling select() during ajax content loading

[Troy]

I create a TabStrip something like this, where "#myStrip" is set up to have a bunch of tabs, all loaded with Ajax.  After it is initialized, I immediately call select() to set the default tab

var widget = $('#myStrip').kendoTabStrip({
      // contentUrls set up here, etc.

}).data('kendoTabStrip');

var retval = widget.select(3);    // async?
var selected = widget.select();

 

With the Ajax loading, I think the sequence is:

1. My code makes the widget.select(3) call
2. "select" event fires
3. tabstrip retrieves ajax content for tab index=3
4. the content is inserted, and a script in the content is executed, tries to do a select() on the tabbar
5. "contentLoad" event fires
6. "activate" event fires

My problem is that during (3), a script on the ajax-loaded content wants to check what tab is selected.  It does something like $('#myStrip').data('kendoTabStrip').select(), but the select() getter doesn't actually return anything (0-length jquery object).  My guess is that the initial select(...) setter in (2) hasn't actually finalized setting whatever internal variable it stores the current tab info in.  It only does that sometime between (4) and (5), and for anything that calls select() before that, like my ajax content initializing at (4), the widget doesn't return what will be the tab element shortly.

I tried using "activateTab()" instead to avoid triggering the "select" event, but select() still doesn't seem to return anything until after the contentLoad/activate events have fired.  I could probably have the ajax-content stash a function that does what I want, and have a contentLoad handler call that function so that select() would be valid by that point, but I'd like to avoid that if possible.  Do I have to assume that it is not legit to do select() during the content loading process, before it has finished and fired "contentLoad"?

I tried to modify the ajax demo as an example, but there wasn't an easy way to provide my own custom ajax tab content with a script that called select().

[Dimitar]

Hello Troy,

On the following Dojo example you will find a working implementation of the Kendo UI TabStrip, which loads each tab contents with Ajax through the contentUrls configuration option.

You will notice that the third tab is correctly selected after initialization. When using the select() method, you need to pass a zero based index as a parameter, which would specify the tab to be selected.If no parameter is provided, the method would return the currently selected tab, as specified in the documentation. In the current scenario the third tab is selected by the following code:

$("#tabstrip").data("kendoTabStrip").select(2);

I hope this would help you to resolve the issue.

Regards,
Dimitar
Progress Telerik

[Troy]

Sorry, I may have been unclear.  I'm trying to call the widget's select() method during the loading/execution of the tab.  So in the dojo demo, it would be as if the ajax-loaded content of that last "Chassis" tab had a <script> tag, which did something like this:

<script>

// this is content in the ajax-loaded  "Chassis" tab, running its own javascript when loaded by the tab widget, before contentLoad is fired

var currentTab = $("#tabstrip").data("kendoTabStrip").select();

// currentTab should have the tab that is currently loading, but doesn't, probably because the widget doesn't return the tab currently in the process of being selected until after it has fully loaded the content and about to fire off the "contentLoad" event.

<script>

 

I can see that not returning what is in the process of becoming the current tab, while it is still loading the content, might be either a side effect or a deliberate design choice - the tabstrip might not consider it to be "current" while that is being done.  At that point it is presumably still returning what was the current tab before the one currently loaded was chosen, and thus an empty selector the first time a tab is being selected.  Maybe having tab-content asking its tabstrip for information about the tab it is currently being loaded into is a bit of a sketchy use-case... :)

What I'll probably have to do is build some sort of mechanism that defers what I'm trying to do in that tab-content strip, and run it inside the tabstrip's "contentLoad" handler, when select() will have been updated to return the current tab info.

[Dimitar]

Hello Troy,

This behavior is expected because the template has to know when the loading of the tab has finished along with any animations. I can suggest two approaches to tackle this issue:

1) As you have correctly assumed, you can use the TabStrip's contentLoad event to implement your custom logic. By default you can access the loaded tab with e.item as shown in the following updated Dojo example. 

2) You can use the jQuery one() method to attach a handler to the event in the template as demonstrated below:

$("#tabstrip").data("kendoTabStrip").one("contentLoad", function(e) {
  e.sender.select(0);
})

I hope this helps.

Regards,
Dimitar
Progress Telerik