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

Rendering and binding a kendoMobileButton

1 Answer 83 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Gurumurthy asked on 03 Feb 2013, 01:34 AM
Hello - I have an html file (some.html) that has some controls, one of which is a span (which I would like to render as a kendoMobileButton. I also have a JS file where I get the contents of some.html using an ajax call and append it to the body. For the purpose of this question, I am oversimplifying the code.

<div id="somediv">
<span id="thisbutton"  data-bind="click: click" style="background-color:green;">A Button</span> 


        url: "html/mobileapp/preflight/some.html",
        type: "GET",
        success: function(data) {
        error : function(xhr, textStatus, errorThrown ) {
        timeout: 30000

In the bindView(), I create a viewModel and bind it to the view, as below:

viewModel = kendo.observable({
        click: function(e) {

kendo.bind($("#somediv"), viewModel);

(Note that the above code happens *after* kendoApp has been created (hence the reason I would like to call kendoMobileButton() to render the span as a kendo mobile button:

kendoApp = new, { });

What I observe when I run the app on the device is that the span is correctly rendered as a button, *but* the click method doesn't get called consistently. It fires a few times, and then on subsequent clicks, nothing happens - I don't see the console.log("****click") output.

Now if I comment out this line:


then the span remains a span (instead of button) but the click event fires correctly everytime I click the span.

Any idea what could be going on?


1 Answer, 1 is accepted

Sort by
Alexander Valchev
Telerik team
answered on 05 Feb 2013, 11:25 AM
Hi Gurumurthy,

I noticed a few problems with your current implementation:
  • replacing/adding elements in the DOM at run time is not supported - newly inserted components will not be automatically initialized nor bound
  • using kendo.bind is error prone. Mobile View has a model configuration option which should be used to bind the View to a given View-Model.
  • you should bind to the click event of the button widget. In the current implementation, at first the span element in bound, button widget is initialized after that. In other words you are bound to the click event of the span element, not the button widget.

    kendo.bind($("#somediv"), viewModel); //apply bindings
    $("#thisbutton").kendoMobileButton(); //make a button

    Instead of calling kendoMobileButton you may initialize it via data-role="button". In this way binding will automatically build the widget.

I hope this information will help. 

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!
Button (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question