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

Content Template

Find and Replace

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

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

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" 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">
        <h2 class="find-replace-title">Find and Replace</h2>
        <p>
            <telerik:RadTextBox RenderMode="Lightweight" ID="findTextBox" runat="server" EmptyMessage="Find" Width="284px" />
        </p>
        <p>
            <telerik:RadTextBox RenderMode="Lightweight" ID="replaceTextBox" runat="server" EmptyMessage="Replace" Width="284px" />
        </p>
        <div class="buttons-container">
            <telerik:RadImageButton runat="server" ID="OkImageButton" Width="140" Height="50" AutoPostBack="false" CssClass="image-button">
                <Image Url="~/ImageButton/Images/blue_button_bg.png" />
                <ContentTemplate>
                    <span class="button-content"><img src="../Images/icon_find.png" alt="Find Icon" /><span class="access-key">F</span>ind</span>
                </ContentTemplate>
            </telerik:RadImageButton>
            <telerik:RadImageButton runat="server" ID="CancelImageButton" Width="140" Height="50" AutoPostBack="false" CssClass="image-button">
                <Image Url="~/ImageButton/Images/blue_button_bg.png" />
                <ContentTemplate>
                    <span class="button-content"><img src="../Images/icon_replace.png" alt="Find Icon" /><span class="access-key">R</span>eplace</span>
                </ContentTemplate>
            </telerik:RadImageButton>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance