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

    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

  2. Magdalena
    Admin
    Magdalena avatar
    421 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.
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top