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

Question

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.

@Akis_Tfs I am not sure if I am, I have not set k-use-native-scrolling="'true'" — User7723337
– User7723337, Commented May 16, 2016 at 10:45
@Akis_Tfs I have updated my question with my list view sample code. — User7723337
– User7723337, Commented May 20, 2016 at 6:28
@Akis_Tfs In case if kendo-mobile-view has more than one scroll view how can I fond out which list/scroll has generated this scroll event? — User7723337
– User7723337, Commented May 27, 2016 at 2:58

Sarantis Tofas · Accepted Answer · 2016-05-27 08:52:57Z

1

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

edited May 27, 2016 at 8:52

answered May 12, 2016 at 15:35

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

User7723337 Over a year ago

Thanks for replay, but when I try this code then I don't get event in my call back method. I get error Uncaught TypeError: Cannot read property 'scroller' of undefined in my logs, so data().kendoMobileView is null.

Sarantis Tofas Over a year ago

@A_user hmm you should be able to get the Kendo Mobile View with this way. Can you please show the code where you define your Kendo View?

User7723337 Over a year ago

@Akis-tfs - I have updated my question with my list view code.

User7723337 Over a year ago

@Akis-tfs -- Thanks for update, I will try it. But problem is that I have 2-3 scrolling lists in one page so how can I get to know which list user is scrolling. In my code example I have given only one list for example. Thanks a lot for helping.

User7723337 Over a year ago

@Akis-Tfs I tried this solution and works very well, and I am able to get scroll events now. but what to do if we have more than tow lists inside kenod-mobile-view how we can figure out which list is scrolling. Thanks again for providing help.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related