DropDown of Radcombo doesnt collapse on RadWindow Behaviors(close,min,move)

8 posts, 0 answers
  1. Tina
    Tina avatar
    4 posts
    Member since:
    Feb 2012

    Posted 10 Apr 2012 Link to this post

    Hello Telerik,

    In my application I have RadComboBox on my RadWindow.
    My RadWindow has common behavior like min,max,close,move.
    Now, when I open radCombobox on RadWindow and without clicking anywhere on the page when I Minimize or Move RadWindow, the dropdown is not collapsing nor moving along with RadWindow.Instead It is getting stuck on the same place.

    Also, When DropDown is open and when I try to close RadWindow,the dropdown will not collapse or not getting hide.The dropdown portion of RadCombo will be seen on the aspx page.

    I am setting these properties for RadWindow.

     public RadWindow()
            {
                this.Behaviors = WindowBehaviors.Close | WindowBehaviors.Minimize | WindowBehaviors.Maximize | WindowBehaviors.Move;
                this.Modal = true;
                this.EnableShadow = true;
                this.VisibleStatusbar = false;
                this.ReloadOnShow = true;
                this.ShowContentDuringLoad = false;
                this.ShowOnTopWhenMaximized = false;
            }

    Am I missing Something for RadComboBox?

    I have attached the pic here for your reference.

    Thanks in advance
    Tina


  2. Cat Cheshire
    Cat Cheshire avatar
    128 posts
    Member since:
    Jun 2010

    Posted 16 Apr 2012 Link to this post

    You can handle the OnClientClose window event and close the combo dropdown:
    function OnClientclose(sender, eventArgs)
    {
       var combo = $find("<%= RadComboBox1.ClientID %>");
       combo.hideDropDown();
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tina
    Tina avatar
    4 posts
    Member since:
    Feb 2012

    Posted 16 Apr 2012 Link to this post

    Hi Cat,

    Thanks for reply.As I said in my previous post that Dropdown is not getting collapsed on Window behaviors like minimize and move too. If I move my radwindow keeping Combobox open then dropdown is not moving along with Window.
    and same with Window Minimize.If I minimize radWindow then in that case dropdown is not collapsing.

    I understand that I can handle the OnClientClose window event and close the combo dropdown.But that will be just when I close the radWindow. Not for other behaviors of RadWindow.

    I have attached screen shot for your reference. 

    Please let me know if you have some other approach.

    Thanks
    Tina
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Apr 2012 Link to this post

    Hi Tina,

    You can handle OnClientDragStart to close the dropdown while dragging and handle OnClientCommand to close the dropdown while minimizing.

    ASPX:
    <telerik:RadWindow ID="RadWindow1" runat="server"  OnClientDragStart="Comboclose" OnClientClose="Comboclose" OnClientCommand="Comboclose" >
       <ContentTemplate>
            <telerik:RadComboBox ID="RadComboBox1"  runat="server" >
                    <Items>
                        ............
                    </Items>
            </telerik:RadComboBox>
       </ContentTemplate>
    </telerik:RadWindow>

    JS:
    <script type="text/javascript">
     function Comboclose(sender, args)
      {
        var combo = $find("<%= RadComboBox2.ClientID %>");
        combo.hideDropDown();
      }
    </script>

    Regards,
    Princy.
  6. Tina
    Tina avatar
    4 posts
    Member since:
    Feb 2012

    Posted 17 Apr 2012 Link to this post

    Hello Princy,

    Thanks for your response.It seems to be a good option to handle combo close through Client-Side handlers but What if I have 50 Radwindows and in which I will have hundreds of combo box.Then I will end up writing hundreds of lines of code to just close combobox while moving or minimizing or closing radWindow.
    This is a common functionality and it is expected that if we move RadWindow then RadCombobox should also move along with Window.
    I hope Telerik have some solution for this issue.

    Thanks
    Tina
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 19 Apr 2012 Link to this post

    Hello, Tina.

    The drop down of the combobox is moved in the DOM of the parent document to ensure that it's always on top.

    That said, if you rad windows shows external pages, the drop down will be in that external page, so when you move the window, the dropdown will move as well.

    All the best,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Arun
    Arun avatar
    1 posts
    Member since:
    Jun 2016

    Posted 22 Jun Link to this post

    Hi Teleric,

    I am also facing the same issue as Tina faced. Can you fix my issue. I am sharing my screenshots

    To Tina-

      If you have fixed this issue please find me the solution

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 22 Jun Link to this post

    Hi Arun, Tina,

    The easiest solution is to use an aspx page instead of the ContentTemplate because it will have its own context, being hosted in an iframe, just as Ivan suggested.

    Otherwise, you can make the script more generic by getting the control reference from the DOM object: http://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference#using-plain-javascript-methods.

    You can read more about this here: http://www.telerik.com/support/kb/aspnet-ajax/window/details/dropdown-does-not-move-or-close-with-radwindow.

    Here is a generic example:

    <script>
        function hideDropdowns(container) {
            $telerik.$(".RadComboBox", container).each(function (index, elem) {
                if (elem && elem.control && elem.control.hideDropDown) {
                    elem.control.hideDropDown();
                }
            });
            $telerik.$(".RadDropDownList", container).each(function (index, elem) {
                if (elem && elem.control && elem.control.closeDropDown) {
                    elem.control.closeDropDown();
                }
            });
        }
        function hideDropdownsFromEvent(sender, args) {
            var shouldCloseDropDowns = !args.get_commandName;
            if (args.get_commandName) {
                var command = args.get_commandName();
                shouldCloseDropDowns = (command == "Maximize") || (command == "Minimize") || (command == "Restore");
            }
            if (shouldCloseDropDowns) {
                hideDropdowns(sender.get_contentElement());
            }
        }
    </script>
    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OpenerElementID="Button1"
        OnClientClose="hideDropdownsFromEvent" OnClientDragStart="hideDropdownsFromEvent" OnClientCommand="hideDropdownsFromEvent">
        <ContentTemplate>
            <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Open me and move/close the window" Width="250px">
                <Items>
                    <telerik:RadComboBoxItem Text="one" />
                    <telerik:RadComboBoxItem Text="two" />
                    <telerik:RadComboBoxItem Text="three" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadDropDownList runat="server" ID="RadDropDownList1" Width="250px">
                <Items>
                    <telerik:DropDownListItem Text="first" />
                    <telerik:DropDownListItem Text="second" />
                    <telerik:DropDownListItem Text="third" />
                </Items>
            </telerik:RadDropDownList>
        </ContentTemplate>
    </telerik:RadWindow>
    <asp:Button ID="Button1" Text="open the dialog" runat="server" />

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017