How to Make the Kendo UI DropDownList Search Box Clickable in a Bootstrap Modal
Environment
Product | Version |
---|---|
Kendo UI DropDownList | 2023.3.1114 |
Description
I have my DropDownList rendered in a Bootstrap 3 or Bootstrap 4 Modal and the filter search box is not accessible. I want to make the search box focusable.
Bootstrap modal dialogs prevent access to Kendo UI popups, which are opened by components placed inside the modal dialog. In such cases, use non-modal Bootstrap dialogs or
modal Kendo UI Windows
.
Solution
You can add the following logic to remove the focusin
event listener from the modal.
$('#testmodal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
Below you can find a runnable example demonstrating this approach.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<button id="change" type="button" data-toggle="modal" data-target="#testmodal">Open Modal</button>
<br />
<div class="modal fade" id="testmodal" data-backdrop="close" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="filters" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="filters">Filters</h5>
</div>
<div class="modal-body" style="height: 400px">
<div id="dropdown"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#testmodal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
$("#change").kendoButton();
$("#dropdown").kendoDropDownList({
filter: "contains",
optionLabel: "All",
dataSource: [
{ name: "Red" },
{ name: "Green" }
],
dataTextField: "name",
dataValueField: "name"
});
});
</script>
Now, the search box in the Kendo UI DropDownList within the Bootstrap modal should be editable.