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

Radmenu Child Item not displaying inside RadSplitter

2 Answers 23 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ei Wai
Top achievements
Rank 1
Ei Wai asked on 01 Aug 2014, 06:29 AM
Hi ,

I tried to place my menu inside radsplitter. Everything worked fine if I don't put child menu items. But if I put child menu item, it don't appear even if I hover the mouse over parent item. Below is the code I use. I tried on chrome and mozilla. Both not working. Can anyone help me? And I put the below code inside masterpage. I am using telerik version 2014.1.403.40 


<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="99.8%"
    Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="none" Height="50px">
        <telerik:RadMenu ID="settingMenu" runat="server" EnableEmbeddedSkins="false" Width="100%"
            EnableSelection="true" Skin="MySkin">
            <Items>
                <telerik:RadMenuItem runat="server" ImageUrl="~/Images/NEW.png" HoveredImageUrl="~/Images/NEW.png"
                   >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="User Account Settings">
                    <GroupSettings ExpandDirection="Down" />
                    <Items>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Acc.aspx" Text="Account">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="AccessRights.aspx" Text="Access Rights">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Modules.aspx" Text="Modules">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Plan" NavigateUrl="Schedule.aspx">
                </telerik:RadMenuItem>
                  
            </Items>
        </telerik:RadMenu>
    </telerik:RadPane>
    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
        <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true" ResizeMode="EndPane"
            OnClientLoaded="SplitterLoaded">
            <telerik:RadPane ID="LeftPane" runat="server" Width="60" MinWidth="60" MaxWidth="60">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward"
                BackColor="Red" />
            <telerik:RadPane ID="ContentPane" runat="server" Width="80%" Scrolling="None">
                <telerik:RadSplitter ID="NestedSplitter2" runat="server" LiveResize="true" Orientation="Horizontal">
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="ContentPane2" runat="server" Scrolling="None">
                        <div id="quotescointainer1" class="quotescointainer">
                            <asp:Panel ID="pnlMain" runat="server">
                                <asp:ContentPlaceHolder ID="cphContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </asp:Panel>
                        </div>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>


Warmest regards,
Ei Wai

2 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 05 Aug 2014, 03:16 PM
Hello,

Please set overflow: visible to the parent element for the RadMenu control. In your case this will be the RadPane with id "RadPane1" that holds the RadMenu control. An easy way to solve this problem will be to apply a custom class to that RadPane and set its style as shown below:
//markup code
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="99.8%"
    Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="none" Height="50px" CssClass="customClass">
        <telerik:RadMenu ID="settingMenu" runat="server" EnableEmbeddedSkins="false" Width="100%"
            EnableSelection="true" >
            <Items>
                <telerik:RadMenuItem runat="server" ImageUrl="~/Images/NEW.png" HoveredImageUrl="~/Images/NEW.png"
                   >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="User Account Settings">
                    <GroupSettings ExpandDirection="Down" />
                    <Items>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Acc.aspx" Text="Account">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="AccessRights.aspx" Text="Access Rights">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" NavigateUrl="Modules.aspx" Text="Modules">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Plan" NavigateUrl="Schedule.aspx">
                </telerik:RadMenuItem>
                   
            </Items>
        </telerik:RadMenu>
    </telerik:RadPane>
    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
      ...........
    </telerik:RadPane>
</telerik:RadSplitter>

//css
.customClass {
    overflow:visible !important;
}

Regards,
Boyan Dimitrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ei Wai
Top achievements
Rank 1
answered on 06 Aug 2014, 01:18 AM
Thank you so much. That really do work.
Tags
Menu
Asked by
Ei Wai
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Ei Wai
Top achievements
Rank 1
Share this question
or