ListView with endless paging stops buttom click from firing

2 posts, 0 answers
  1. Harry
    Harry avatar
    3 posts
    Member since:
    Jul 2013

    Posted 20 Sep 2013 Link to this post

    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);
  2. Svetlio
    Admin
    Svetlio avatar
    8 posts

    Posted 25 Sep 2013 Link to this post

    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.
Back to Top