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

3 Answers 90 Views
DropDownTree Menu SiteMap
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Johnny asked on 17 Aug 2022, 10:58 AM

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

 

3 Answers, 1 is accepted

Sort by
0
Valentin Dragnev
Telerik team
answered on 20 Aug 2022, 04:09 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
commented on 22 Aug 2022, 07:41 AM

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!

0
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 05 Oct 2022, 08:08 AM | edited on 05 Oct 2022, 08:12 AM

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!

0
Valentin Dragnev
Telerik team
answered on 07 Oct 2022, 01:44 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownTree Menu SiteMap
Asked by
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Answers by
Valentin Dragnev
Telerik team
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Share this question
or