How to add icons to menu items populated by sitemap.

[Kallie]

Hi,

 

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

[Magdalena]

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.
aspx:

<telerik:RadMenuItem Text="New Products Registered" CssClass="newProducts" />

javascript:

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

CSS:

.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.


Regards,
Magdalena
Telerik