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

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

In this article