ContentTemplate
This help article showcases how to add complex content (server-side controls and HTML elements) in RadImageButton instead of plain text (Figure 1). You can do this both in the markup, or in the code-behind:
Add Elements to RadImageButton in the Markup
In order to add controls to the RadImageButton in the markup, you should place them directly in the composite ContentTemplate property (Example 1).
Figure 1: RadImageButtons with ContentTemplate. The result from Examples 1-3.
Example 1: Adding controls to ContentTemplate of RadImageButton in the markup.
<style>
.button {
line-height:15px;
}
.access-key {
text-decoration: underline;
}
</style>
<telerik:RadImageButton runat="server" ID="OkImageButton" Width="100" Height="28" Skin="Silk">
<ContentTemplate>
<div class="button"><span class="access-key">O</span>K</div>
</ContentTemplate>
</telerik:RadImageButton>
<telerik:RadImageButton runat="server" ID="CancelImageButton" Width="100" Height="28" Skin="Silk">
<ContentTemplate>
<div class="button"><span class="access-key">C</span>ancel</div>
</ContentTemplate>
</telerik:RadImageButton>
Add Elements to RadImageButton from the Code-behind
You can add controls to RadImageButton from the code-behind in two ways:
Using Controls Collection
Example 2: Adding controls to the Controls collection of RadImageButton from the code-behind.
<style>
.button {
line-height:15px;
}
.access-key {
text-decoration: underline;
}
</style>
<telerik:RadImageButton runat="server" ID="OkImageButton" Width="100" Height="28" Skin="Silk">
</telerik:RadImageButton>
<telerik:RadImageButton runat="server" ID="CancelImageButton" Width="100" Height="28" Skin="Silk">
</telerik:RadImageButton>
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl okButton = new HtmlGenericControl("div");
okButton.Attributes.Add("class", "button");
okButton.InnerHtml = "<span class=\"access-key\">O</span>K";
OkImageButton.Controls.Add(okButton);
HtmlGenericControl cancelButton = new HtmlGenericControl("div");
cancelButton.Attributes.Add("class", "button");
cancelButton.InnerHtml = "<span class=\"access-key\">C</span>ancel";
CancelImageButton.Controls.Add(cancelButton);
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
Dim okButton As New HtmlGenericControl("div")
okButton.Attributes.Add("class", "button")
okButton.InnerHtml = "<span class=""access-key"">O</span>K"
OkImageButton.Controls.Add(okButton)
Dim cancelButton As New HtmlGenericControl("div")
cancelButton.Attributes.Add("class", "button")
cancelButton.InnerHtml = "<span class=""access-key"">C</span>ancel"
CancelImageButton.Controls.Add(cancelButton)
End Sub
Using ITemplate Interface
Example 3: Adding controls to the RadImageButton by using the ITemplate class.
<style>
.button {
line-height:15px;
}
.access-key {
text-decoration: underline;
}
</style>
<telerik:RadImageButton runat="server" ID="OkImageButton" Width="100" Height="28" Skin="Silk">
</telerik:RadImageButton>
<telerik:RadImageButton runat="server" ID="CancelImageButton" Width="100" Height="28" Skin="Silk">
</telerik:RadImageButton>
protected void Page_Load(object sender, EventArgs e)
{
OkImageButton.ContentTemplate = new OkButtonContentTemplate();
CancelImageButton.ContentTemplate = new CancelButtonContentTemplate();
}
public class OkButtonContentTemplate : ITemplate
{
void ITemplate.InstantiateIn(Control container)
{
HtmlGenericControl okButton = new HtmlGenericControl("div");
okButton.Attributes.Add("class", "button");
okButton.InnerHtml = "<span class=\"access-key\">O</span>K";
container.Controls.Add(okButton);
}
}
public class CancelButtonContentTemplate : ITemplate
{
void ITemplate.InstantiateIn(Control container)
{
HtmlGenericControl cancelButton = new HtmlGenericControl("div");
cancelButton.Attributes.Add("class", "button");
cancelButton.InnerHtml = "<span class=\"access-key\">C</span>ancel";
container.Controls.Add(cancelButton);
}
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
OkImageButton.ContentTemplate = New OkButtonContentTemplate()
CancelImageButton.ContentTemplate = New CancelButtonContentTemplate()
End Sub
Public Class OkButtonContentTemplate
Implements ITemplate
Private Sub ITemplate_InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
Dim okButton As New HtmlGenericControl("div")
okButton.Attributes.Add("class", "button")
okButton.InnerHtml = "<span class=""access-key"">O</span>K"
container.Controls.Add(okButton)
End Sub
End Class
Public Class CancelButtonContentTemplate
Implements ITemplate
Private Sub ITemplate_InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
Dim cancelButton As New HtmlGenericControl("div")
cancelButton.Attributes.Add("class", "button")
cancelButton.InnerHtml = "<span class=""access-key"">C</span>ancel"
container.Controls.Add(cancelButton)
End Sub
End Class