New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add elements in RadButton

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>
<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="demo-container no-bg">
        <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>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance