Problem: RadComboBox inside ItemTemplate of RadMenuItem

[Kris Ivanov]

Hi,
Code Example:

<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="RadMenuItem1">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" Style="z-index: 8001;">
                            <Items>
                                <telerik:RadComboBoxItem Text="RadComboBoxItem1" />
                                <telerik:RadComboBoxItem Text="RadComboBoxItem2" />
                                <telerik:RadComboBoxItem Text="RadComboBoxItem3" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

The problem occurs when putting RadComboBox inside ItemTemplate of RadMenuItem.
 
When user activates the menu item and then activates the dropdown, the selection pane shows, as the user attempts to select from the list of the dropdown the menu retrieves leaving just the selection pane open.

The fix would be in my opinion to make sure menu dropdown does not retreat when mouse is still over any of the child elements.

Thanks,
Kris

[Paul]

Hi Kris Ivanov,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClosing="itemClosing">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Item 1" Value="0">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="item 1 1" />
                    <telerik:RadMenuItem runat="server" Text="test">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientDropDownOpening="dropDownOpening"
                                OnClientDropDownClosed="dropDownClosed" OnClientSelectedIndexChanged="dropDownClosed">
                                <Items>
                                    <telerik:RadComboBoxItem Text="item 1" />
                                    <telerik:RadComboBoxItem Text="item 2" />
                                    <telerik:RadComboBoxItem Text="item 3" />
                                </Items>
                            </telerik:RadComboBox>
                        </ItemTemplate>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    <script type="text/javascript">
        var shouldClose = false;

        function dropDownOpening(sender, args) {
            shouldClose = true;
        }

        function itemClosing(sender, args) {
            args.set_cancel(shouldClose);
        }

        function dropDownClosed(sender, args) {
            shouldClose = false;
        }
    </script>

    </form>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kris Ivanov]

Thank you for the solution.

I was hoping I did not have to do that for each RadComboBox in the ItemTemplate, but never the less it is working solution to the problem.

[Seth]

How can this also be accomplished using a RadSkinManager instead of a RadComboBox?

[Regeesh Joseph]

Hai,

These are all for old versions. What is the code for Q1 2011? Sorting the forum based on version number would be helpful as there are lot of  differences in supporting properties between different versions.