Select the First Item on Removal of Any Item in ListBox

Environment

Product Version 2019.3.1023
Product ListBox for Progress® Kendo UI®

Description

How can I select the first item in the Kendo UI ListBox whenever I remove any item from the ListBox?

Solution

Use the select method in the remove event. Make sure to use the setTimeout() method so that the first item is selected after the remove function is executed.

  $("#listBox").kendoListBox({
    remove: function(e) {
      setTimeout(function() {
        var listBox = $("#listBox").data("kendoListBox");
        listBox.select(listBox.items().first());    
      })
    }
  });

Example

  <select id="listBox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
    <option>Item 4</option>
  </select>
  <script>
    $("#listBox").kendoListBox({
      toolbar: {
          position: "right",
          tools: [ "moveUp", "moveDown", "remove" ]
      },
      remove: function(e) {
        setTimeout(function() {
          var listBox = $("#listBox").data("kendoListBox");
          listBox.select(listBox.items().first());  
        });
      }
    });
  </script>

See Also

In this article
Not finding the help you need? Improve this article