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

7 posts, 0 answers
  1. Dhananjay
    Dhananjay avatar
    5 posts
    Member since:
    Apr 2011

    Posted 17 Jun 2012 Link to this post

    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 

  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Jun 2012 Link to this post

    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!
  5. Dhananjay
    Dhananjay avatar
    5 posts
    Member since:
    Apr 2011

    Posted 20 Jun 2012 Link to this post

    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
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Jun 2012 Link to this post

    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!
  9. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 15 Jul 2012 Link to this post

    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.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Jul 2012 Link to this post

    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!
  13. Lino
    Lino avatar
    2 posts
    Member since:
    Oct 2013

    Posted 10 Dec 2013 Link to this post

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

  14.
Back to Top