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>