Rendering and binding a kendoMobileButton

2 posts, 0 answers
  1. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 02 Feb 2013 Link to this post

    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,
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top