Telerik Product and Version
|
v2013.3.1324
|
|
Supported Browsers and Platforms
|
Chrome, Safari, Firefox, and IE. Android, iOS, Mac, and Windows |
|
Components/Widgets used (JS frameworks, etc.)
|
kendo.data.DataSource and kendo.data.ObservableObject |
PROJECT DESCRIPTION
This example demonstrates how to save the data locally in the mobile device
and when online network status is detected synchronize the local data back to the server.
To install, include all three files, after including the core Kendo files, in the following order: Observable, Widget, DataSource.
Example:
<!-- jQuery -->
<script src="kendo/js/jquery-1.9.1.js"></script>
<!-- Kendo -->
<script src="kendo/js/kendo.web.js"></script>
<script src="kendo/js/kendo.mobile.js"></script>
<script src="kendo/js/everlive.all.js"></script>
<!-- MillionMunkeys -->
<script src="MillionMunkeys/KendoMunkey/Observable.js"></script>
<script src="MillionMunkeys/KendoMunkey/Widget.js"></script>
<script src="MillionMunkeys/KendoMunkey/DataSource.js"></script>
Usage:
kendo.data.ObservableObject - This object was updated to follow the full Property-Invocation Programming specification, with only a few exceptions.
* Adds an exists() function.
* Adds a remove() function.
* Allows specifying a default value to the get() function in case the value does not exist yet, e.g. get(property, default).
* Allows the set() function to accept and object of multiple properties to set at once.
* Immediately executes the function during a bind() operation.
kendo.data.Widget - Some helper functions for parsing HTML attributes for auto-configuration.
kendo.data.DataSource - Adds offline storage and synchronization with a REST server datasource.
Configuration options:
* “storage” - Accepts “false”, “localStorage”, and “sessionStorage”. All records, and even deleted records, are serialized and converted to JSON objects and saved in local storage in the browser. This preserves all edits, adds, and deletes until the next sync() operation.
* “template” - Allows you to specify a DOM object to be used to auto-configure the dataSource Model. It parses the HTML looking for input tags and reading the data attributes, e.g. <input data-name=“ColumnName” type=“number” />.
* “selected” - Accepts an index number or the keywords “first” or “last” to use as the default record. This is most-useful when used with a single-select HTML input object, like a Form or a Select box. After instantiation, this value will hold a reference to the currently-selected Model object.
A special note on GUIDS: UIDs were a huge problem when dealing with offline storage. The first is that the UID field must be blank on an Everlive datasource in order to register as an “Add” operation on sync. This meant that it could be used as the unique value for Dropdowns, Multiselects, Comboboxes, etc. Originally I created and managed my own unique ID, but that was burdensome. It eventually dawned on me to use the GUID as the unique value. It’s a value that could be assigned locally and synced with the backend. The problem, though, was that the GUID is reset after ever read() operation with Everlive! So what I did was force the storage of GUIDs locally, force synchronizing the GUID with the datastore, and force then after the Read operation, restore the local GUID to its original value. This allows using the GUID as the “value” field for Dropdowns, Multiselects, Comboboxes, etc. It also leverages using the getByUid() function for quick access to the selected record.