Hello everyone,
I've been trying to find a way to add my company's logo to the RadMenu, on the left side, just like we see on almost every website. You check the attached image to have a better idea about what do I exactly mean.
Thank you!
4 Answers, 1 is accepted
Hi Johnny,
Let me jump right to the point about the "Solving the empty drop-down for the logo item only" scenario.
I managed to run the provided code, thanks for it and found what is causing the dropdown to appear under the list item with the logo. In the code behind there is a For Each Loop that is giving on every List Item a sub-item (ItemTemp) that appends to the first element a dropdown:
For Each itm As RadMenuItem In RadMenu1.GetAllItems()
If itm.Level = 0 Then 'On Créer un item temporaire au niveau 1Dim ItemTemp As New RadMenuItem
ItemTemp.Value = itm.Value
ItemTemp.Text = "ItemTemp"
itm.Items.Add(ItemTemp)
End IfNextSo when you add another icon element it becomes the first element of the menu and it is expected to get this dropdown applied to it.
The options to fix it are:
- Tweak the code above to assign the sub-element to the second menu item or
- Use the provided OnClientItemOpening="ItemOpening" solution as shown below. This event will call a JavaScript function that takes the RadMenu event for an opening for a selected ListItem like an argument. Make a verification If there is a text inside the ListItem, if there is not we cancel the event of the element.
<script type="text/javascript">
function ItemOpening(menu, args) {
if (args.get_item().get_text() == "") {
args.set_cancel(true);
}
}<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Bootstrap" OnClientItemOpening="ItemOpening" OnClientItemOpened="itemOpened" ...
Rank 3
Bronze
Iron
Iron
Lovely, thank you! I have added that script and it works completely. I have not thought about that way at all, still kinda new to telerik. Thanks!
Furthermore, I thank you again for your patience, I know I should have made it easier for you to test my code by providing a database sample or something to speed the process up.
I believe that the issue is now solved, although there are no answers for me to mark it done from my side since all the responses were comments. ~ 5 stars customer service.
I wish you to have a nice day ahead.
Rank 1
Iron
Could be a better way, but I'd probably add a RadMenuItem that is specifically that image. In my experience, MOST of those logos redirect back to the homepage or index page.
Adding Images to RadMenuItems
Perhaps something like the below (first RadMenuItem in particular):
<telerik:radmenu id="RadMenu1" runat="server" skin="" flow="Horizontal">
<Items>
<telerik:RadMenuItem
ImageUrl="YouCompanyLogoURLHere.gif"
HoveredImageUrl="/index.aspx"
ToolTip="Home Or Your Company Name">
</telerik:RadMenuItem>
<telerik:RadMenuItem
ImageUrl="Images/Purchase.gif"
HoveredImageUrl="Images/PurchaseOver.gif"
ToolTip="Purchase">
<Items>
<telerik:RadMenuItem
ImageUrl="Images/Purchase/BuyNow.gif"
HoveredImageUrl="Images/Purchase/BuyNowOver.gif"
ToolTip="Buy Now" />
<telerik:RadMenuItem
ImageUrl="Images/Purchase/LicenseAgreement.gif"
HoveredImageUrl="Images/Purchase/LicenseAgreementOver.gif"
ToolTip="License Agreement" />
<telerik:RadMenuItem
ImageUrl="Images/Purchase/Policies.gif"
HoveredImageUrl="Images/Purchase/PoliciesOver.gif"
ToolTip="Policies" />
<telerik:RadMenuItem
ImageUrl="Images/Purchase/Upgrades.gif"
HoveredImageUrl="Images/Purchase/UpgradesOver.gif"
ToolTip="Upgrades" />
<telerik:RadMenuItem
ImageUrl="Images/Purchase/FAQ.gif"
HoveredImageUrl="Images/Purchase/FAQOver.gif"
ToolTip="Freqently Asked Questions" />
<telerik:RadMenuItem
ImageUrl="Images/Purchase/ContactSales.gif"
HoveredImageUrl="Images/Purchase/ContactSalesOver.gif"
ToolTip="Contact Sales" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:radmenu>
Rank 3
Bronze
Iron
Iron
Thanks for the quick response, Zack.
I am populating my rad menu dynamically from a database, however yes I can definitely manually add an item at the beginning before filling the rest of the rad menu. But I'll need to do that from code behind (VB).
Usually, if I wanted to add a text item, I would do this:
Dim item As RadMenuItem = New RadMenuItem("About Us")
RadMenu1.Items.Add(item)
How does it work for an image? Because not only will I need to add the image's path, but also the navigate URL property as well.
Thanks!
Hi Johnny,
The requested appearance can be achieved with a table where the logo is placed on the left cell and the menu in the right cell, with div elements positioned with CSS one next to the other, with flex or using the ImageUrl as suggested by Johnny.
Here is my proposal for implementing your request with a table:
- Create a table with one row;
- In this row, one cell will contain the logo and the other will contain the navigation bar;
- Set a class to the cell with the logo so you can manage to position it in the style.css file;
Here is the solution I'd like to propose:<style> .logo img { display: block; width: 100px; height: 100px; margin: 0 4em; } </style> <table> <tr> <td class="logo"> <img src="images/home.png" /> </td> <td> <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" CssClass="mainMenu" runat="server" ShowToggleHandle="true"> <Items> <telerik:RadMenuItem Text="Home" NavigateUrl="DefaultCS.aspx" /> <telerik:RadMenuItem Text="Products"> <GroupSettings Width="200px" /> <Items> <telerik:RadMenuItem Text="Chairs" NavigateUrl="DefaultCS.aspx?page=chairs" EnableImageSprite="true" CssClass="icon-chair"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Sofas" NavigateUrl="DefaultCS.aspx?page=sofas" EnableImageSprite="true" CssClass="icon-sofa"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Tables" NavigateUrl="DefaultCS.aspx?page=tables" EnableImageSprite="true" CssClass="icon-table"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Stores" NavigateUrl="DefaultCS.aspx?page=strores" /> <telerik:RadMenuItem Text="About" NavigateUrl="DefaultCS.aspx?page=aboutus" /> </Items> </telerik:RadMenu> </td> </tr> </table>
Hope you'll find the solution useful.
On a side note, if you'd like to set the ImangeUrl from the codebehind you can do it like this:
Dim item1 As RadMenuItem = New RadMenuItem()
item1.Text = "About Us"
item1.ImageUrl = "~/images/icon1.png"
RadMenu1.Items.Add(item1)
You can find more information at Working With Items at Server-side.
Rank 3
Bronze
Iron
Iron
Hi Valentin,
Thanks for the suggestions, I actually like the table idea a lot! However, before applying it I thought to try something out real quick, and it worked. I've actually used the codebehind example that you gave at the very end of your post, and it did work as I wanted. However, I still have one small issue, which is the following:
- When hovering over the image, I get a tiny empty drop-down menu. It is useless, and I was trying to get rid of it as well. It only happens to the first item that I'm manually adding before populating the radmenu from the Database. You can check this short GIF that I attached to understand what am I talking about exactly. https://imgur.com/a/Qg3CyH2
Thanks!
Rank 3
Bronze
Iron
Iron
I have also tried your table suggestion, however that did not work as the RadMenu is overlapping and hiding the logo and is appearing on top of it.
The only method that worked was adding the image as an item from codebehind, but still need to resolve the drop-down issue.
Thanks again.
Hi Johnny,
Let's review the two scenarios below:
- Empty dropdown issue - Since there isn't any shared sample code, from the gif I can assume that the logo is positioned inside the RadMenuItem with a few nested children, and this is the reason for empty tabs. You can remove the children, or just cancel the OnClientItemOpening client event of RadMenu to prevent the popup to show (menu to expand). Here is my solution:
<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" CssClass="mainMenu" runat="server" OnClientItemOpening="ItemOpening"> <Items> <telerik:RadMenuItem Text="Home" NavigateUrl="DefaultCS.aspx" /> <telerik:RadMenuItem Text="Products"> <GroupSettings Width="200px" /> <Items> <telerik:RadMenuItem Text="Chairs" NavigateUrl="DefaultCS.aspx?page=chairs" EnableImageSprite="true" CssClass="icon-chair"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Sofas" NavigateUrl="DefaultCS.aspx?page=sofas" EnableImageSprite="true" CssClass="icon-sofa"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Tables" NavigateUrl="DefaultCS.aspx?page=tables" EnableImageSprite="true" CssClass="icon-table"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Stores" NavigateUrl="DefaultCS.aspx?page=strores" /> <telerik:RadMenuItem Text="About" NavigateUrl="DefaultCS.aspx?page=aboutus" /> </Items> </telerik:RadMenu> </td> </tr> </table> <script type="text/javascript"> function ItemOpening(menu, args) { var status = $get("hdCurrentStatus"); var item = args.get_item(); if (status.value == "") args.set_cancel(true); else { item.get_item().getItem(0).set_text(status.value); } } </script> - About my proposition to use a Table, can you record a Fiddler Jam capture to reproduce and investigate why it is not working?
Kind Regards
Rank 3
Bronze
Iron
Iron
Hi again, Valentin.
Oh, okay. I have tried the code that you provided in a test project, and it worked. The logo is actually outside the rad menu (which I do not want), however it does look good. Thanks!
The reason why it did not work earlier for me in my original code is because my RadMenu is set to cover the whole page's width, left to right. Putting the logo in a table column outside it will cause it to be covered by the RadMenu.
However, what I want is the logo to be part of the RadMenu itself and not outside it, which can only be done if I add the logo as a RadMenuItem. I did and it is working as intended except the empty drop-down which I will explain.
I did not share my code because I am populating the RadMenu automatically depending on which user is logged in (admin/accountant/etc..), from a database using sqldatasource. I will share the code in the next comment to clarify things.
I only need to know how to add a "code" format to my text here just like you did with the code you sent me in the comment above. It's better than plain text of course.
Rank 3
Bronze
Iron
Iron
I have added a comment that includes my code, however it was not posted and said that it was submitted for review. In that case I believe you can see it from your end.
Below you will find a private youtube video link that I just uploaded, highlighting how the logo item that I manually added from the codebehind is showing a dropdown while the last item that I also added manually, is not showing anything. Is there a way to disable that dropdown for the first item only?
https://youtu.be/WhzZuAFPtqo
Rank 3
Bronze
Iron
Iron
Notes (my code comes below this section):
- The website is being made for a French company, hence why you will find some comments in French.
- As you can see on the master page, I am only filling the radmenu with 1 random item from the client side because it will all be deleted on the codebehind on Page_Load.
- The RadMenu is being populated from the codebehind from a table in a database. The menu is being populated correctly with all its childs and levels. No problem with that at all.
- The only 2 menu items that are being added are the first and the last. The first being the logo, and the last being the "log out" item. It's written in French though as "Quitter".
- If you hover over the last item, it does not show any drop-downs obviously because we only added the item without it having any childs.
- If you hover over the first item (the logo), it will show an empty drop-down. Not sure why, and I cannot cancel the drop-down for the entire menu because I need it for the rest of my items. This is my only problem: Solving the empty drop-down for the logo item only.
MasterPage.master
<%@ Master Language="VB" CodeFile="masterTest.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<!-- Icons. Uncomment required icon fonts -->
<link rel="stylesheet" href="../Bootstrap/assets/vendor/fonts/boxicons.css" />
<!-- Core CSS -->
<link rel="stylesheet" href="../Bootstrap/assets/vendor/css/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="../Bootstrap/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="../Bootstrap/assets/css/demo.css" />
<!-- Menu CSS -->
<link rel="stylesheet" type="text/css" href="../Bootstrap/assets/vendor/css/styles.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="../Bootstrap/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<!-- Helpers -->
<script src="../Bootstrap/assets/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the head section -->
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="../Bootstrap/assets/js/config.js"></script>
<%-- Sora Google Font --%>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600&display=swap" rel="stylesheet">
<%-- Arvo Font --%>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Sora:wght@500;600&display=swap" rel="stylesheet">
<%-- RaleWay Font --%>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Raleway:wght@600&display=swap" rel="stylesheet">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style>
.logo img {
display: block;
margin: 0 4em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptGlobalization="true"
EnableScriptLocalization="true">
</telerik:RadScriptManager>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:EU_BRESTServer%>"
SelectCommand="SELECT [Identifiant], [Libelle], [Parent], [Lienpage], ParentGlobal FROM [lobdjetBDD] WHERE ([NomUser] = @fonction) AND ParentGlobal is null AND Parent is null Order By ChapitreParentGlobal, ChapitreParent,ChapitreEnfant" >
<SelectParameters>
<asp:ControlParameter ControlID="hf_fonction" Name="fonction" PropertyName="Value" />
</SelectParameters>
</asp:SqlDataSource>
<asp:HiddenField ID="hf_fonction" runat="server" />
<div class="demo-container no-bg">
<div id="MegaDropDown">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%-- <table>
<tr>
<td class="logo">
<img src="../Bootstrap/assets/img/test_logo.png" />
</td>
<td>--%>
<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Bootstrap" OnClientItemOpened="itemOpened"
DataFieldParentID="Parent" DataNavigateUrlField="Lienpage" DataTextField="Libelle" DataFieldID="Identifiant" DataValueField="Identifiant"
EnableShadows="true" Flow="Horizontal" Width="100%" Height="60" CssClass="../Bootstrap/assets/vendor/css/styles.css"
AppendDataBoundItems="true" Style="z-index: 10; position: absolute; left: 0px;" >
<Items>
<%-- MENU 1 - Just to avoid keeping it empty. We are filling the RadMenu from the DataBase anyways --%>
<telerik:RadMenuItem Text="Administration" PostBack="false">
<ContentTemplate>
<div id="menu_admin" class="Wrapper" style="width: 435px;">
<h3>Categories</h3>
<telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Bootstrap" EnableTextHTMLEncoding="true">
<LevelSettings>
<telerik:SiteMapLevelSetting Level="0">
<ListLayout RepeatColumns="3" RepeatDirection="Vertical" />
</telerik:SiteMapLevelSetting>
</LevelSettings>
<Nodes>
<telerik:RadSiteMapNode NavigateUrl="#" Text="Furniture">
<Nodes>
<telerik:RadSiteMapNode NavigateUrl="#" Text="Tables & Chairs" ImageUrl="../Bootstrap/assets/img/charge.svg"/>
<telerik:RadSiteMapNode NavigateUrl="#" Text="Sofas" />
<telerik:RadSiteMapNode NavigateUrl="#" Text="Occasional" />
<telerik:RadSiteMapNode NavigateUrl="#" Text="Childerns" />
<telerik:RadSiteMapNode NavigateUrl="#" Text="Beds" />
</Nodes>
</telerik:RadSiteMapNode>
</Nodes>
</telerik:RadSiteMap>
</div>
</ContentTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
<%-- </td>
</tr>
</table>--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function itemOpened(s, e) {
if ($telerik.isIE8) {
// Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
$telerik.$("li", e.get_item().get_element())
.each(function () { this.style.cssText = this.style.cssText; });
}
}
</script>
</telerik:RadScriptBlock>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!-- Core JS -->
<!-- build:js assets/vendor/js/core.js -->
<script src="../Bootstrap/assets/vendor/libs/jquery/jquery.js"></script>
<script src="../Bootstrap/assets/vendor/libs/popper/popper.js"></script>
<script src="../Bootstrap/assets/vendor/js/bootstrap.js"></script>
<script src="../Bootstrap/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="../Bootstrap/assets/vendor/js/menu.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
<!-- Main JS -->
<script src="../Bootstrap/assets/js/main.js"></script>
<!-- Page JS -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
MasterPage.master.vb
Imports SiteWeb
Imports System.Data
Imports Telerik.Web.UI
Partial Class MasterPage
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dr As System.Data.SqlClient.SqlDataReader
Dim acd As New SiteWeb.AccesDonnees
If Not Page.IsPostBack Then
RadMenu1.Items.Clear()
Dim item As RadMenuItem = New RadMenuItem()
item.ImageUrl = "../Bootstrap/assets/img/test_logo.png"
item.NavigateUrl = "Index.aspx"
RadMenu1.Items.Add(item)
' hf_nomUtil.Value = Context.User.Identity.Name.ToString
dr = acd.RetournerDataReader("Select fonction FROM mdpassword WHERE login='adminintranet'", "EU_BREST")
dr.Read()
If dr.HasRows Then
If IsDBNull(dr("fonction")) = False Then
hf_fonction.Value = dr("fonction")
Else
hf_fonction.Value = "adminintranet"
End If
Else
hf_fonction.Value = "adminintranet"
End If
dr.Close()
SqlDataSource2.SelectCommand = "SELECT [Identifiant], [Libelle], [Parent], [Lienpage], ParentGlobal FROM [lobdjetBDD] WHERE ([NomUser] = @fonction) AND ParentGlobal is null AND Parent is null Order By ChapitreParentGlobal, ChapitreParent,ChapitreEnfant"
SqlDataSource2.DataBind()
RadMenu1.DataSource = SqlDataSource2
RadMenu1.DataBind()
'SelectCommand = "SELECT [Identifiant], [Libelle], [Parent], [Lienpage], ParentGlobal FROM [lobdjetBDDTest] WHERE ([NomUser] = @fonction) AND ([Parent] = @Parent) Order By ChapitreEnfant" >
'"SELECT [Identifiant], [Libelle], [Parent], [Lienpage], ParentGlobal FROM [lobdjetBDDTest] WHERE ([NomUser] = @fonction) AND ([ParentGlobal] = @ParentG) AND ([Parent] = @ParentG) AND [ChapitreEnfant] is Null Order By ChapitreParent"
For Each itm As RadMenuItem In RadMenu1.GetAllItems()
If itm.Level = 0 Then
'On Créer un item temporaire au niveau 1
Dim ItemTemp As New RadMenuItem
ItemTemp.Value = itm.Value
ItemTemp.Text = "ItemTemp"
itm.Items.Add(ItemTemp)
End If
Next
'On parcours le deuxieme niveau (1) du RadMenu
For Each itm As RadMenuItem In RadMenu1.GetAllItems()
If itm.Level = 1 Then
'On appel la fonction pour integrer le sitemap correspondant au niveau courant (que l'on repere grace à item.value)
Dim sitemap = CreateSiteMap(itm, itm.Value)
itm.Width = "550"
End If
Next
'RadMenu1.Items(1).Items(0).Width = "550"
item = New RadMenuItem("Quitter")
RadMenu1.Items.Add(item)
dr.Close()
End If
End Sub
Private Function CreateSiteMap(ByVal container As Control, ByVal Id As String) As RadSiteMap
Try
System.Diagnostics.Debug.WriteLine("id: " &Id)
Dim acd As New SiteWeb.AccesDonnees
'On créer le controle de type RadSiteMap
Dim SiteMap1 As New RadSiteMap
'On le configure comme souhaité
SiteMap1.ID = "SiteMapMenu"
SiteMap1.DataTextField = "Libelle"
'SiteMap1.ForeColor = System.Drawing.Color.FromName("Green")
SiteMap1.DataFieldID = "Identifiant"
SiteMap1.DataFieldParentID = "Parent"
SiteMap1.DataValueField = "Libelle"
SiteMap1.DataNavigateUrlField = "Lienpage"
'On Fais une requete pour récupérer les sous menu devant apparaitre dans le sitemap courant
SiteMap1.DataSource =
acd.RetournerDataReader("SELECT RTRIM(Identifiant) as Identifiant,RTrim(Libelle) As Libelle,RTrim(Parent) as Parent,RTRIM(Lienpage) as Lienpage,RTRIM(ParentGlobal) As ParentGlobal FROM lobdjetBDD WHERE NomUser = '" & hf_fonction.Value & "' AND (Parent = '" & Id & "' OR ParentGlobal = '" & Id & "' OR Identifiant = '" & Id & "') Order By ChapitreParentGlobal, ChapitreParent,ChapitreEnfant", "EU_BREST")
SiteMap1.DataBind()
'On configure les layout en fonction du level : niveau 1 sur 3 colonnes
Dim Niveau1 As New SiteMapLevelSetting
Niveau1.ListLayout.RepeatColumns = 2
Niveau1.Level = 1
Niveau1.Width = 500
'Niveau 2 sur 1 colonnes
Dim Niveau2 As New SiteMapLevelSetting
Niveau2.ListLayout.RepeatColumns = 1
Niveau2.Level = 2
Niveau2.Width = 200
'On ajoute les levelsettings
SiteMap1.LevelSettings.Add(Niveau1)
SiteMap1.LevelSettings.Add(Niveau2)
'On ajoute le SiteMap à l'item
container.Controls.Add(SiteMap1)
Return SiteMap1
Catch ex As Exception
Return Nothing
Exit Function
End Try
End Function
End Class