This is a migrated thread and some comments may be shown as answers.

Unable to use kendo.bind with mobile controls

11 Answers 220 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Matt
Top achievements
Rank 2
Matt asked on 07 Jun 2012, 11:35 PM
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

11 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 2
answered on 08 Jun 2012, 06:48 PM
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));
    }
}

0
Alexander Valchev
Telerik team
answered on 12 Jun 2012, 02:58 PM
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!
0
Matt
Top achievements
Rank 2
answered on 12 Jun 2012, 06:47 PM
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
0
Alexander Valchev
Telerik team
answered on 15 Jun 2012, 11:26 AM
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!
0
James
Top achievements
Rank 1
answered on 21 Jul 2012, 02:44 PM
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
0
Alexander Valchev
Telerik team
answered on 26 Jul 2012, 08:21 AM
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!
0
James
Top achievements
Rank 1
answered on 26 Jul 2012, 09:30 AM
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
0
Petyo
Telerik team
answered on 30 Jul 2012, 09:10 AM
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!
0
James
Top achievements
Rank 1
answered on 30 Jul 2012, 09:37 AM
Petyo,

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

James
0
James
Top achievements
Rank 1
answered on 15 Sep 2012, 06:50 PM
Post deleted by user.
0
James
Top achievements
Rank 1
answered on 15 Sep 2012, 07:17 PM
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
Tags
MVVM
Asked by
Matt
Top achievements
Rank 2
Answers by
Matt
Top achievements
Rank 2
Alexander Valchev
Telerik team
James
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or