How to add icons to menu items populated by sitemap.

2 posts, 0 answers
  1. Kallie
    Kallie avatar
    2 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2015 Link to this post



    I have a Vertical RadMenu on master page that gets populated from a sitemap. I am using the Silk skin as the base skin with my own color modifications.

    I want to use it as a NotificationMenu.

    Example: People can add products by using a project registration Page. ProductRegistration.aspx. At the Menu Item there will be an Item called "New Products Registered". I want to add onto this menu item a type of count indicator (with small gray circle background ) that Counts the New Products out of the database table and displays it on the menu item. Of course if you click on the menuItem you must be redirected to the Page containing list of new products added (Radgrid)


    Is there a better control to use or a better way to do this?


     <telerik:RadMenu ID="NotificationsMenu" runat="server" item DataSourceID="smNotificationsMenu" EnableEmbeddedSkins="False" 
                                        RenderMode="Lightweight" Skin="LeftMenuSkin"
                                        ShowToggleHandle="True" Flow="Vertical">



    Kind Regards

  2. Magdalena
    Magdalena avatar
    414 posts

    Posted 11 Sep 2015 Link to this post

    Hi Kallie,

    For the purpose you can dynamically add some data attribute to the .rmRootLink of the RadMenu item. Value of this data attribute can be displayed by a pseudo element of the .rmRootLink.
    <telerik:RadMenuItem Text="New Products Registered" CssClass="newProducts" />

    var productsCount = 12;
    $telerik.$(".newProducts .rmRootLink").attr("data-productsCount", productsCount);

    .newProducts .rmRootLink:after {
        content: attr(data-productsCount);
        margin: 0 10px;
        padding: 5px;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 100px;

    Please, find a sample project in the attachment.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Telerik UI for ASP.NET Core is out
Back to Top