KendoUI + jStorage: saving data in your browser (part 2)


In my previous post I showed how to save data in the browser and how to use two DataSources: one remote and the other in the browser; so you can work online and switch from one datasource to the other.

But there was one question pending: saving the data back to the remote datasource. I left this part for today’s blog since I did not want to synchronize the grid but only the entries that have been changed.

KendoUI + jStorage: keeping track of the changes

Kendo UI datasources use a field for each entry that stores if the data is dirty and then needs to be synchronized (sent) to the server (remote datasource). And then, this flag is reset.

We want something similar when sending the data to the server but `dirty` flag is reset after saving data so we loose that information and we don’t know what to send to the remote datasource.

I will modify the function for saving data in the browser for saving this information so it is available when needed.

Now my saving function is:

function saveData(op) {
    var modData = op.data.models;
    var dsData = localDataSource.data();
    $.each(modData, function (idx, elem) {
        localDataSource.get(elem.ProductID).sync = false;
    });
    $.jStorage.set(DbKey, dsData);
    op.success([]);
}

Where I introduce a look that iterates through the modified data and updates the datasource updating a `sync` field that is false when the data in that element is not synchronized (i.e. synchronization is needed).

Then the code for saving the data when I click on Switch DB button in the toolbar is:

$(".k-grid-switch-db").on("click", function () {
    if (!isLocal) {
        // Get Data from remote dataSource and save it into local dataSource
        var data = remoteDataSource.data();
        $.jStorage.set(DbKey, data);
        dataSource = localDataSource;
        // Refresh Grid
        grid.setDataSource(dataSource);
        grid.dataSource.read();
    } else {
        // Get Data from local dataSource and save it into remote dataSource.
        dataSource = remoteDataSource;
        data = localDataSource.data();
        dataSource.data(data);
        grid.setDataSource(dataSource);
        $.each(data, function(idx, elem) {
            elem.dirty = (elem.sync === false);
        });
        dataSource.sync();
    }
    isLocal = !isLocal;
    $.jStorage.set(IsLocalKey, isLocal);
});

Where I look through the locally saved datasource and check if synchronization is pending for each record from the `DataSource`. If it is pending, I set the dirty to true. Finally I invoke dataSource.sync() and the data gets save in the remote datasource.

Advertisements

One thought on “KendoUI + jStorage: saving data in your browser (part 2)

  1. Thanks for this post! It shows perfect how the transport option can be used for local data (including datasource switching). This is missing in the documentation…
    Florian

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s