Offline Access for Datasources

3 posts, 0 answers
  1. Pete
    Pete avatar
    18 posts
    Member since:
    Apr 2013

    Posted 06 Jun 2014 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms

    Chrome, Safari, Firefox, and IE.  Android, iOS, Mac, and Windows

    Components/Widgets used (JS frameworks, etc.) and

    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.

    <!-- jQuery -->
    <script src="kendo/js/jquery-1.9.1.js"></script>
    <!-- Kendo -->
    <script src="kendo/js/kendo.web.js"></script>
    <script src="kendo/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: - 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. - Some helper functions for parsing HTML attributes for auto-configuration. - 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. 
  2. John
    John avatar
    1 posts
    Member since:
    Feb 2015

    Posted 06 Feb 2015 in reply to Pete Link to this post

    Why are you limiting this to detecting mobile browsers. This will function on many desktop browsers also. Desktop browsers are not always connected to the internet. Would it be better to see if the feature is supported by the browser vs detecting mobile?
  3. Andy
    Andy avatar
    1 posts
    Member since:
    Aug 2015

    Posted 16 Sep 2015 in reply to Pete Link to this post

Back to Top