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

Endless Scroll with local SQL Lite

5 Answers 366 Views

ListView (Mobile)

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

Bastien asked on 09 Jan 2013, 02:13 PM

Hi,

I've some problems to make the endless scroll work with a local sql lite db (edit: in fact it's not sql lite, but web sql, but at the end the problem is the same ;-)).

The first 10 items are well loaded, but the "read: " function is not called when I scroll down to the last item of the view. I think I'm missing something...

I don't think I need the transport->parameterMap nor the datasource->schema, but maybe I'm wrong.

Thanks for your help!

Here is my view:

<!DOCTYPE html>

<html>

<head>

<title>Activities</title>

</head>

<body>

<div data-role="view" data-layout="default" data-init="initTask">

<h1>Tasks</h1>

<ul id="tasks"></ul>

</div>

<script>

var ds = new kendo.data.DataSource({

pageSize: 10,

serverPaging: true,

transport: {

read: function(options) {

writeLog('DataSource READ');

_db.transaction(function(tx) {

writeLog('Reading from DB');

var sql = 'SELECT name, date FROM testtable LIMIT ' + options.data.pageSize * (options.data.page - 1) + ',' + options.data.pageSize;

tx.executeSql(sql, [], function(tx, results) {

writeLog('Results found: ' + results.rows.length);

var data = [];

for (var i=0; i<results.rows.length; i++) {

data[i] = results.rows.item(i);

}

options.success(data);

});

}, transaction_error);

}

});

function initTask() {

writeLog('init');

$("#tasks").kendoMobileListView({

dataSource: ds,

template: kendo.template($("#tmpl-post").html(), {useWithBlock:true}),

endlessScroll: true,

scrollTreshold: 30 //treshold in pixels

});

}

</script>

</body>

</html>

5 Answers, 1 is accepted

Accepted

answered on 17 Jan 2013, 12:07 PM

Hello Bastien,

Thank you for the example.

The problem is connected with total property of the DataSource. By design the ListView will stop the endless scroll or remove the press to load more button when total amount of records is reached. There are two ways to workaround this:

If you know the total amount of records at the time when the ListView is initialized, please set it as schema.total value of the DataSource.

schema: {

total: function() { return 35; }

},
If possible you may return the total amount of records together with the response. For example:

data = {

    data: [{....}, {....}, .....], //10 records

    total: 35

};

options.success(data);

//dataSource

schema: {

    data: "data",

    total: "total"

}
If none of the above works in your real case, you may set the total to 0. In this way the widget will continue making requests, until they are prevented manually.

schema: {

total: function() { return 0; }

}

In addition I noticed that ListView throws error after data is received. This is because you have wrapped the template inside a <li> tag. This is not necessary, the widget will render <li> element for you and place the rendered template content inside it.

<script type="text/x-kendo-template" id="tmpl-config">

<div class="post-container">

<div class="confItem">

<div class="header" style="border:1px solid #=Value#">#= ConfigKey# </div>

</div>

</script>

It seems that currently there is a problem with jsBin and I cannot update the sample.
I hope the aforementioned guidelines will help.

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!