angularjskendo-mobileangular-kendo

How to get scroll event when kendo-list-view scrolls


I am building a cross platform application using Angular Kendo Mobile.

I have a Kendo list using "kendo-list-view".

<div kendo-list-view > 

I want to get an event when user scrolls this list, in my controller.

I also tried to get the scroll event by using pure angular code, as mentioned in below question.

Bind class toggle to window scroll event

But in my case nothing happens and code inside the directive is not getting called.

UPDATE

I have my HTML with list view as below:

<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">

    <kendo-mobile-header >
        <kendo-mobile-nav-bar style="background-color: gray">
            <kendo-view-title style="color: white"></kendo-view-title>
            <kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
        </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <div class="myListMainDiv">
        <div kendo-list-view 
             id="myListViewDiv"
             class="myListViewDiv"
             k-template="templates.myListViewItem" 
             k-data-source="myService.listDataSource" 
             ng-show="showListSelected"
             ></div>
   </div>

   <script id="myListViewItem" type="text/x-kendo-template">
        <div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
           {{dataItem.name}}
        </div>
   </script>

</kendo-mobile-view>

I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.


Solution

  • You can get the scroll event from the Scroller of your Kendo Mobile View, For example if you have a view with id="myListScreen":

        var kendoView = $('#myListScreen').data().kendoMobileView;
        var scroller = kendoView.scroller;
    
        scroller.bind("scroll", function(e) {
            console.log(e.scrollTop);
            console.log(e.scrollLeft);
        });
    

    You can find more info about the kendo scroller here on their documentation