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

Content Template

It is possible to add complex content (i.e., server controls and HTML elements) in a RadPushButton 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:
    • 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 RadPushButton instance from the code-behind.

Important: As a best practice we would advise using simple, inline HTML in the ContentTemplate of the RadPushButton control. This will ensure better usability, improved performance and flawless appearance.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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">
        <telerik:RadPushButton runat="server" ID="OkImageButton" Width="100" Height="28" AutoPostBack="false" CssClass="push-button" Primary="true">
            <ContentTemplate>
                <span class="access-key">O</span>K
            </ContentTemplate>
        </telerik:RadPushButton>
        <telerik:RadPushButton runat="server" ID="CancelImageButton" Width="100" Height="28" AutoPostBack="false" CssClass="push-button">
            <ContentTemplate>
                <span class="access-key">C</span>ancel
            </ContentTemplate>
        </telerik:RadPushButton>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance