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

RadMenu ClickToOpen

2 Answers 63 Views
Menu
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 20 Apr 2011, 10:15 PM
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>

2 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 25 Apr 2011, 01:41 PM
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.
0
John
Top achievements
Rank 1
answered on 25 Apr 2011, 03:58 PM
Thanks for the suggestion Cori.  I will try that.
Tags
Menu
Asked by
John
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
John
Top achievements
Rank 1
Share this question
or