New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article