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

Prevent the Deletion of Selected MultiSelect Items on Backspace

Environment

Product Progress® Kendo UI® MultiSelect for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I prevent the deletion of selected items on a Backspace key-press in the Kendo UI MultiSelect widget?

Solution

The following example demonstrates how to achieve the desired scenario.

<select id="multiselect" multiple="multiple"></select>
    <script>
      var data = [
        { text: "Africa", value: 1 },
        { text: "Europe", value:2 },
        { text: "Asia", value:3 },
        { text: "North America", value:4 },
        { text: "South America", value:5 },
        { text: "Antarctica", value:6 },
        { text: "Australia", value:7 }
      ];

      $("#multiselect").kendoMultiSelect({
        dataSource: data,
        dataTextField: 'text',
        dataValueField: 'value'
      });

      var multiselect = $("#multiselect").data("kendoMultiSelect");

      var input = multiselect.input;

      input.on('keydown', function(e){
          if(e.which === 8 && !e.target.value.length){
            e.stopImmediatePropagation();  
            e.preventDefault();
          }
      });

      $._data(input[0]).events.keydown.reverse();
    </script>

See Also

In this article