Unable to use kendo.bind with mobile controls

Thread is closed for posting
12 posts, 0 answers
  1. Matt
    Matt avatar
    6 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    It appears as though attempting to use kendo.bind to bind elements to a kendo data source object does not work correctly with mobile controls. Specifically with list view, the mobile namespace is ignored which causes issues with the data source. I have noticed an extra namespace parameter in the bind function, but even if mobile namespace is passed as a parameter, the issue remains. I've also noticed that none of the mobile demos make use of the kendo data source object, rather they use the data source property of the control. Is this a limitation of the mobile controls or am I missing something? Thanks
  2. Matt
    Matt avatar
    6 posts
    Member since:
    Jun 2012

    Posted 08 Jun 2012 Link to this post

    I ended up making the following changes to the Kendo source to make this work. Again, I'm not sure how this is supposed to act, but this fixed my problem.

    kendo.initWidget was (line 2459):
    result = $(element).data("kendo" + widget.fn.options.name);

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

    Also, an update to bindingTargetForRole:

    Was:
    function bindingTargetForRole(role, element, namespace) {
        var type = namespace.roles[role];
     
        if (type) {
            return new WidgetBindingTarget(kendo.initWidget(element, type.options, namespace));
        }
    }

    Changed to: 
    function bindingTargetForRole(role, element, namespace) {
        if ($.isArray(namespace)) {
            for (index = 0; index < namespace.length; index++) {
                var target = bindingTargetForRole(role, element,
                    namespace[index]);
                if (target)
                    break;
            }
            return (target);
        }
        var type = namespace.roles[role];
     
        if (type) {
            return new WidgetBindingTarget(kendo.initWidget(element, type.options, namespace));
        }
    }

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2012 Link to this post

    Hi Matthew,

    Indeed this scenario possible, what you need to do is to specify the mobile name space, else the bind method is using the default one (kendo.ui).
    kendo.bind($("body"), viewModel, kendo.mobile.ui);

    In this fiddle you can see the approach in action. I hope this helps.

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

    Posted 12 Jun 2012 Link to this post

    I'm sorry, I did a terrible job of explaining this.

    I have a view that is using both a list view (data-role="listview") and a drop down list (data-role="dropdownlist") and each element in the view is taking advantage of the data- style binding (data-text-field, data-value-field, etc..). The problem I have is that the controls are in different namespaces: listview is in kendo.mobile.ui while dropdownlist is in kendo.ui.

    With the current kendo.all.js, I cannot use controls from multiple namespaces (if the control isn't found, kittens die), but with the changes that I posted above, I am able to pass an array of namespaces that are prioritized.

    Hopefully this helps. Again, sorry for the confusion.

    Thanks
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Jun 2012 Link to this post

    Hello Matthew,

    Thank you for the clarification.
    I am glad to inform you that the functionality you are looking for will be supported out of the box in the next official release.

    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. James
    James avatar
    5 posts
    Member since:
    Jan 2012

    Posted 21 Jul 2012 Link to this post

    Hello.  I work with Matt Hernandez.

    This issue still is not fixed in the Q2 release of Kendo Complete (kendoui.complete.2012.2.710.commercial.zip).


    The documentation for the kendo.bind() function lists the parameters as:

    element String|jQuery|Node
    The root element(s) from which the binding starts. Can be a valid jQuery string selector, a DOM element or a jQuery object. All child elements are traversed.

    viewModel Object|kendo.data.ObservableObject
    The View-Model which the elements are bound to. Wraped as an instance of kendo.data.ObservableObject if not already.
    namespace Object
    Optional namespace(s) too look in when instantiating Kendo UI widgets. The valid namespaces are kendo.ui, kendo.dataviz.ui and kendo.mobile.ui. The default order is kendo.ui, kendo.dataviz.ui.

    The word "namespace(s)" infers that I can pass in more than one namespace, but looking at the code it appears than this parameter can only be a single namespace object.

    As a result of this, it is not possible to use widgets from both the kendo.mobile.ui and kendo.ui namespaces.  If I pass kendo.mobile.ui as the namespace parameter of the kendo.bind() function, then kendo.bind() will throw an exception if I try to use a DropDownList (data-role="dropdownlist") in my HTML.

    What am I missing here?

    James Shrider
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 Jul 2012 Link to this post

    Hi James,

    I can confirm that kendo.bind method accepts only one namespace - the documentation is incorrect and will be fixed in a short period of time.

    In order to build widgets from both mobile and web suite via data attributes you have to bind them separately. Thus way the double initialization which causes an errors will be avoided.
    kendo.bind($("#listview"), viewModel, kendo.mobile.ui);
    kendo.bind($("#dropdown"), viewModel, kendo.ui);

    You can see the aforementioned approach in action in this fiddle.
    I hope this helps.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. James
    James avatar
    5 posts
    Member since:
    Jan 2012

    Posted 26 Jul 2012 Link to this post

    I'm afraid calling kendo.bind() multiple times for individual Widgets is not an option.  We have created an MVVM framework.  There is only a single place in our code that calls kendo.bind(), and it has no internal knowledge of the HTML that is is being bound.  Your solution would require the JavaScript to know specific details about the HTML, which would result in a maintenance nightmare.

    As stated earlier in this thread by my colleague Matt, we have a working solution:


    kendo.initWidget was (line 2459):
    result = $(element).data("kendo" + widget.fn.options.name);

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

    Also, an update to bindingTargetForRole:

    Was:
    function bindingTargetForRole(role, element, namespace) {
        var type = namespace.roles[role];
     
        if (type) {
            return new WidgetBindingTarget(kendo.initWidget(element, type.options, namespace));
        }
    }

    Changed to: 
    function bindingTargetForRole(role, element, namespace) {
        if ($.isArray(namespace)) {
            for (index = 0; index < namespace.length; index++) {
                var target = bindingTargetForRole(role, element,
                    namespace[index]);
                if (target)
                    break;
            }
            return (target);
        }
        var type = namespace.roles[role];
     
        if (type) {
            return new WidgetBindingTarget(kendo.initWidget(element, type.options, namespace));
        }
    }


    Then, to bind, we use:
    kendo.bind(this.htmlInstance, this.viewModel, [ kendo.mobile.ui, kendo.ui] );

    Note that this change does not break existing code; you can pass either a single namespace object, or an array of namespace objects to kendo.bind().

    If you can suggest a cleaner way to do this, I'm willing to listen.  The only shortcoming to our solution that I see is that we have to keep patching your code every time you release a new version.  It would be nice if you would incorporate our fix into your codebase.

    Thanks.

    James Shrider
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Jul 2012 Link to this post

    Hi James,

    Indeed, this seems to be a shortcoming in our current implementation. We will consider handling this scenario in a more convenient way for our next release. Thanks for sharing your workaround. 

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. James
    James avatar
    5 posts
    Member since:
    Jan 2012

    Posted 30 Jul 2012 Link to this post

    Petyo,

    Thanks for your attention to this issue.  I look forward to seeing a solution in the next release.

    James
  12. James
    James avatar
    5 posts
    Member since:
    Jan 2012

    Posted 15 Sep 2012 Link to this post

    Post deleted by user.
  13. James
    James avatar
    5 posts
    Member since:
    Jan 2012

    Posted 15 Sep 2012 Link to this post

    The Q2 2012 SP1 (version 2012.2.913) - September 2012 release of Kendo Complete has fixed the issue, although the fix has not made it into the online documentation.

    After spending some more time stepping through the code, I figured out that the new version of kendo.bind() takes a variable number of arguments.

    To use Widgets from both Mobile and Web in the same HTML page, I had to use:

    kendo.bind(this.htmlInstance, this.viewModel, kendo.mobile.ui, kendo.ui);

    Thanks for the fix.

    James
Back to Top
Kendo UI is VS 2017 Ready