RadDropDownTree in Bootstrap Modal

7 posts, 1 answers
  1. Giannis
    Giannis avatar
    2 posts
    Member since:
    Mar 2014

    Posted 19 Mar 2014 Link to this post

    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?
  2. Giorgos
    Giorgos avatar
    18 posts
    Member since:
    Apr 2013

    Posted 24 Mar 2014 in reply to Giannis Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  5. Giorgos
    Giorgos avatar
    18 posts
    Member since:
    Apr 2013

    Posted 24 Mar 2014 in reply to Magdalena Link to this post

    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


  6. Giorgos
    Giorgos avatar
    18 posts
    Member since:
    Apr 2013

    Posted 24 Mar 2014 in reply to Giorgos Link to this post

    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
  7. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 25 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  8. Giannis
    Giannis avatar
    2 posts
    Member since:
    Mar 2014

    Posted 26 Mar 2014 in reply to Magdalena Link to this post

    Magdalena your solution solves our problem! thank you very much!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017