Telerik RadMenu to expand only on mouse over and not on click

Question

I have a Telerik radmenu with expanded item menu. (see image below)

The user can either:

• Hover the menu, a submenu is displayed, the user can then click on the submenu to perform the task.

OR

• Click on the radmenu and a task is performed, (ie. save the page). This is used as a shortcut.

At the moment when the user is clicking or hovering on the radmenu, the submenu is displayed. But I would like to disable the submenu when the user click on the menu.

Which mean, that the user either hover the menu, and open the submenu

OR

Click on the menu and performed the action associated, no submenu is displayed.

Thank you for your help

This is the code (ascx and ascx.cs) used:

ascx:

<telerik:RadMenu ID="mnRightMenu" runat="server" Skin="Sapphire" EnableEmbeddedSkins="false" ExpandDelay="700" ClickToOpen="false"
OnClientMouseOut="OnClientMouseOut" OnItemClick="mnQuestion_MenuItemClick"
EnableScreenBoundaryDetection="false" GroupSettings-OffsetY="-10">
    <DefaultGroupSettings ExpandDirection="Left" />
</telerik:RadMenu>

<script type="text/javascript">
    function OnClientMouseOut(sender, args) {
        args.get_item().close();
    }
</script>

ascx.cs:

protected void mnQuestion_MenuItemClick(object sender, RadMenuEventArgs e)
        {
            string a = e.Item.Menu.ItemType.ToString();
            MenuIndex = e.Item.Index + 1;

            if (e.Item.Value.Contains("_item"))
                MenuName = e.Item.Text;
            else
                MenuName = e.Item.Value;

            RadMenuEventHandler handler = MenuSelected;
            if (MenuSelected != null)
                handler(sender, e);
        }

        public void PopulateSubMenu()
        {
            DTO.MarkingVal mv = new DTO.MarkingVal();

            BLL.Right_Menu R = new BLL.Right_Menu();
            DTO.RightMenuList RL = new DTO.RightMenuList();

            BLL.QuestionMenu Q = new BLL.QuestionMenu();
            DTO.QuestionMenuList QL = new DTO.QuestionMenuList();

            BLL.PageMenu P = new BLL.PageMenu();
            DTO.PageMenuList PL = new DTO.PageMenuList();

            mv.OrgID = this.OrgID;
            mv.AssessID = this.AssessID;
            mv.MarkerID = this.MarkerID;
            mv.AppID= this.AppID;
            mv.MAppID = this.MAppID;
            mv.AssessPageNo = this.AssessPageNo;

            RL = R.Select(MenuType);

            QL = Q.Select(mv);

            PL = P.Select(mv);

            this.mnRightMenu.Items.Clear();
            int n= 0;

            foreach(DTO.RightMenu r in RL)
            {
                string fontFormat = "<center class='Name_icon'></center>";
                this.mnRightMenu.Items.Add(new RadMenuItem(r.Text));
                RadMenuItem item = this.mnRightMenu.Items[n];
                item.Value = r.Value;
                item.ToolTip = r.ToolTip;
                item.NavigateUrl = "";
                item.Height=Unit.Pixel(40);

                if (r.IsImage == true)
                    item.ImageUrl = r.ImageURL;

                item.Attributes.Add("IsImage", r.IsImage.ToString());
                item.Attributes.Add("IsFont", r.IsFont.ToString());
                item.Attributes.Add("HasSubMenu", r.HasSubMenu.ToString());
                item.Attributes.Add("onclick",SaveAnnotation);

                if (r.HasSubMenu==true)
                {
                    string menuName=string.Empty;
                    if (item.Value == "Menu")
                    {
                        item.Items.Clear();

                        for (int j = 0; j <= 5; j++)
                        {
                            switch (j)
                            {
                                case 0:
                                    menuName = "Home";
                                    break;
                                case 1:
                                    menuName = "Marking list";
                                    break;
                                case 2:
                                    menuName = "Marking summary";
                                    break;
                                case 3:
                                    menuName = "Save";
                                    break;
                                case 4:
                                    menuName = "Open student's script";
                                    break;
                                case 5:
                                    menuName = "Clear comment bank";
                                    break;
                                default:
                                    menuName = "";
                                    break;
                            }
                            item.Items.Add(new RadMenuItem(menuName));
                            item.Items[j].Value = r.Value + "_item";
                            item.Attributes.Add("IsSubMenu", true.ToString());
                            item.Items[j].Height = Unit.Pixel(25);
                            if (menuName == "Clear comment bank")
                            {
                                string msg = "are you sure you want to clear the bank. All comments (except favorite comments) will be removed from the bank for this question/page";
                                item.Items[j].Attributes.Add("onclick", "javascript: SaveAnnotation; var answer = confirm('" + msg + "'); document.getElementById('" + lblConfirm.ClientID + "').Text = answer;return answer");
                            }
                            else
                                item.Items[j].Attributes.Add("onclick", SaveAnnotation);
                        }
                    }
                    else if (item.Value == "Question")
                    {
                        if (QL.Count > 1)
                        {
                            item.Items.Clear();
                            for (int i = 1; i <= QL.Count + 1; i++)
                            {
                                if (i <= QL.Count)
                                {
                                    DTO.QuestionMenu m = QL.Find((DTO.QuestionMenu QuestionMenu) => QuestionMenu.AssessPageOrder == i);
                                    item.Items.Add(new RadMenuItem(m.QuestionNo.ToString()));
                                    item.Items[i - 1].Value = r.Value + " " + (i).ToString();
                                    if (m.IsFlagged == true)
                                        item.Items[i - 1].ImageUrl = "../../App_Themes/Default/Images/Buttons/btnFlag.png";

                                }
                                else if (i > QL.Count)
                                {
                                    item.Items.Add(new RadMenuItem("General feedback"));
                                    item.Items[i - 1].Value = "Feedback";
                                }
                                item.Attributes.Add("IsSubMenu", true.ToString());
                                item.Items[i - 1].Attributes.Add("onclick", SaveAnnotation);
                                item.Items[i - 1].Height = Unit.Pixel(25);
                            }
                        }
                    }
                    else if (item.Value == "User")
                    {
                        item.Items.Clear();
                        for (int j = 0; j <= 1; j++)
                        {
                            if (j == 0)
                                menuName = "Previous student";
                            else
                                menuName = "Next student";

                            item.Items.Add(new RadMenuItem(menuName));
                            item.Items[j].Value = r.Value + "_item";
                            item.Attributes.Add("IsSubMenu", true.ToString());
                            item.Items[j].Height = Unit.Pixel(25);
                            item.Items[j].Attributes.Add("onclick", SaveAnnotation);
                        }
                    }
                    }
                    n = n + 1;
                }
            }

Answer 1

I use the following code. The menu expands on hover. The user can click the menu item to navigate to an URL. You can customize to fit your needs.

<telerik:RadMenuItem Text="Logs" Value="logs">
    <Items>
        <telerik:RadMenuItem Text="User Session Logs" Value="user_session" NavigateUrl="<URL>">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenuItem>