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

[Tina]

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

[Cat Cheshire]

You can handle the OnClientClose window event and close the combo dropdown:

function OnClientclose(sender, eventArgs)
{
   var combo = $find("<%= RadComboBox1.ClientID %>");
   combo.hideDropDown();
}

[Tina]

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

[Princy]

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.

[Tina]

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

[Ivan Zhekov]

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

[Arun]

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

[Marin Bratanov]

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