This is a migrated thread and some comments may be shown as answers.

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

3 Answers 325 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Colm Daniel
Top achievements
Rank 1
Colm Daniel asked on 28 Jun 2012, 05:02 PM
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>

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 03 Jul 2012, 08:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Colm Daniel
Top achievements
Rank 1
answered on 03 Jul 2012, 08:36 AM
Thanks Alexander.  That is what I suspected.  No problem for us to take this approach.

Colm
0
Joe
Top achievements
Rank 1
answered on 07 Nov 2012, 08:29 PM
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.
Tags
ListView (Mobile)
Asked by
Colm Daniel
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Colm Daniel
Top achievements
Rank 1
Joe
Top achievements
Rank 1
Share this question
or