Rendering and binding a kendoMobileButton

[Gurumurthy]

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.

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

JS:

$.ajax({
        url: "html/mobileapp/preflight/some.html",
        type: "GET",
        success: function(data) {
            this.container.append(data);
            bindView();
        },
        context:this,
        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({
        locations:  this.dataSource.data(),
        click: function(e) {
        console.log("****click");
        }
    });

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


(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 kendo.mobile.Application(document.body, { });

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:

//$("#thisbutton").kendoMobileButton();

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?

Thanks,

[Alexander Valchev]

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. 

Regards,
Alexander Valchev
the Telerik team