RADMenu Similar to RadToolbar

7 posts, 0 answers
  1. Suraj
    Suraj avatar
    14 posts
    Member since:
    Feb 2008

    Posted 22 Feb 2012 Link to this post

    Is there a way to get the same look and feel of radtoolbar for the first level of menu items? What I mean is to have Images on the top of text with proper alignment. In the drop downs I can live with images on the side. I saw a reply to similar question in the thread http://www.telerik.com/community/forums/aspnet/toolbar/radtoolbar-dopdown-menu.aspx. This fix will not work for me. What I really want to achieve is posted in the picture

    Suraj
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Feb 2012 Link to this post

    Hi Suraj,

    In general the appearance that you need can be achieved using css class properties and classes - you can increase the width and height of the menu items and apply different background-image. Here you can refer to more detailed information on the different css classes that are applied to the Radmenu control. Please keep in mind that this is a very custom scenario that we currently do not provide support for.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Suraj
    Suraj avatar
    14 posts
    Member since:
    Feb 2008

    Posted 27 Feb 2012 Link to this post

    Hello Kate,
    The URL you mentioned is not working. Can you provide me with the correct URL?
    Regards
    Suraj
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Feb 2012 Link to this post

    Hello Suraj,

    Below you can find the correct url:
    http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-selectors.html

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Suraj
    Suraj avatar
    14 posts
    Member since:
    Feb 2008

    Posted 01 Mar 2012 Link to this post

    Thanks for the url it was very helpful. I was able to mimic most of the parts except some few issues. I would like to get the separator working correctly. As you can see in the attached demo the separator is shown only half way thru. Let me know if you can help me with this issue.

    Please find the attachment for the demo project.

    Oh I am unable to attach project files. Is there a possibility that I can email you the files?
    Suraj
  7. Suraj
    Suraj avatar
    14 posts
    Member since:
    Feb 2008

    Posted 01 Mar 2012 Link to this post

    Hello
    Please see the code below which I have used mentioned in the previous post. You may want to put the pngs to menu directory or change the path appropriately.
    One more thing to note is if I use a skin everything will get distorted. I am not sure why this happens
    Let me know what you find
    Regards
    Suraj

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
        <head id="Head1" runat="server">
            <title>
                Telerik Menu Sample
            </title>
            <style type="text/css">
                body {
                background-image:url(menu/PageBg.png);
                }
                html, body {
                height:100%;
                margin: 0;
                padding: 0;
                border: none;
                text-align: center;
                }
                #tblPrismMain {
     
                margin: 0 auto;
                text-align: left;
                vertical-align: middle;
                width: 100%;
     
                }
                .divMenu
                {
                width:99.5%;height:60px;
                margin-left:3px;
                background-image:url(menu/bg.png);
                }
     
                .divFooter
                {
                width:99.5%;height:20px;
                margin-left:3px;
                background-image:url(menu/bg.png);
                }
                .divContent
                {
                width:99%;
                background-color:#e4e9fd;
                margin-left:5px;
                overflow-y:auto;
                }
     
     
            </style>
            <style  type="text/css">
                .radMenuItem1
                {
                font-family:Tahoma !important;
                font-size:11px !important;
                font-weight:normal !important;
                }
                a.radMenuItem1 span.rmText
                {
                display: block;
     
                margin-left: 0px;
                margin-top: 0px;
                position: relative;
                width: 0;
                z-index: 1;
                }
            </style>
             
            <style type="text/css">
     
                div.RadMenu_Office2007Big
                {
                padding:18 0 0 0;
                text-align:right;
                }
                .myClass .rmText
                {
                font-family:Tahoma !important;
                font-size:11px !important;
                line-height:normal !important;
                font-variant:normal !important;
                text-align:center  !important;
                padding-top:0 !important;
                padding-bottom:0 !important;
                padding-left:2px !important;
                padding-right:2px !important;
                display:block !important;
                float:none !important;
                }
                .myClass .rmLeftImage
                {
                text-align:center !important;
                margin-left:auto !important;
                margin-right:auto !important;
                margin-top:0px !important;
                padding-bottom:0px  !important;
                line-height:0px !important;
                display:block !important;
                float:none !important;
                }
                .rmItem rmSeparator
                {
                height:40px !important;
                }
                .radMenuSeparator
                {
                padding-left:1px !important;
                background-color:Gray !important;
                width:1px !important;
                background-image:url(menu/bg.png) !important;
                height:50px !important;
                }
            </style>
            <script>
                        function setContentWidth()
                        {
                        var bodyHeight = document.body.offsetHeight;
                        document.all("tblPrismMain").height = bodyHeight;
                var trContentHeight = document.all("trContent").offsetHeight - 30;
                document.getElementById("divPrismContent").style.height = trContentHeight + "px";
                }
            </script>
        </head>
        <body onload="setContentWidth()">
            <form id="form1" runat="server">
                <asp:ScriptManager ID="sc" runat="server"></asp:ScriptManager>
                <table id="tblPrismMain" cellpadding="0" cellspacing="0"  border=0>
                    <tr>
                        <td>
                            <div id="backgrounds" runat="server" class="divMenu">
                                <table border="0" width="100%" cellpadding="0" cellspacing="0" align="right">
                                    <tr>
     
                                        <td >
                                            <table align="right" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td style="padding-right:50px;padding-top:6px;">
                                                        <telerik:RadMenu ID="radMenu" runat="server" Visible="true" Font-Names="Tahoma" Font-Size="11px"  CssClass="Office2007RootItem"  ClickToOpen="true" EnableOverlay="true" EnableShadows="true">
     
                                                            <Items>
                                                                <telerik:RadMenuItem Text="Dashboard"  ImageUrl="menu\dash.png" AccessKey="P" CssClass="myClass"  BorderWidth=0>
                                                                    <Items>
                                                                        <telerik:RadMenuItem Text="Procedure" runat="server"></telerik:RadMenuItem>
                                                                    </Items>
                                                                </telerik:RadMenuItem>
                                                                <telerik:RadMenuItem IsSeparator="true" CssClass="radMenuSeparator"  Visible="false"></telerik:RadMenuItem>
                                                                <telerik:RadMenuItem Text="Procedure"  ImageUrl="menu\Procedures.png"  CssClass="myClass" Width="60px">
                                                                    <Items>
                                                                        <telerik:RadMenuItem Text="Procedure" runat="server"></telerik:RadMenuItem>
                                                                    </Items>
                                                                </telerik:RadMenuItem>
                                                            </Items>
                                                        </telerik:RadMenu>
     
                                                    </td>
                                                </tr>
                                            </table>
                                            <telerik:RadToolBar ID="RadToolBar1" runat="server"     skin="Web20"  EnableRoundedCorners="true" EnableShadows="true" Visible="false">
                                                <Items>
                                                    <telerik:RadToolBarButton CssClass="CustomItem"   Text="Dashboard" AccessKey ="D"  ImageUrl="menu\dash.png"  ImagePosition="AboveText"  ></telerik:RadToolBarButton>
                                                    <telerik:RadToolBarButton IsSeparator="true" Visible="false"></telerik:RadToolBarButton>
                                                    <telerik:RadToolBarButton CssClass="CustomItem" Text="Procedure" AccessKey="P" ImageUrl="menu\Procedures.png"  ImagePosition="AboveText" ></telerik:RadToolBarButton>
                                                </Items>
                                            </telerik:RadToolBar>
     
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr id="trContent" height="100%">
                        <td>
                            <div id="divPrismContent" runat="server" class="divContent">dd</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="PrismFooter" runat="server" class="divFooter"></div>
                        </td>
                    </tr>
                </table>
                <asp:RoundedCornersExtender ID="rce" runat="server"
                                                                        TargetControlID="backgrounds"
                                                                        Radius="50"
                                                                        Corners="BottomLeft,BottomRight" BorderColor="Black"  />
                <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
                                                                        TargetControlID="PrismFooter"
                                                                        Radius="50"
                                                                        Corners="All" BorderColor="Black"  />
                <asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server"
                                                                        TargetControlID="divPrismContent"
                                                                        Radius="20"
                                                                        Corners="All" BorderColor="Black"  />
            </form>
        </body>
    </html>
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Mar 2012 Link to this post

    Hello Suraj,

    In order for the separator to appear as expected you will also need to alter the sprite image that is applied to the RadMenu control. Please refer to the below article where it is explained in details how to achieve that:
    http://www.telerik.com/help/aspnet-ajax/menu-appearance-creating-custom-skins-sprite.html

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017