Edit this page

Persist the Selection in the ComboBox

Environment

Product ComboBox for Progress Kendo UI
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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy