"FaceBook" like Notification Counts within RADMenu

4 posts, 0 answers
  1. Tom
    Tom avatar
    4 posts
    Member since:
    Apr 2015

    Posted 18 Mar Link to this post

    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

     

  2. Rumen
    Admin
    Rumen avatar
    14075 posts

    Posted 21 Mar Link to this post

    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.
  3. Tom
    Tom avatar
    4 posts
    Member since:
    Apr 2015

    Posted 26 Mar in reply to Rumen Link to this post

    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

  4. Rumen
    Admin
    Rumen avatar
    14075 posts

    Posted 29 Mar Link to this post

    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.
Back to Top