This is a migrated thread and some comments may be shown as answers.

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

6 Answers 964 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Dhananjay
Top achievements
Rank 1
Dhananjay asked on 17 Jun 2012, 11:53 AM
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 

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 18 Jun 2012, 06:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dhananjay
Top achievements
Rank 1
answered on 21 Jun 2012, 04:06 AM
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
0
Iliana Nikolova
Telerik team
answered on 25 Jun 2012, 03:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 2
answered on 15 Jul 2012, 04:43 PM
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.
0
Iliana Nikolova
Telerik team
answered on 18 Jul 2012, 07:54 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lino
Top achievements
Rank 2
answered on 11 Dec 2013, 02:04 AM
Take a look @ http://www.kendoui.com/code-library/web/grid/grid-crud-using-localstorage.aspx

Tags
ListView (Mobile)
Asked by
Dhananjay
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Dhananjay
Top achievements
Rank 1
Shawn
Top achievements
Rank 2
Lino
Top achievements
Rank 2
Share this question
or