This is a migrated thread and some comments may be shown as answers.

How to add icons to menu items populated by sitemap.

1 Answer 15 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kallie
Top achievements
Rank 1
Kallie asked on 10 Sep 2015, 11:52 AM

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

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 11 Sep 2015, 02:19 PM
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
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
Tags
Menu
Asked by
Kallie
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or