This is a migrated thread and some comments may be shown as answers.

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

5 Answers 299 Views
Window
This is a migrated thread and some comments may be shown as answers.
Shinu
Top achievements
Rank 2
Shinu asked on 19 Nov 2013, 01:51 PM
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.

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 20 Nov 2013, 12:52 PM
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
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 the blog feed now.
0
Shinu
Top achievements
Rank 2
answered on 21 Nov 2013, 04:09 AM
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.
0
Marin Bratanov
Telerik team
answered on 21 Nov 2013, 12:48 PM
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
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 the blog feed now.
0
CP
Top achievements
Rank 1
Iron
answered on 18 May 2016, 11:55 AM

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

0
Marin Bratanov
Telerik team
answered on 19 May 2016, 06:21 AM

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:

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Window
Asked by
Shinu
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Shinu
Top achievements
Rank 2
CP
Top achievements
Rank 1
Iron
Share this question
or