How to save and retrieve data from KendoUI DataSource in local storage of HTML5

[Dhananjay]

HI , 

I have a requirement to  save and fetch data getting from ODATA service in local storage. I am able to fetch data from ODATA feed  and subsequent create KendoUI DataSource. I am using this DataSource to bind to KendoUI Mobile ListView as following , 

speakerData = new kendo.data.DataSource(

              {

                  type: "odata",

                  transport: {

                      read: {

                          // the remote service url

 

                          url: "http://server/Service.svc/Sessions",

                          dataType: "jsonp",

 

                          data: {

                              Accept: "application/json"

                          }

                      }

                  },

                  serverfiltering: true,

                  serverPaging: true,

                  pageSize: 10,

                  batch: false

              });

i am able to use this DataSource in KendoUI ListView as following , 

$("#speakersView").kendoMobileListView(

               {

                   template: "<strong>${Title }</strong>",

                   dataSource: speakerData

 

               });

Now I am trying to save returned data on local storage as following 

localStorage.setItem('speakerData', JSON.stringify(speakerData.data()));

and creating new  DataSource where I am reading data from local storage not from the ODATA Feed as following 

var ospeakerData = localStorage.getItem('speakerData');

               speakerData1 = JSON.parse(ospeakerData);

               speakerData = new kendo.data.DataSource(

               {

                   transport: {

                       read: function (options) {

                           var data = speakerData1

                           options.success(data);

                       }

                   }

                    

                  

               });

But it seems it is not working .. when I did console.log of JSON.stringify(speakerData.data())  .. it returns ana empty array [].

Please help me to save returned feed from ODATA  or in other words save datasource.data on local storage. 

Thanks 
Dhananjay 

[Iliana Dyankova]

Hi Dhananjay,

I am not quite sure what causes the problem in your application. Could you please provide a simple but runnable project that could be examined in details? This way I would be able to observe the problem and advice you further. Thank you in advance.
 

Regards,
Iliana Nikolova
the Telerik team

[Dhananjay]

Hi , 

Thanks for reply. On what  Email ID or location I can share code ?

In between I am attaching f HTML file with the reply

Thanks 
Dhananjay

[Iliana Dyankova]

Hello Dhananjay,

The most likely reason for the issue in your application is that when you try to store the data into the local storage the data is still not received. That is why I would suggest to do this in the dataSource change event, when the data is fully loaded.

Also, please note that the string you retrieve from the localStorage needs to be deserialized into array of objects in order to be recognized from the dataSource.

Greetings,
Iliana Nikolova
the Telerik team

[Shawn]

I am also trying to do this as well and having some problems.  Is there a simple example of managing data locally (never go to server to fetch data) and use local data source as.

For example if I specify the callback function in the datasource do I need to loop through the record set and load the array which the list view will use?

I got it working by just re associating the data source with the list view - not the way it should be done, but it worked.

[Iliana Dyankova]

Hello Shawn,

I am afraid there is no available example which illustrates how to perform CRUD operations on local data, but to achieve this functionality you could customize the dataSource's transport. Like here:

dataSource: {
  transport: {
    read: function(options) {
      var result = getResult(options);
      options.success(result);
    },
    create: function(options) {
      var result = getResult(options);
      options.success(result);
    },
    update: function(options) {
      var result = getResult(options);
      options.success(result);
    },
    destroy: function(options) {
      var result = getResult(options);
      options.success(result);
    }
  }
}

 

I hope this information helps.
 

Kind regards,
Iliana Nikolova
the Telerik team

[Lino]

Take a look @ http://www.kendoui.com/code-library/web/grid/grid-crud-using-localstorage.aspx