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

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

        try
            {
                var csDataSrc = new kendo.data.DataSource(
                {
                    transport:
                {
                    read: "Data/StateList.xml",
                    dataType: "xml",
                    create: { cache: true }
                },
                schema:
                {
                    type: "xml",
                    data: "/States/State",
                    model:
                    {
                        fields:
                        {
                            id: "id/text()",
                            name: "name/text()"
                        }
                    }
                }
            });
            csDataSrc.read();
        }
        catch (err)
        {
            log.error(err.message);
        }


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


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


    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...


        ...kendoComboBox(
        {
            ...,
            .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


    Thanks
    -s

Back to Top