"FaceBook" like Notification Counts within RADMenu

[Tom]

Hello

I am looking for a little assistance in developing Facebook like notification counts like the attached image.  I have the image displaying properly, just didn't know if there was any functionality built with the menu item to do something like the attached image.

Thanks in advance,

Tom

 

[Rumen]

Hi Tom,

Thank you for sharing your interesting scenario with us!

RadMenu items are extremely configurable and you can customize the appearance of menu items by adding custom images, using CSS classes, or creating custom skins. However, if you want to embed other HTML controls in a menu item, you must use templates. You can embed any content inside a RadMenu template, including:
- HTML markup
- ASP.NET server controls
-Other third-party controls (including other Telerik controls)

You can find more information on the templates at https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/templates/overview and implement your own button or integrate directly the facebooks on in the custom template.

Best regards,
Rumen
Progress Telerik

[Tom]

Hi Rumen

I appreciate you getting back to me.

So I did some thing a little different than what you suggested.  I have attached an image of the final product.

First, I setup my CSS as shown below:

  <style type="text/css">

    div.RadMenu_Simple .rmItem .rmLink
    {
      font-size: 9pt;
      font-family: Verdana;
      height: 15px;
    }
    div.RadMenu_Simple li {
      margin-bottom: 0;
    }
    div.RadMenu_Simple .rmLast
    {
      float: right;
      direction: rtl;
    }

    .button_badge {
      background-color: #fa3e3e;
      border-radius: 2px;
      color: white;
 
      padding: 1px 3px;
      font-size: 8.5px;
 
      position: absolute; /* Position the badge within the relatively positioned button */
      top: 2px;
      right: 8px;
    }
  </style>

Second, I setup the menu item below:

       <telerik:RadMenuItem Value="ALERT" ImageUrl="~/images/16_Notification.png" GroupSettings-OffsetX="-305">
                <ContentTemplate>
         <div id="div_PIP_Alerts" runat="server" style="width: 325px; height: 150px; padding: 5px; overflow: auto;" dir="ltr" />
                </ContentTemplate>
              </telerik:RadMenuItem>

Third, I updated the Text property in the code behind as follows:

      'Check alert count to set MenuItem Text attribute
      If int_AlertCount > 0 Then
        Me.PIP_Menu.FindItemByValue("ALERT").Text = "<span class='button_badge'>" & int_AlertCount & "</span>"
      End If

Finally the attached image is the output.

I would also like to know if you have an example that you would be willing to share using the ItemTemplate.  With the same result or something like your shopping cart at the top of your website.

Thanks

Tom

[Rumen]

Hi Tom,

Your solution look pretty well and I am glad that you managed to achieve it.

The shopping card toolbar at Telerik.com is custom made and we do not have a runnable demo with the AJAX components for it.
The available resources for RadMenu ItemTemplate are in the documentation: 
https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/templates/server-templates#item-templates
https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/templates/adding-templates-at-run-time

Hope that you can find them useful. 

Best regards,
Rumen
Progress Telerik