Binding and unbinding widgets

11 posts, 0 answers
  1. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post

    kendo.bind() binds the element and all child elements to the viewModel by calling bindElement.
    bindElement calls first unbindElement so that works fine if you call kendo.bind() multiple times, e.g. when you want to bind another model to your markup.
    But bindElement also creates widgets if an element has a data-role attribute.
    unbindElement on the otherhand does not destroy the element. So bindElement will again create the widget when you call kendo.bind() a second time. Should there not be a check if the widget is already created?

    So
    1) In the bindElement (or somewhere deeper) should bet checked if the widget is already created and if so do not create again
    2) Add a parameter to kendo.unbind() to optionally destroy the widgets.
            a) This would be a perfect oppertunity to destroy dom elements like the popup of a dropdownlist ( see http://www.kendoui.com/forums/ui/dropdownlist/how-to-clean-up-dropdownlist-lists.aspx#1991068)
            b) By making it optional you have the oppertinity to keep all your widgets and just only bind a new (view)model to your markup.

    Regards, Jaap
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Mar 2012 Link to this post

    Hello,

     Here is an excerpt from the initWidget method which is responsible for instantiating a widgets by role:

     result = $(element).data("kendo" + widget.fn.options.name);

     if (!result) {
         result = new widget(element, options);
     } else {
         result.setOptions(options);
     }

    This should avoid creating a widget if there is one already created. Could it be the problem reported in your other thread - that kendo.init also traverses the DOM tree?

    Regards,
    Atanas Korchev
    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. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post

    Ok, you are right.
    I concluded this because it called initWidget. But I didn't see that check at the end of the function.
    So issue 1 is not applicable.
    But issue 2 is still valid as a feature request, I think.

    Regards, Jaap
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Mar 2012 Link to this post

    Hello,

     This is indeed an option however it would cause problems in some cases. Imagine that the widget is initialized first and then kendo.bind is called. Destroying and recreating the widget in this case would be a performance hit.

     Another problem is that the Kendo widgets do not support destroying at the time being. You could cast your vote for this user voice item.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post

    Regarding this code in initWidget:

    result = $(element).data("kendo" + widget.fn.options.name);

    if (!result) {
       result = new widget(element, options);
    } else {
       result.setOptions(options);
    }

    If the widget exists it is not created, but it's options are still set.
    This should not be done, I think?
    At least it gives troubles with in my case width a tabstrip.
    I have this: <div data-role"tabstrip" data-animation='{"open":{"effects":"fadeIn"}}'/>
    At creation of the tabstrip that animation.open is extended with duration: 200 and show: true.
    But when a second time kendo.bind() is call the options on the tabstrip are set again, but the extension is not done.
    So when I select a tab the activateTab function is called, then the animation.open does not have the show:true field, so my tab content will disappear.

    So if after creation of a widget somehow the options are manupulated, that same manupulation should be done in the setOptions function.
    Or don't calll that setOptions method at all. It would overright changes the I perhaps made to the options after creation of the widget (or can I not change options after creation? Not sure about that).

    Of course in this case I can easily workaround it.

    Regards, Jaap
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Mar 2012 Link to this post

    Hello,

     I guess the setOptions method is misbehaving in this case. Could you provide more code so we can reproduce that and see what went wrong?

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post


    This is indeed an option however it would cause problems in some cases. Imagine that the widget is initialized first and then kendo.bind is called. Destroying and recreating the widget in this case would be a performance hit.

    Should indeed not be done automatically. You should explicititly opt-in for it when you call kendo.unbind(). In any other case, nothing should change regarding the current flow.

    I will vote for it and add this in a comment.

    Jaap
  9. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post

    Here you have the repro. It is based on the widgets.html from the Kendo examples.
    I have also added the original widgets.html so you can easily see my changes with a compare tool.

    I have added a button which does a second bind of the tabstrip.
    When after clicking that click on a tab then the tab content disappears. It appears that "display: none" is still in the style and that is caused by the fact that my animation does not have a "show: true" field, which is added by the tabstrip when it is intially created.

    Regards, Jaap
  10. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 08 Mar 2012 Link to this post

    I found the problem with the tabstrip.
    Widget.init merges the options parameter with the default options of a widget.
    that.options = extend(true, {}, that.options, options);

    In Widget.setOptions, this line is called:
    $.extend(this.options, options);

    that behaves differently. If I change that line in Widget.setOptions to:
    this.options = extend(true, {}, this.options, options);

    it works fine.
    I can imagine this can also effect other widgets.

    Regards, Jaap
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Mar 2012 Link to this post

    Hi,

     Thank you for the clarification. This will be fixed as well in the official release.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 26 Mar 2012 Link to this post

    I can confirm this is fixed in the release version.
    Thanks, Jaap
Back to Top
Kendo UI is VS 2017 Ready