How to switch off endless scrolling once you reach the end of a long dataset

4 posts, 1 answers
  1. Colm Daniel
    Colm Daniel avatar
    4 posts
    Member since:
    Jun 2012

    Posted 28 Jun 2012 Link to this post


    Fantastic to get endless scrolling working so easily. What a fantastic product.

    However, imagine that the user is scrolling down through a dataset which could have hundreds of rows, but there is however a finite number or rows.  The result is that the server is hit and it will continuously load the last 8 rows or whatever (In my example I get 68 rows back, so the 7th time you scroll to the end should be the last time it gets as far as the Rest API).  So the 8th, 9th, and subsequent "pull-ups" to get more data loads the same rows... I throw up a message box to indicate you've hit the end at the moment.

    So the question is, can I switch off endless scrolling at this point so the server doesn't get hit?
    Do I have to implement handling on the server side which calculates if I need to throw back an empty result set that would in theory be appended? (i.e., nothing extra would appear).

    Either solution is acceptable to me, but to prevent the server hit would be cool obviously.

    Here is my javascript:

    <script id="endless-scrolling-template" type="text/x-kendo-template">
    <div class="resultline">              
        #= company_name #
        <span class="sublink"> #=company_num #/#= company_bus_ind # </span>
    function mobileListViewEndlessScrolling() {
    var dataSource = new{
        pageSize: 10,
        serverPaging: true,
        transport: {
            read: {
                url: "OpenServiceWrapper/customlist", // the remove service url
                dataType: "json"
            parameterMap: function (options) {
                var parameters = {
                    //additional parameters sent to the remote service
                    company_name: "bank",
                    company_bus_ind: "c",
                    max: options.pageSize,
                    page:, //next page -- this is automatically incremented as part of kendo
                    totalCount: $("#company-matches-found").html()
                return parameters;
        change: function (e) {
    //                console.log("Page = " + e.sender._page);
    //                console.log("Page size = " + e.sender._pageSize);
    //                console.log("Next page = " + dataSource._pristine.next_page);
    //                console.log("Previous page = " + dataSource._pristine.previous_page);
    //                console.log("Total count = " + dataSource._pristine.total_count);
            var t = dataSource._pristine.total_count;
            var m = e.sender._page * e.sender._pageSize;
            if (m >= t) {
                alert("That's it... no more matches");
                // I want to flick off server side call back here
        schema: { // describe the result format: this should correspond to class CustomCompany
            total: "total_count",
            page: "page",
            data: "results", // the data which the data source will be bound to is in the "results" field
            model: {
                fields: {
                    company_num: {
                        type: 'number'
                    company_name: {
                        type: 'string'
                    company_bus_ind: {
                        type: 'string'
        dataSource: dataSource,
        template: $("#endless-scrolling-template").text(),
        endlessScroll: true,
        scrollTreshold: 30 //treshold in pixels
  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 03 Jul 2012 Link to this post

    Hello Colm,

    Currently I would recommend using the second approach - implementing server logic that will return back an empty result if the end is reached. The endless scrolling cannot be switched off at present, however in the future we may consider preventing the server to be hit if total amount of records is set.

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Colm Daniel
    Colm Daniel avatar
    4 posts
    Member since:
    Jun 2012

    Posted 03 Jul 2012 Link to this post

    Thanks Alexander.  That is what I suspected.  No problem for us to take this approach.

  4. Joe
    Joe avatar
    4 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    Colm, this will do the trick in your change event handler when the end of your paged data set is reached:

    This should not be used when pull-to-refresh is enabled, however, since endless scrolling will be disabled when pull-to-refresh item count is 0.
Back to Top