support for notification button/menu?

5 posts, 1 answers
  1. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 12 Sep 2012 Link to this post

    any ideas on how to accomplish something like this?

    I could create a series of icons 1-100 but that would be kinda crazy.

    Thanks, Marty
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 17 Sep 2012 Link to this post

    Hello,

    You could use content template button and a few CSS to style Messages, Updates, Alerts etc:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .myText,
            .countMsg {
                display: inline-block;
                *zoom: 1;
                *display: inline;
            }
             
            .countMsg {
                font-style: normal;
                font-size: 9px;
                font-weight: bold;
                margin: 4px 0 0 5px;
                width: 14px;
                height: 14px;
                line-height: 12px;
                text-align: center;
                color: #fff;
                border-radius: 4px;
                vertical-align: top;
            }
             
            .countMessages {
                background-color: blue;
            }
             
            .countUpdates {
                background-color: red;
            }
             
            .countAlerts {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="rb1" runat="server" ButtonType="ToggleButton" Skin="Web20">
            <ContentTemplate>
                <span class="myText">Messages<em class="countMsg countMessages">24</em></span>
            </ContentTemplate>
        </telerik:RadButton>
        <telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" Skin="Web20">
            <ContentTemplate>
                <span class="myText">Updates<em class="countMsg countUpdates">24</em></span>
            </ContentTemplate>
        </telerik:RadButton>
        <telerik:RadButton ID="RadButton2" runat="server" ButtonType="ToggleButton" Skin="Web20">
            <ContentTemplate>
                <span class="myText">Alerts<em class="countMsg countAlerts">24</em></span>
            </ContentTemplate>
        </telerik:RadButton>
        </form>
    </body>
    </html>

    You could create as many as it is necessary CSS classes for your purposes.

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 17 Sep 2012 Link to this post

    Bozhidar,

    Thanks. That works. Thanks for the fast response!

    but the buttons ignore RadFormDecorator Is there any way for content template to sue form decorator?

    Marty

     
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 17 Sep 2012 Link to this post

    Hello,

    Your ticket is posted in RadButton forums, and that`s why my sample code is with RadButtn control.

    RadFormDecorator does not have content template. That`s why we have RadButton control, which put buttons on a higher level of customization (you could use icons, content templates etc.). You should use RadButton in the way showed in my previous mail. Actually I do not see what would help you RadFormDecorator in that case as it just decorates asp buttons, while at the same time you need one more element inside the button for the balloons containing the numbers.

    Of course, you could wrap an asp decorated button into a span element, and inside to put another span, that will be decorated as a balloon and then to be placed inside the decorated button, but this is a whole new much more complicated approach that is out of the scope of our controls support.

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 17 Sep 2012 Link to this post

    Thanks, I will play around with the other options.

    I marked your first response as the answer.  Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017