Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Endless Scroll with local SQL Lite

5 Answers 305 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Bastien
Top achievements
Rank 1
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

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Jan 2013, 12:57 PM
Hi Bastien,

Your Kendo configuration looks OK. Is it possible to provide an example (probably in jsBin, jsFiddle) that I can run and debug locally. In this way I would be able to investigate what is going wrong and help you resolve the issue.
Thank you in advance for the cooperation.

Kind 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
Bastien
Top achievements
Rank 1
answered on 15 Jan 2013, 11:10 AM
Hi Alexander,

Thanks for your support. As requested I've done the JSBin: http://jsbin.com/atataj/1/edit 

Don't open it with IE, it will not work as it is using WebSQL db.

I changed the 'endless' scroll to 'load more', but should be the same. There's 35 items in the DB, but only the first page is displayed... when you click on 'load more' nothing happens.

Kind regards,
Bastien
0
Bastien
Top achievements
Rank 1
answered on 17 Jan 2013, 10:42 AM
No idea?
0
Accepted
Alexander Valchev
Telerik team
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:
  1. 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; }
    },
  2. 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"
    }
  3. 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>
        </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!
0
Bastien
Top achievements
Rank 1
answered on 17 Jan 2013, 01:00 PM
Thanks a lot, it's working :-).
Tags
ListView (Mobile)
Asked by
Bastien
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Bastien
Top achievements
Rank 1
Share this question
or