Select the First Item on Removal of Any Item in ListBox

Environment

Product Version	2019.3.1023
Product	Progress® Kendo UI® ListBox for jQuery

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

• select
• remove
• setTimeout()