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

support for notification button/menu?

4 Answers 140 Views

Button

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

4 Answers, 1 is accepted

Accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

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