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

6 posts, 0 answers
  1. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2013 Link to this post

    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.
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2013 Link to this post

    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.
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 21 Nov 2013 Link to this post

    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.
  6. CP
    CP avatar
    8 posts
    Member since:
    May 2015

    Posted 18 May in reply to Marin Bratanov Link to this post

    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

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 May Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017