offlineStorage is null on first load

[Steven]

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");

 

[Rosen]

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