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

support for notification button/menu?

4 Answers 116 Views
Button
This is a migrated thread and some comments may be shown as answers.
moegal
Top achievements
Rank 1
moegal asked on 12 Sep 2012, 05:58 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 17 Sep 2012, 07:09 AM
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.
0
moegal
Top achievements
Rank 1
answered on 17 Sep 2012, 10:15 AM
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

 
0
Bozhidar
Telerik team
answered on 17 Sep 2012, 02:08 PM
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.
0
moegal
Top achievements
Rank 1
answered on 17 Sep 2012, 02:52 PM
Thanks, I will play around with the other options.

I marked your first response as the answer.  Thanks!
Tags
Button
Asked by
moegal
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
moegal
Top achievements
Rank 1
Share this question
or