jQuery UI Widgets Forums ASP .NET MVC jqxdropdown inside bootstrap Modal

This topic contains 1 reply, has 2 voices, and was last updated by  ivanpeevski 2 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxdropdown inside bootstrap Modal #121237

    naveen145903
    Participant

    In one my asp.net mvc cshtml files, we are using jqxdropdown inside a Bootstrap Modal dialog. The filtering option is getting disabled for the jqxdropdown when it is inside the modal as indicated below. testddn is the id of the jqxDropdown.

    <div class=”modal fade bd-example-modal-lg” id=”addTextModal” tabindex=”-1″ role=”dialog” aria-labelledby=”addTextModalTitle” aria-hidden=”true” data-backdrop=”static”>
    <div class=”modal-dialog modal-dialog-centered modal-lg” role=”document”>
    <div class=”modal-content”>
    <div class=”modal-header”>
    <h5 class=”modal-title” id=”exampleModalLongTitle”>Test Modal</h5>
    </div>
    <div class=”modal-body container-fluid” id=”addText”>
    <form>

    <div class=”form-group”>
    <b><label for=”testddn”>Test Dropdown:</label></b>
    <div id=”testddn”></div>
    </div>

    </form>

    </div>
    <div class=”modal-footer”>

    </div>
    </div>
    </div>
    </div>

    jqxDropdown is populated as below.

    $(‘#testddn’).jqxDropDownList({ checkboxes: true, source: ddTest_DataAdapter, displayMember: ‘TestName’, valueMember: ‘TestId’, autoDropDownHeight: false, theme: ‘metro’, filterable: true, dropDownWidth: 300 });

    jqxdropdown inside bootstrap Modal #121239

    ivanpeevski
    Participant

    Hi naveen145903,

    The tabindex="-1" attribute prevents all elements outside the modal from being focused.
    You will see that when you remove it, the filtering field will be enabled.

    If you have any other questions, please do not hesitate to contact us again!
    Best regards,
    Ivan Peevski
    jQWidgets Team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.