Endless Scroll with local SQL Lite

6 posts, 1 answers
  1. Bastien
    Bastien avatar
    19 posts
    Member since:
    Mar 2010

    Posted 09 Jan 2013 Link to this post

    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>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Bastien
    Bastien avatar
    19 posts
    Member since:
    Mar 2010

    Posted 15 Jan 2013 Link to this post

    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
  5. Bastien
    Bastien avatar
    19 posts
    Member since:
    Mar 2010

    Posted 17 Jan 2013 Link to this post

    No idea?
  6. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 17 Jan 2013 Link to this post

    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!
  7. Bastien
    Bastien avatar
    19 posts
    Member since:
    Mar 2010

    Posted 17 Jan 2013 Link to this post

    Thanks a lot, it's working :-).
Back to Top
Kendo UI is VS 2017 Ready