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