How to add an image to the text (nodes) of a RadSiteMap

[Johnny]

Hello everyone!

I've got the below RadSiteMap being coded from codebehind (VB). I want to add small icons to the left of each submenu's text however I do not know how. The ImageUrl property apparently does not exist for the RadSiteMap and I cannot think of another way to insert my icons.

Check the attached screenshot to see how my menu looks like and where would I want to add icons. I basically want to add them into the titles and then a different icon to each submenu as well.

Note: My RadMenu is being populated entirely from a database (all of it, parent and childs). If you wish to see the code for a better understanding, I can also leave that in the comments.

Thanks a lot!

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.DataFieldID = "Identifiant"
            SiteMap1.DataFieldParentID = "Parent"
            SiteMap1.DataValueField = "Libelle"
            SiteMap1.DataNavigateUrlField = "Lienpage"
  
            'This sql receives all the submenus under the current Parent menu
            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 Libelle, ChapitreParentGlobal, ChapitreParent,ChapitreEnfant", "EU_BREST")

            SiteMap1.DataBind()

            [.....] I removed this part of the code to make my post smaller on the forums.
 
 container.Controls.Add(SiteMap1)

            Return SiteMap1

        Catch ex As Exception
            Return Nothing
 Exit Function
 End Try
 End Function

 

[Valentin Dragnev]

Hello Johnny,

To put an image in front of the list items you have to use specific CSS selectors.

In the attached screen recording there you can see my approach to doing this. For putting images in front of every list item you have to select every one of them separately and apply the shown styling.

CSS:

.rsmList li {
    display: inline;
    padding-right: 6px;
    padding-left: 20px;
    color: black;
}

.rsmList .rsmItem {
    background: url('images/icon.png');
    background-repeat: no-repeat;
    background-size: contain;
}

Test the CSS by applying the styling in your solution.

 

 

I hope this will be helpful. 

 

Regards,

Valentin
Progress Telerik

[Johnny]

Thank you, Valentin. I have tested it and it works perfectly!

The only problem remains that I wish to add a different icon to each submenu.

Using this method (via CSS), I cannot do any control because the same icon will be added to all the rsmItems which means all the submenus.

Having the Radmenu items being generated automatically, I believe the only way to add a different icon to each submenu will be via the codebehind, correct?

Do you have any recommendations or suggestions on how to do that to the RadMenu?

Thanks again!

[Johnny]

Hello again.

I appreciate your suggestion regarding the use of CSS selectors in the classes of the node items. However, that means I have to use the same image for all the node items.

However, in my case, I wish to use a different image for each node item. In a rad menu, each item will have its own icon because they mean different things. Having the same icon for all the sub-menus is not ideal.

I have been looking for a way to do this, however, I cannot seem to find the proper method to deal with the issue. I thought to save, for each sub-menu that is being populated from the database, its own icon link/path in a separate column in that database and retrieve it during the populating process in the CodeBehind. However, I cannot seem to find any property to apply an image to a RadSiteMap item.

To populate the RadSiteMap, I have used different properties such as DataTextField, ID, DataIDField, etc... But is there any property to set an Image?

I have attached a screenshot showing the nodes that I wish to set an image for, alongside how the code is being generated in HTML format, after populating the radsitemap from VB.

 

Thanks!

[Valentin Dragnev]

Hello Johnny,

The solution that I would recommend is binding the CSS classes with the images to the list elements. In the demo for SiteMap you can see the following approach: 

• The images Infront of the list items are declared like Classes: 
  

  #example .demo-container .RadSiteMap .ASPNET {
      background: url('images/prodAJAX.png') no-repeat left top;
  }

• Add all the CSS classes to the dictionary by their categories;

• binding the CSS class to the corresponding category attribute of the SiteMap node:
  

  e.Node.CssClass = TextCssClass[(string)DataBinder.Eval(e.Node.DataItem, "[category]") ?? "Default"];

Give a try to my suggestion, and try to replicate it to your solution. 
Looking forward to your reply. 

Regards,
Valentin Dragnev
Progress Telerik