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

"FaceBook" like Notification Counts within RADMenu

3 Answers 45 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 2
Tom asked on 18 Mar 2019, 04:13 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 21 Mar 2019, 01:33 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Tom
Top achievements
Rank 2
answered on 26 Mar 2019, 07:27 PM

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

0
Rumen
Telerik team
answered on 29 Mar 2019, 04:06 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Menu
Asked by
Tom
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Tom
Top achievements
Rank 2
Share this question
or