Edit this page

Prevent the Deletion of Selected Items on Backspace

The following example demonstrates how to prevent the deletion of selected items on a Backspace key-press in the Kendo UI MultiSelect widget.

Example
<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

For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.

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

Give article feedback

Tell us how we can improve this article

close
Dummy