This is a migrated thread and some comments may be shown as answers.

TabStrip post-select event?

7 Answers 489 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 21 Dec 2011, 02:00 PM
I need to know AFTER a tab has been selected, not before..
Is there an easy mechanism for doing so?

7 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 22 Dec 2011, 10:39 AM
Hello Brad,

Unfortunately there's no easy way to trigger such an event. We are considering adding it in the future, meanwhile you can fire a setTimeout() in the select event with the animation duration (200ms by default until the content starts to show and 400 until it is shown completely).

Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 19 Nov 2012, 09:38 PM
I know this is an older post for this form, but just in case it is still monitored...
Did anyone come up with another solution for this, or has telerik provided a solution in the latest rev?

(I am trying to set focus to a particular input inside of a tab once it is selected).

Thank you.
0
Kamen Bundev
Telerik team
answered on 20 Nov 2012, 08:36 AM
Hello Chris,

Kendo UI TabStrip now features an activate event, which you can use to be notified when a tab is opened and focus your input.

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 20 Nov 2012, 06:58 PM
Fantastic thank you!
I would mark that the answer if it let me but its not my thread  :)
0
Lee
Top achievements
Rank 1
answered on 09 Jan 2013, 03:58 PM
Thank you! I found this thread very useful. I will be utilizing this 'Activated' event much more than the 'Select' event, I believe.
0
Paul
Top achievements
Rank 1
answered on 13 Jan 2014, 11:06 PM
UPDATE:  the problem does not appear to be a timing issues, but rather an issue that the .resize() methods on the Grid and the Splitter do not perform as expected in the scenario below.  My workaround is to use the TabStrip Activate event but call a .refresh() on the grids.  So far this seems to take care of the issue.  I am not delaying anything but just calling these directly (based on the selected Tab) in the activate event.

I am having an issue with the fact that the Activate Event on TabStrip fires prior to the animation being complete.  I have the animation set to false on the TabStrip options but here is the issue:

I have grids on each tab and the grids are configured to utilize a percentage height of their container.  This works fine while the tab is currently active and the grid widget is resized or a resize is triggered.  However, we use a background process to update these grids even when they are not being displayed.  When a grid is refreshed while the tab is not selected (the container is display:none) the grid resizes itself to a very small height, probably some fixed minimum cooked into Kendo.  So then when we select that tab the grid shows incorrectly in the space provided.  I should mention that the tab div itself contains a vertical splitter and I am actually talking about two grids on each tab.

So what we need to do is force a grid or splitter resize when the tab is activated, but although the code I assign to the event runs, it apparently runs before the "display: none" is removed so the grid still resizes to the default small height.  So what I really need is the ability to force a grid and/or splitter resize after the new tab is displaying.

I noticed in the prior post that you indicated this was something that was being considered and also that a workaround would be to set a delayed trigger for 400ms to allow the animation timer to complete, and I will try this, but I also wonder if there is a lower number that is applicable since we have animation disabled, or if this basically a trial and error crapshoot.  Regardless, it would be very good to have a post display event, like "activated" to be used for a case like this.

Any other suggestions would be highly appreciated.

Thanks,

Paul Anthoney
0
Dimo
Telerik team
answered on 14 Jan 2014, 03:17 PM
Hello Paul,

Indeed, the activate event is fired before the animation is complete, and this is by design. We will consider exposing one more event after the animation is complete, in case there is demand for it.

You can use the following approach in order to avoid hard-coding the timeout duration, when animation is enabled:

function onActivate(e) {
    var animation = e.sender.options.animation;
    var timeout = animation && animation.open.duration;
    window.setTimeout(function(){
        // animation is complete here
    }, timeout);
}

The above will work with disabled animation as well, although the setTimeout will not be required in that case.

Actually, when animation is disabled, the activate event is fired after the new tab container is already visible. Are you sure about the opposite? You can make the following test:

1. Go to http://demos.kendoui.com/web/tabstrip/events.html

2. Paste the following code in the browser Javascript console.

$("#tabstrip").data("kendoTabStrip").setOptions({animation:false});$("#tabstrip").data("kendoTabStrip").bind("activate", function(e){alert("The new tab container is " + ($(e.contentElement).is(":visible") ? "visible" : "not visible") + ". Its height is " + parseInt($(e.contentElement).height(), 10));});

3. Click on an inactive tab.


Another possible approach (instead of using expand animation with setTimeout) is to use fade animation without setTimeout:

http://jsfiddle.net/dimodi/2ARey/2/


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Brad
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Chris
Top achievements
Rank 1
Lee
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or