TabStrip post-select event?

8 posts, 0 answers
  1. Brad
    Brad avatar
    4 posts
    Member since:
    Mar 2009

    Posted 21 Dec 2011 Link to this post

    I need to know AFTER a tab has been selected, not before..
    Is there an easy mechanism for doing so?

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    22 posts
    Member since:
    Jun 2011

    Posted 19 Nov 2012 Link to this post

    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.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Nov 2012 Link to this post

    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!
  6. Chris
    Chris avatar
    22 posts
    Member since:
    Jun 2011

    Posted 20 Nov 2012 Link to this post

    Fantastic thank you!
    I would mark that the answer if it let me but its not my thread  :)
  7. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 09 Jan 2013 Link to this post

    Thank you! I found this thread very useful. I will be utilizing this 'Activated' event much more than the 'Select' event, I believe.
  8. Paul
    Paul avatar
    1 posts
    Member since:
    Jul 2011

    Posted 13 Jan 2014 Link to this post

    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
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready