Telerik Code Library

Telerik
1. CONFIRM BUTTON
PROJECT DESCRIPTION
Sometimes, You use a button for delete function with confirmation from the user. And you
usually write some js function, but this will repeat your work at many pages, or you simply
don't like that way. And sometime, it's not quite easy and convenient to localize strings in js
function. For example: with the confirmation "Are you sure to delete?", you would like to
localize it in various languages.
I create a very simple button, which inherit RadButton, and a few lines of codes. You can set
some properties in design-time to get the function you want to use.
I create two properties (of course, you can name whatever you like):
- CwIsConfirmButton: Default is "false", and the Button is just a normal RadButton. When set
to "true", it becomes ConfirmButton, and you need to set the CwConfirmText as below.
- CwConfirmText: is just like its name. The string like: Are you sure to delete?... And you can
localize this text as you like.
That's it. I think it's so simple but may be helpful.
I suggest this would be a function of RadButton in the next version.

Thank you for your awesome controls, Telerik.
2. Using Font Awesome Icons With RadButton
PROJECT DESCRIPTION
The sample project attached with this post shows how you can use Font Awesome Icons in your
Telerik ASP.NET application within the RadButton control. These icons work equally well on
mobile as well as non-mobile devices when used in RadButton control. You can make your
Telerik ASP.Net app look more appealing by following this sample and also make it easier for the
users of your app to better understand the user interface of your Telerik ASP.Net app. Icons
make it easy for end-users to understand the user interface of an application. You can see a
screen shot of these icons when used with RadButton at this
URL: http://screencast.com/t/hhfQlm4AvaG
INTRODUCTION
Font Awesome Icons are very popular nowadays in all types of web application. They
offer a huge variety of different icons that are constantly being expanded/upgraded
and most important they are free to use in any commercial application i.e. no
licensing cost is associated with them. One cool feature of these icons is that you can style
them with CSS just like you would style any font in your application i.e. you can use CSS
attributes of color or font-size or font-weight to change the look-and-feel of these icons. They can
also be enlarged by simply using a CSS class without any loss of icon quality, which is also one
of the reasons that these icons have become so popular. You can read more about the benefits
of these icons at following URL: https://fortawesome.github.io/Font-Awesome/.
DEMO
For an online demo of using Font Awesome Icons in RadButton control you can view it at this
URL: Demo for using Font Awesome Icons in RadButton control
SETUP of Telerik ASP.Net project
To start using Font Awesome Icons in your Telerik ASP.Net app, you need to follow the steps
mentioned below. Its assumed that you have added references to Telerik.Web.UI.dll and
Telerik.Web.UI.Skins.dll your ASP.Net project before doing the steps below.
In the web config of your app, add the following configuration to system.web server
section. You need this so IIS can serve files with an extension of woff or woff2, which is the
extension of Font Awesome Icon files. If you do not include this configuration then you will
get 404 Not Found errors when you try to use these icons in an ASP.Net page.
<system.webServer>
<staticContent>

<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2"

/>
</staticContent>
</system.webServer>
Create a folder fontsawesome under the root of your ASP.Net app and copy the contents
of this folder from attached sample project to this folder. Or you can simply copy this folder in
attached sample and paste it to the root of your app in Visual Studio solution explorer.
Finally, you need to include the CSS file for these icons either in the master page or in
any content page. For this you can use either of the following 2 approaches:
o Use the CSS file found in the attached sample project at this
location /fontsawesome/css/font-awesome.css. There is also a minified version of this
CSS file at same location in attached sample. Include this file in the head part of your
ASP.Net master/content page.
<link type="text/css" rel="stylesheet" href="fontsawesome/css/font-

awesome.css" />
o Use the CSS file from a CDN (Content Delivery Network) as in code snippet
below. Include this code in the head part of the master/content page. If you use this
approach then you don't need to do the other steps in the setup i.e. no need to create a
special folder of fontsawesome in your project or to create special configuration for
woff/woff2 files in web config file..
<link
type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
/font-awesome/4.5.0/css/font-awesome.min.css" />
HOW TO USE FONT AWSOME ICONS IN RADBUTTON
1. After the above steps you are all set to start using Font Awesome Icons. An
example of including this icon is as below. Note that you need to mention the icon
using i tags within the ContentTemplate of RadButton. i tags are specific to Font
Awesome Icons. The classes you can use for styling are: fa-lg (33% enlargement),
fa-2x, fa-3x,fa-4 and fa-5x; if you don't specify a size class then the original default
size of the icon is displayed which is a normal small size. You can also size the icon
by simply setting the font-size attribute to an appropriate value under the style for the
i tag. One thing to note is that only the text you mention in ContentTemplate is
displayed, and the Text property of RadButton is ignored when using these icons. If
you do no mention any text within ContentTemplate then the RadButton shows up
without any text but only the icon, which can be a suitable option in many cases.
<telerik:RadButton ID="RadButton33" runat="server" Text="Print" ButtonType="

StandardButton" Height="32">
<ContentTemplate>
 Print
</ContentTemplate>
</telerik:RadButton>
2. You can also show multiple icons in same RadButton as in code snippet below.
<telerik:RadButton ID="RadButton7" runat="server" Text="Clear" ButtonType="S

tandardButton" Height="32"Skin="Windows7">
<ContentTemplate>
Clear 
</ContentTemplate>
3. You can style these icons just as you would any font. In above code snippet you
can see how the filter icon is made to show in steelblue color with a font size of 27px.
4. You can show animated icons in RadButton using code like below. The classes of
fa-spin and fa-pulse cause an icon to become animated.
<telerik:RadButton ID="RadButton9" runat="server" Text="Search" ButtonType="

StandardButton" Height="32">
<ContentTemplate>
Processing... 
</ContentTemplate>
5. You can dynamically change the RadButton icon either on client-side or on server-
side. Look at RadButton3 for doing this on server-side and RadButton4 for doing it
on client-side in attached sample page of RadButtonWithFontAwesome.aspx.
6. You can also enclose an icon within another shape icon to give an enhanced
effect. For instance you can show a printer icon within a rounded square shape icon.
These examples can be seen with
RadButton10, RadButton11, RadButton12, RadButton13, RadButton14
and RadButton15 in attached sample page of RadButtonWithFontAwesome.aspx.
7. These icons are mobile friendly which you can verify by going to the online demo
URL in your mobile device.
8. These icons are compatible with all Telerik ASP.Net AJAX skins which you can see
in the online demo. The mouse over effects of Telerik skins will apply to Font
Awesome Icons.

Telerik Code Library

Uploaded by

Copyright:

Available Formats

Telerik Code Library

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Telerik Code Library

Uploaded by

Copyright:

Available Formats

Telerik

That's it. I think it's so simple but may be helpful.

I suggest this would be a function of RadButton in the next version.

2. Using Font Awesome Icons With RadButton

SETUP of Telerik ASP.Net project

<!--Below static content configuration is needed else you will get

<remove fileExtension=".woff" />

<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />

<remove fileExtension=".woff2" />

<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2"

<link type="text/css" rel="stylesheet" href="fontsawesome/css/font-

HOW TO USE FONT AWSOME ICONS IN RADBUTTON

<telerik:RadButton ID="RadButton33" runat="server" Text="Print" ButtonType="

<telerik:RadButton ID="RadButton7" runat="server" Text="Clear" ButtonType="S

<telerik:RadButton ID="RadButton9" runat="server" Text="Search" ButtonType="

You might also like