A_user A_user - 6 months ago 56
AngularJS Question

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.

Answer

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