Extending TabStrip and setting default option, animation: false

5 posts, 1 answers
  1. Ryan
    Ryan avatar
    16 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2012 Link to this post

    Hi, we have a subclass of TabStrip and would like to set its default animation property to false.  It seemed logical to simply override the options object with that setting -- but this causes an error as soon as you try to change tabs:

    http://jsfiddle.net/nwVtr/

    The error is because the TabStrip widget initializes the animation properties from the options parameter in the constructor before it has merged them with the default options of the widget.  This happens on line 33128 of kendo.web.js (v2012.2.710).

    that._animations(options);
    

    In _animations() there is a check for animations:false, where it creates an empty animations object that simply does a show/hide.  But since the widget is using the empty options parameters without merging them with the widget's default options, there is no animations:false and this default "no animations" object never gets created.

    So then, when the tab is clicked, in activateTab() the 'effects' property of the animation object is accessed, which causes the error because the default "false" animation object never got created (line 33979):

    if (kendo.size(animation.effects)) {
    

    It would seem to me that the options parameter should be merged with the default options before _animations() is called, so that the animations object gets set up properly.  Is this a Kendo bug, or am I approaching this the wrong way?  Thanks!

    ryan

    p.s. Note the commented section of my JSFiddle; this workaround solves the issue but is definitely not as clean as simply overriding the option, as we are attempting to do.  Alternatively, I could initialize the widget's default animation property to the object that gets set inside _animations(), but that is not ideal either because it depends on undocumented internals and not the published widget API.

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Aug 2012 Link to this post

    Hi Ryan,

    The problem is that you're not sending the child TabStrip options to the original TabStrip. the options parameter contains the options that were passed to the init call, like this:
    $('#tabs').kendoNoAnimateTabStrip({ animation: false });

    If you extend the options parameter with the object options, it will work:


    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. Ryan
    Ryan avatar
    16 posts
    Member since:
    Jun 2012

    Posted 22 Aug 2012 Link to this post

    Thank you for the response, Kamen.  Yes, we can pass the option as a parameter, or merge the options in our subclass when we call the parent's init() -- in fact we had been doing the former previously.  However, I thought one of the purposes of kendo.ui.Widget.init() was that the merging of parameter options with widget options happens automatically inside the Widget base class: line 2534 of kendo.web.js.

    that.options = extend(true, {}, that.options, options);
    

    In other words, shouldn't the call to _animations() on line 33128 be moved down after the call to the base Widget's init() (say, line 33139), so that the animation object gets configured after the base Widget class has performed this merge?  If I do this locally, everything works as expected and there is no need to merge the options in our code; and, looking at the code in _animations(), I can see no reason why it needs to be called before the base Widget's init().  I realize this is not a huge issue because we have a simple workaround, but I want to make sure I am understanding how the Kendo Widget life cycle is supposed to work.  Thanks again,

    ryan

    p.s. I think in your JSFiddle we would actually want the parameters to $.extend() switched around, otherwise the widget's default options will always overwrite the incoming parameter options.

    http://jsfiddle.net/nwVtr/3/light/
  4. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 27 Aug 2012 Link to this post

    Hello Ryan,

     
    After further investigation we decided to call _animation method after the Widget.fn.init. The change will be available in the next internal build of Kendo UI. I have updated your Telerik points because of the involvement.

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ryan
    Ryan avatar
    16 posts
    Member since:
    Jun 2012

    Posted 27 Aug 2012 Link to this post

    Awesome.. thank you!

    ryan
Back to Top