How to query a local websql DB with Kendo UI

javascript, kendo-ui

Solution

You can create a custom transport for the Kendo DataSource. For example in transport.read you can perform a query to your websql database and return the result:

var dataSource = new kendo.data.DataSource({
   transport: {
      read: function(options) {

        db.transaction(function(tx) {

          tx.executeSql('SELECT * from my_table', [], function(tx, result) {

             var data = [];
             // copy the rows to a regular array
             for (var i = 0; i < result.rows.length; i++) {
                data[i] = result.rows.item(i);
             }

             options.success(data); // return the data back to the data source
          });
        });
      }
   }
});

Here is a full CRUD demo: http://jsbin.com/azukin/4/edit

Problem

Forgive me if this question is too broad for SO but I'm struggling to find any examples of what I need and thought someone may be able to point me in the right direction. I'm just starting out with Kendo UI mobile and am trying to find a tutorial or any example code for creating/querying a local client side websql database within kendo ui mobile. There is nothing in the docs... Can anyone help? Thanks in advance

Original source