How to query a local websql DB with Kendo UI

Question

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

Answer 1

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

Answer 2

With JayData you can do it with just a few lines of code and it will support not only websql but indexeddb too http://jaydata.org/blog/jaydata-kendo-ui-awesomeness

Answer 3

You can also use PouchDB, that can store data in WebSQL. There is kendo-pouchdb adapter that connects PouchDB database with Kendo UI or Kendo Mobile widgets.

Here's demo of Kendo Grid that read and updates data in PouchDB.

P.S. I'm the author of kendo-pouchdb.