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

[Colm Daniel]

Hi, 

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?
Or,
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>

</div>

</script>

 

<script>

function mobileListViewEndlessScrolling() {

var dataSource = new kendo.data.DataSource({

    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: options.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;

        console.log($("#company-matches-found").html(t));

 

 

        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'

                }

            }

        }

    }

});

 

 

 

 

$("#endless-scrolling").kendoMobileListView({

    dataSource: dataSource,

    template: $("#endless-scrolling-template").text(),

    endlessScroll: true,

    scrollTreshold: 30 //treshold in pixels

});

 

 

}

</script>

[Alexander Valchev]

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.

Regards,
Alexander Valchev
the Telerik team

[Colm Daniel]

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

Colm

[Joe]

Colm, this will do the trick in your change event handler when the end of your paged data set is reached:
http://www.kendoui.com/forums/ui/listview/listview-endlessscroll-problem.aspx#2365173

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.