offlineStorage is null on first load

2 posts, 0 answers
  1. Steven
    Steven avatar
    11 posts
    Member since:
    Oct 2013

    Posted 10 Nov 2015 Link to this post

    Hi there

    I'm trying to use the offlineStorage key to cache lookup tables and bind to a dropdownlist and it doesn't seem to populate on the first load. Subsequent page loads use the offlineStorage key fine. Below is a snippet of the code I'm using. Would anyone have any ideas how I might proceed?

    Thanks

    Steven

    <input type="text" id="Status" />
    <script> 
        var statusDataSource = new kendo.data.DataSource({
            type: "odata",
            offlineStorage: "statusStorage",
            transport: {
                read: { url: "/FoodIncidentsModelService.svc/lkupStatus", dataType: "json", type: "get" }
            },
            serverSorting: true,
            sort: { field: "text", dir: "asc" },
            schema: {
                data: function (response) {
                    var dataArray = null;
                    if (response.d) {
                        dataArray = response.d.results;
                    }
                    else {
                        dataArray = response;
                    }
                    return dataArray;
                }
            }
        });
     
        if (localStorage.getItem("statusStorage") === null) {
            console.log("Retrieving from database");
            statusDataSource.fetch();
        }
     
        var locate = JSON.parse(localStorage.getItem("statusStorage"));
        console.log(locate);
        $("#Status").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: locate
        }).data("kendoDropDownList");
     

  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 12 Nov 2015 Link to this post

    Hello Steven,

    If I have correctly understood your scenario, at the first load the DropDownList widget is not getting populated. If this is the case it is most probably caused by the fact that the fetch is asynchronous. Thus, when the code tries to retrieve the  data from the localStorage, the remote call for data is not yet completed and is localStorage is still not populated. You could modify you approach similar to the following in order to make is work:

    function createDropDownList() {
      var locate = JSON.parse(localStorage.getItem("statusStorage"));
      console.log(locate);
      $("#Status").kendoDropDownList({
        /*..*/
        dataSource: locate
      }).data("kendoDropDownList");
    }
     
    var statusDataSource = new kendo.data.DataSource({       
      offlineStorage: "statusStorage",
       /*..*/
    });
     
    if (localStorage.getItem("statusStorage") === null) {
      console.log("Retrieving from database");
      statusDataSource.fetch().done(function() {
        createDropDownList();
      });
    } else {
      createDropDownList();
    }

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top