ListView with endless paging stops buttom click from firing

[Harry]

I had a list view with a button that when clicked would display a modal box however my button click event doesn't seem to fire now that I have switched to a endless scrolling ListView. Can you help show me where I am going wrong....


This is my HTML:

<div data-role="view" id="testView" data-title="test" data-layout="layout-drawer" data-model="app.testService.viewModel" data-init="mobileListViewEndlessScrolling">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="home" data-align="left"></a>
            <a data-role="backbutton" data-align="left" data-icon="reply"></a>
            <span data-role="view-title"></span>
        </div>
    </header>  
    
    <ul id="endless-scrolling"></ul>
</div>

<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
    <div class="product">
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    
        <a id="AddToCart" data-role="button" data-bind="click: onAddToCartClick" data-icon="add"></a>
    </div>
</script>



And this is my javascript:

function mobileListViewEndlessScrolling() {
       var dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: {
                    url: "http://demos.kendoui.com/service/Northwind.svc/Products"
                }
            },
            schema: {
                total: function () { return 77; }
            },
            sort: {
                field: "ProductID",
                dir: "desc"
            },
            serverPaging: true,
            serverSorting: true,
            pageSize: 50
        });

        $("#endless-scrolling").kendoMobileListView({
            dataSource: dataSource,
            template: $("#endless-scrolling-template").text(),
            endlessScroll: true
        });
              
        
    }

(function (global) {
    var testViewModel,
        app = global.app = global.app || {};
        


    testViewModel = kendo.data.ObservableObject.extend({
        
        
       onAddToCartClick: function(clickEvt) {
                              
                            
            alert("you clicked here");

           
       }
            
    });

    app.testService = {
        viewModel: new testViewModel()
    };
    
    
    
})(window);

[Svetlio]

Hello Harry,

the "AddToCart" button does not work, because it is not bound to the list view. The list view is bound to the source coming from "http://demos.kendoui.com/service/Northwind.svc/Products", which does not have a method named "onAddToCartClick". As a result your button remains not bound.

 The "app.testService.viewModel" is bound to "testView" element (and not to the list view), which does not refer "onAddToCartClick" action.  If you add a reference there the action will be invoked .

Regards,
Svetlio
Telerik

Big news for mobile app and .NET developers! Hear about it at our Release Keynote. Thursday, September 26th, 11AM EDT
Do you enjoy Icenium? Vote for it in Windows IT Pro Community Choice Awards as Best Cloud Computing Product or Service (Category 5).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.