Button - Add elements in RadButton

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

It is possible to add complex content (i.e., server controls and HTML elements) in a RadButton instead of plain text. There are three ways to achieve this:

  • Set the ContentTemplate property.
    • In the markup of your page you can add controls to the ContentTemplate inner property as shown below:
      <telerik:RadButton runat="server" ID="RadButton1" Width="90" Height="90">
          <ContentTemplate>
              <span>RadButton Content</span>
          </ContentTemplate>
      </telerik:RadButton>
    • In the code-behind, you can set the ContentTemplate property to an instance of a class that implements the ITemplate interface.
  • Add controls to the Controls collection of the RadButton instance from the code-behind.

Important: Please note that the RadButton is rendered as a span HTML element, wrapping the inserted content, so you should add in the template only inline elements in order to maintain XHTML compliance .

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Button.Default.DefaultCS" %>

<%@ 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>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="mainWrap">
        <div class="btnWrap">
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Width="100px" Height="100px" CssClass="tasks"
                Skin="Default">
                <ContentTemplate>
                    <img alt="cog" src="images/cog.png" />
                    <span class="btnText">Tasks</span>
                </ContentTemplate>
            </telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton2" Width="100px" Height="100px" CssClass="people"
                Skin="Default">
                <ContentTemplate>
                    <img alt="people" src="images/people.png" width="87" height="87"/>
                    <span class="btnText">People</span>
                </ContentTemplate>
            </telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton3" Width="100px" Height="100px" CssClass="vehicles"
                Skin="Default">
            </telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton4" Width="100px" Height="100px" CssClass="email"
                Skin="Default">
            </telerik:RadButton>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?