Radmenu Child Item not displaying inside RadSplitter

3 posts, 1 answers
  1. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 01 Aug 2014 Link to this post

    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. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 05 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ei Wai
    Ei Wai avatar
    56 posts
    Member since:
    Jul 2014

    Posted 05 Aug 2014 in reply to Boyan Dimitrov Link to this post

    Thank you so much. That really do work.
Back to Top