Issue with the drop down element position of RadComboBox inside RadWindow.

[Shinu]

Hi,

I have come across a strange behavior with the RadWindow control. I added a RadComboBox in the ContentTemplate of a RadWindow. On clicking the RadComboBox the drop down opens and if I click the Close button of the RadWindow without selecting any item, the RadWindow gets closed but the drop down element is still visible to the user and items can be selected.

Another issue is I open the RadWindow and click the Maximize button in the title bar and the RadWindow gets maximized. Now when the RadComboBox is clicked, the drop down element is not visible to the user. Once the maximized window is closed (even Minimized), the drop down element can be seen in the corresponding position in the screen where the RadComboBox is rendered inside the RadWindow. The user is able to select any item from the drop down element. This issue can be replicated with any RadControl(any version) that has a drop down element such as RadDropDownList, RadDropDownTree.

Here is the code I tried.

ASPX:

<telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="RadButton1">
    <ContentTemplate>
        <br />
        <br />
        <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Item A" />
                <telerik:RadComboBoxItem runat="server" Text="Item B" />
                <telerik:RadComboBoxItem runat="server" Text="Item C" />
            </Items>
        </telerik:RadComboBox>
    </ContentTemplate>
</telerik:RadWindow>
<telerik:RadButton ID="RadButton1" runat="server" Text="Open RadWindow">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientSelectedIndexChanged(sender, args) {
        alert("OnClientSelectedIndexChanged Fired");
    }
</script>

I took a sample video of this strange behavior and you can find it here.

Thanks,
Shinu.

[Marin Bratanov]

Hi Shinu,

This is the expected behavior, in both cases:
1. you get two popups (i.e., div elements) that are direct children of the form, moving/hiding one is not bound to move/hide the other. You can see this by inspecting the HTML of the page. You can hide their dropdowns when RadWindow closes (i.e., in its OnClientClose event):

function closeCombos(sender, args) {
    var combos = $telerik.$(".RadComboBox", sender.get_contentElement;
    combos.each(function (index, elem) {
        if (elem.control && elem.control.hideDropDown)
            elem.control.hideDropDown();
    });
}

2. A maximized RadWIndow gets a really high z-index by default (100 000), so the combo's dropdown hides behind it. You can either increase the combobox's dropdown z-index, or set the ShowOnTopWhenMaximized property of the RadWindow to false.

Regards,
Marin Bratanov
Telerik

[Shinu]

Hi Marin,

The drop down position is still the same as shown in the attached screenshot if I minimize the maximized RadWindow after clicking the RadComboBox. If there is a solution that is available out of the box to fix these issues, it will be much helpful to the customer.

Thanks,
Shinu.

[Marin Bratanov]

Hello Shinu,

If you want to handle minimize, you can use OnClientCommand, check the get_commandName() from the event arguments object and execute the same logic that I showed with OnClientClose.

An OOB solution is hardly possible, because RadWindow must not modify its contents. In some cases such a popup may be desireable by the developer, or custom/third party controls or widgets may be present and there is no way RadWindow can know what they are, how to find them and how to hide them.


Regards,
Marin Bratanov
Telerik

[CP]

I have a Radwindow which has 3 DropDownLists which all leave the drop down open after clicking the close icon. The script you gave seems like the solution but I don't understand how it works. I changed the ".RadComboBox" to .RadDropDownList" and debugged my page. I can see the script called and my var appears to have details of the 3 Drop downs but then nothing else happens. I assume that the .each will look at each control and perform the action but where does "index" and "elem" come from ??

Kyle

[Marin Bratanov]

Hello Kyle,

What my script does is the following:

1. use jQuery to get all <div> elements over which a RadComboBox is initialized
2. it uses the control property of the DOM object because this is where MS AJAX stores a reference to the actual client-side object of the control: http://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference.
3. performs some defensive checks to avoid errors
4. calls the hideDropDown method of the RadComboBox if it exists
5. the index and element arguments are provided by the jQuery.each() method: http://api.jquery.com/jquery.each/.

So, to make this work for RadDropDownList, you need to:

• change the class to RadDropDownList
• look for the closeDropDown method RadDropDownList offers: http://docs.telerik.com/devtools/aspnet-ajax/controls/dropdownlist/client-side-programming/objects/raddropdownlist-object.

Here is an example

<script>
    function closeCombos(sender, args) {
        var combos = $telerik.$(".RadDropDownList", sender.get_contentElement);
        combos.each(function (index, elem) {
            if (elem.control && elem.control.closeDropDown)
                elem.control.closeDropDown();
        });
    }
</script>
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientClose="closeCombos">
    <ContentTemplate>
        <telerik:RadDropDownList runat="server" ID="rddl1">
            <Items>
                <telerik:DropDownListItem Text="1" />
                <telerik:DropDownListItem Text="2" />
                <telerik:DropDownListItem Text="3" />
            </Items>
        </telerik:RadDropDownList>
    </ContentTemplate>
</telerik:RadWindow>

Regards,

Marin Bratanov
Telerik