Persist the Selection in the ComboBox
Environment
| Product | Progress® Kendo UI® ComboBox for jQuery |
| Operating System | All |
| Browser | All |
Description
In web pages I have the Persistence Manager control to preserve the user options and the state of the page through postbacks. I use the Kendo UI ComboBox for entering the criteria and the Kendo UI Grid. How can I persist the selected item in the ComboBox?
Solution
Retrieve the selected item and keep it in localStorage by using the select() method. When necessary, set an item as selected again by using select().
<div >
<a href="#" class="k-button" id="save">Save State</a>
<a href="#" class="k-button" id="load">Load State</a>
</div>
<input id="categories" />
<script>
$(document).ready(function() {
var categories = $("#categories").kendoComboBox({
filter: "contains",
placeholder: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoComboBox");
$("#save").click(function (e) {
e.preventDefault();
localStorage["combo-selection"] = categories.select();
});
$("#load").click(function (e) {
e.preventDefault();
var selection = localStorage["combo-selection"];
if (selection) {
categories.select(parseInt(selection));
}
});
});
</script>