Unable to cache a kendo.data.DataSource in localStorage

1 posts, 0 answers
  1. Sean
    Sean avatar
    3 posts
    Member since:
    May 2011

    Posted 19 Oct 2012 Link to this post

    I am using the Kendo UI ComboBox with an external, XML DataSource. Here's the DataSource code:

                var csDataSrc = new kendo.data.DataSource(
                    read: "Data/StateList.xml",
                    dataType: "xml",
                    create: { cache: true }
                    type: "xml",
                    data: "/States/State",
                            id: "id/text()",
                            name: "name/text()"
        catch (err)

    That creates the data source, here's the code that creates the kendo combobox:

       index: 0,
       placeholder: "Begin typing Coverage State...",
       dataTextField: "name",
       dataValueField: "id",
       filter: "contains",
       dataSource: csDataSrc,
       text: $("#hdnStateName").val(),
       value: $("#hdnStateKey").val(),
       change: function(e)

    This works really well but the data for the real list is enormous and I'd like to store it in local storage with something like this:
        localStorage.setItem("state_key", csDataSrc);
    Then when the page loads instead of building and reading from the server side xml all the time, I'd like for it to be something like this:

        var csDataSrc = localStorage.getItem("state_key");
        if(csDataSrc === null)
            // create the data source with the above code
            // and store it in localStorage.
    Then bind it here...

            .dataSource: csDataSrc,

    I create the data source fine, it seems to store correctly in localStorage but when you leave the page and come back the data source is always null.  I can see it using the resources tab of the Chrome developer tools but it won't bind to the combo box correctly.
    Any help or if I need to elaborate on anything to make this clearer please let me know


Back to Top