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

Header and Footer Templates

To Do List:
  • Present for Emily

This example shows how to use header and footer templates with RadListBox. You can add header / footer template both declaratively and from the code behind, in pretty much the same way as all other types of templates.

You can add html entities as well as server-side controls to the header / footer templates.

Once server-side control is added to the header / footer template it can be accessed using the FindControl method provided by the Header / Footer properties of RadListBox.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.ApplicationScenarios.InsertItem.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" 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:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Width="180" Height="240px" Skin="Telerik">
                <HeaderTemplate>
                    To Do List:
                </HeaderTemplate>
                <Items>
                    <telerik:RadListBoxItem Text="Present for Emily" />
                </Items>
                <FooterTemplate>
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="TitleTextBox" EmptyMessage="Task Title" Width="140" Skin="Telerik" />
                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="AddButton" Text="" CssClass="add-button"
                        OnClick="AddButton_Click" ButtonType="SkinnedButton" Skin="Telerik" />
                    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" Display="None"
                        ControlToValidate="TitleTextBox" ErrorMessage="Title is required" />
                </FooterTemplate>
            </telerik:RadListBox>
        </telerik:RadAjaxPanel>
        <asp:ValidationSummary runat="server" ShowMessageBox="true" ID="ValidationSummary1">
        </asp:ValidationSummary>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance