Unable to use kendo.bind with mobile controls

[Matt]

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

[Matt]

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));

    }

}

[Alexander Valchev]

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

[Matt]

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

[Alexander Valchev]

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

[James]

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

[Alexander Valchev]

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

[James]

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

[Petyo]

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

[James]

Petyo,

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

James

[James]

Post deleted by user.

[James]

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