RadMenu ClickToOpen

[John]

Hi there,

I am having some difficulties getting the functionality I desired using the RadMenu widget.

Here is the functionality I would like to achieve:
1) I have a repeater for each "row" of information
2) Each row has 1 menu item with 6 sub menu items
3) Clicking the 1 menu item, it expands the 6 sub menu items
4) When selecting a sub menu item, it validates some input and calls a server side method.  If the validation fails, it stays on the page.

Pretty simple, however, I am running into the case where I have everything mentioned but I can click and expand multiple menu items.

//to not expand on mouse over
function OnClientMouseOverHandler(sender, eventArgs) {

    if (eventArgs.get_item().get_text() == 'Add') {

        sender.set_clicked(false);

    }

}

//to close the menu only if a sub menu is clicked
function OnClientItemClickedHandler(sender, eventArgs) {

     var item = eventArgs.get_item();

     if (item.get_text() == 'Add') {

         eventArgs.set_cancel(true);

     } else {

        sender.close();

     }

}

 

//if sub menu is clicked, validate the field or if menu is clicked, expand the sub menu
//if input is invalid or menu is clicked, set cancel to stop a postback
function OnClientItemClickingHandler(sender, eventArgs) {

    var item = eventArgs.get_item();

    if (item.get_text() != 'Add') {

        ResetQuantityStyles(sender._element);

        var parent = sender._element.parentNode;

 

        while (parent.nodeName != 'TR') {

            parent = parent.parentNode;

        }

        var list = parent.getElementsByTagName('input');

        var i = 0;

        for (i = 0; i < list.length; i++) {

            var txtQuantity = list[i];

            if (txtQuantity.id.indexOf('txtQuantity') > -1) {

                if (txtQuantity.value == '') {

                    txtQuantity.style.background = 'pink';

                    sender.close();

                    eventArgs.set_cancel(true);

                }

                break;

            }

        }

    }

    else

    {

        item.open();

        eventArgs.set_cancel(true);

    }

}

 

function ResetQuantityStyles(element) {

    var parent = element.parentNode;

 

    while (parent.nodeName != 'TABLE') {

        parent = parent.parentNode;

    }

    var list = parent.getElementsByTagName('input');

    var i = 0;

    for (i = 0; i < list.length; i++) {

        var txtQuantity = list[i];

        if (txtQuantity.id.indexOf('txtQuantity') > -1) {

            txtQuantity.style.background = '';

        }

    }

}

And my tag looks like this

<telerik:RadMenu runat="server" ID="rmAddIngredient" Visible="false"
    OnClientItemClicking="OnClientItemClickingHandler"
    OnClientMouseOver="OnClientMouseOverHandler"
    OnClientItemClicked="OnClientItemClickedHandler"
    OnItemClick="rmAddIngredient_Click" ClickToOpen="true">
    <Items>
        <telerik:RadMenuItem Text="Add">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Breakfast" Value="1"></telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Morning Snack" Value="2"></telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Lunch" Value="3"></telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Afternoon Snack" Value="4"></telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Dinner" Value="5"></telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Evening Snack" Value="6"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

[Cori]

Hello John,

If I'm understanding this correctly, you are creating 6 RadMenu controls using a Repeater. If that is the case, I can see why you're able to click and expand multiple menu items, since they're not part of the same RadMenu control, thus the reason they can all be opened at the same time. You would need to add some more logic in your click handler to check if the other menus are opened and collapse them.

I hope that helps.

[John]

Thanks for the suggestion Cori.  I will try that.