RadDropDownTree in Bootstrap Modal

[Giannis]

Hello

i am developing a asp.net web forms application using twitter bootstrap (latest version) an telerik asp.net ajax controls. I would like to mention the above problem:

Inside a bootstrap modal window i have a RadDropDownTree with EnableFiltering. I noticed that, although i enter some text in filter input, the text is not shown at input's value.

Another RadDropDownTree placed inside the web form page as well as a RadTextBox also inside the modal works fine!
Does anyone have the same problem?

The above snippet shows my web form content. The RadDropDownTree1 control which is outside the modal works fine! The problem is about RadDropDownTree2

01.<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
02.
03.    <telerik:RadDropDownTree ID="RadDropDownTree1"
04.        FilterSettings-EmptyMessage="i can text here"
05.        runat="server" EnableFiltering="True">
06.    </telerik:RadDropDownTree>
07.
08.    <!-- Button trigger modal -->
09.    <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
10.        Launch demo modal
11.    </a>
12.
13.    <!-- Modal -->
14.    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
15.      <div class="modal-dialog">
16.        <div class="modal-content">
17.          <div class="modal-header">
18.            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
19.            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
20.          </div>
21.          <div class="modal-body">
22.
23.              <telerik:RadTextBox runat="server"></telerik:RadTextBox>
24.
25.              <telerik:RadDropDownTree ID="RadDropDownTree2"
26.                  runat="server" EnableFiltering="True"  FilterSettings-EmptyMessage="i can't text anything here" >
27.
28.              </telerik:RadDropDownTree>
29.          </div>
30.          <div class="modal-footer">
31.            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
32.            <button type="button" class="btn btn-primary">Save changes</button>
33.          </div>
34.        </div>
35.      </div>
36.    </div>
37.
38.</asp:Content>

I have version v4.0.30319 ( 2013.2.611.45) of telerik controls

Do you have any ideas?

[Giorgos]

Does any one have a clue as to what could be the cause of the problem? We use quite often
bootstrap modal dialogs in our web application and the filtering functionality of RadDropDownTree 
is not working when the control is used inside such a dialog.

Thanks in advance for any help you may provide,

Giorgos

[Magdalena]

Hi Giorgos,

I tested the page that you have provided but the issue that you have described did not reproduce. I am sending you this video for your reference. Please let me know if you have missed something important.

Regards,
Magdalena
Telerik

 

 

[Giorgos]

Hi Magdalena,

thank you for your prompt reply. You have added a little piece of code to our submitted code excerpt:

<style type="text/css">
       html .modal  {
           display:block;
       }
       html .fade {
           opacity: 1;
       }
   </style>

 
If we add this piece of code to our project filtering works, but, unfortunately, another
problem creeps in: the modal dialog is always vidible and the user is not able to 
close it!

We would be gratefull if anyone could provide us with a working solution,

Giorgos

[Giorgos]

Hi again,

after watching carefully the video you have supplied I noticed that there the same problem
exists: after adding the <style> ... </style> piece of code you press refresh and the modal
dialog opens without pressing the "Launch demo modal" button.

Cheers,

Giorgos

[Magdalena]

Hello Giorgos,

after testing the issue that you describe I could reproduce it. in general the .modal element is rendered after the drop-down of RadDropDownTree so the .modal overlaps it. I applied the following CSS to resolve the issue

.modal {
    visibility: hidden;
}
.modal-dialog {
    visibility: visible;
}

 Here is a short video demonstrating the use of the code above.

I hope this is helpful. Let me know how it goes from your side and if you have any further questions that I can assist you with.

Regards,
Magdalena
Telerik

 

 

[Giannis]

Magdalena your solution solves our problem! thank you very much!