Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
HeaderTemplate Property

DataList.HeaderTemplate Property

Gets or sets the template for the heading section of the DataList control.

[Visual Basic]
Public Overridable Property HeaderTemplate As ITemplate
[C#]
public virtual ITemplate HeaderTemplate {get; set;}
[C++]
public: __property virtual ITemplate* get_HeaderTemplate();
public: __property virtual void set_HeaderTemplate(ITemplate*);
[JScript]
public function get HeaderTemplate() : ITemplate;
public function set HeaderTemplate(ITemplate);

Property Value

A System.Web.UI.ITemplate that contains the template for the heading section of the DataList control. The default value is a null reference (Nothing in Visual Basic).

Remarks

Use the HeaderTemplate property to control the contents of the heading section. The appearance of the header section is controlled by the HeaderStyle property.

Note   The ShowHeader property must be set to true for this property to be visible.

To specify a template for the heading section, place the <HeadingTemplate> tags between the opening and closing tags of the DataList control. You can then list the contents of the template between the opening and closing <HeadingTemplate> tags.

CAUTION   This control can be used to display user input, which might include malicious client script. Check any information that is sent from a client for executable script, SQL statements, or other code before displaying it in your application. ASP.NET provides an input request validation feature to block script and HTML in user input. Validation server controls are also provided to assess user input. For more information, see Validation Server Controls.

Example

[Visual Basic, C#] The following example demonstrates how to use the HeaderTemplate property to control the contents of the heading section of the DataList control.

[Visual Basic, C#] Note   The following code sample uses the single-file code model and may not work correctly if copied directly into a code-behind file. This code sample must be copied into an empty text file that has an .aspx extension. For more information on the Web Forms code model, see Web Forms Code Model.
[Visual Basic] 

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>
   <script runat="server">
 
      Function CreateDataSource() As ICollection 
      
         ' Create sample data for the DataList control.
         Dim dt As DataTable = New DataTable()
         dim dr As DataRow
 
         ' Define the columns of the table.
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
         dt.Columns.Add(New DataColumn("ImageValue", GetType(String)))
 
         ' Populate the table with sample values.
         Dim i As Integer

         For i = 0 To 8 

            dr = dt.NewRow()
 
            dr(0) = i
            dr(1) = "Description for item " & i.ToString()
            dr(2) = 1.23 * (i + 1)
            dr(3) = "Image" & i.ToString() & ".jpg"
 
            dt.Rows.Add(dr)

         Next i
 
         Dim dv As DataView = New DataView(dt)
         Return dv

      End Function
 
      Sub Page_Load(sender As Object, e As EventArgs) 

         ' Load sample data only once, when the page is first loaded.
         If Not IsPostBack Then 
     
            ItemsList.DataSource = CreateDataSource()
            ItemsList.DataBind()
         
         End If

      End Sub
 
      Sub Button_Click(sender As Object, e As EventArgs) 
 
         ' Set the repeat direction based on the selected value of the
         ' DirectionList DropDownList control.
         ItemsList.RepeatDirection = _
             CType(DirectionList.SelectedIndex, RepeatDirection)

         ' Set the repeat layout based on the selected value of the
         ' LayoutList DropDownList control.
         ItemsList.RepeatLayout = CType(LayoutList.SelectedIndex, RepeatLayout)

         ' Set the number of columns to display based on the selected
         ' value of the ColumnsList DropDownList control.
         ItemsList.RepeatColumns = ColumnsList.SelectedIndex

         ' Show or hide the gridlines based on the value of the
         ' ShowBorderCheckBox. Note that gridlines are displayed
         ' only if the RepeatLayout property is set to Table.
         If ShowBorderCheckBox.Checked _
             And ItemsList.RepeatLayout = RepeatLayout.Table Then 

            ItemsList.BorderWidth = Unit.Pixel(1)
            ItemsList.GridLines = GridLines.Both
         
         Else  
    
            ItemsList.BorderWidth = Unit.Pixel(0)
            ItemsList.GridLines = GridLines.None
         
         End If
    
      End Sub    
 
   </script>
 
<body>
 
   <form runat=server>

      <h3>DataList Example</h3>
 
      <asp:DataList id="ItemsList"
           BorderColor="black"
           CellPadding="5"
           CellSpacing="5"
           RepeatDirection="Vertical"
           RepeatLayout="Table"
           RepeatColumns="0"
           ShowBorder="False"
           runat="server">

         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>

         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>

         <HeaderTemplate>

            List of items

         </HeaderTemplate>
               
         <ItemTemplate>

            Description: <br>
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>

            <br>

            Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>

            <br>

            <asp:Image id="ProductImage"
                 ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
                 runat="server"/>

         </ItemTemplate>
 
      </asp:DataList>
 
      <hr>

      <table cellpadding="5">

         <tr>

            <td>

               Repeat direction:

            <td>

            <td>

               Repeat layout:

            <td>

            <td>

               Repeat columns:

            <td>

            <td>

               <asp:CheckBox id="ShowBorderCheckBox"
                    Text="Show border"
                    Checked="False" 
                    runat="server" />

            <td>

         </tr>

         <tr>

            <td>

               <asp:DropDownList id="DirectionList" 
                    runat="server">

                  <asp:ListItem>Horizontal</asp:ListItem>
                  <asp:ListItem Selected="True">Vertical</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               <asp:DropDownList id="LayoutList" 
                    runat="server">

                  <asp:ListItem Selected="True">Table</asp:ListItem>
                  <asp:ListItem>Flow</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               <asp:DropDownList id="ColumnsList" 
                    runat="server">

                  <asp:ListItem Selected="True">0</asp:ListItem>
                  <asp:ListItem>1</asp:ListItem>
                  <asp:ListItem>2</asp:ListItem>
                  <asp:ListItem>3</asp:ListItem>
                  <asp:ListItem>4</asp:ListItem>
                  <asp:ListItem>5</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               &nbsp;

            <td>


         </tr>

      </table>     
         
      <asp:LinkButton id="RefreshButton" 
           Text="Refresh DataList" 
           OnClick="Button_Click" 
           runat="server"/>
 
   </form>
 
</body>
</html>


[C#] 

<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>
   <script runat="server">
 
      ICollection CreateDataSource() 
      {
      
         // Create sample data for the DataList control.
         DataTable dt = new DataTable();
         DataRow dr;
 
         // Define the columns of the table.
         dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
         dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
         dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
         dt.Columns.Add(new DataColumn("ImageValue", typeof(String)));
 
         // Populate the table with sample values.
         for (int i = 0; i < 9; i++) 
         {
            dr = dt.NewRow();
 
            dr[0] = i;
            dr[1] = "Description for item " + i.ToString();
            dr[2] = 1.23 * (i + 1);
            dr[3] = "Image" + i.ToString() + ".jpg";
 
            dt.Rows.Add(dr);
         }
 
         DataView dv = new DataView(dt);
         return dv;
      }
 
 
      void Page_Load(Object sender, EventArgs e) 
      {

         // Load sample data only once, when the page is first loaded.
         if (!IsPostBack) 
         {
            ItemsList.DataSource = CreateDataSource();
            ItemsList.DataBind();
         }

      }
 
      void Button_Click(Object sender, EventArgs e) 
      {
 
         // Set the repeat direction based on the selected value of the
         // DirectionList DropDownList control.
         ItemsList.RepeatDirection = 
             (RepeatDirection)DirectionList.SelectedIndex;

         // Set the repeat layout based on the selected value of the
         // LayoutList DropDownList control.
         ItemsList.RepeatLayout = (RepeatLayout)LayoutList.SelectedIndex;

         // Set the number of columns to display based on the selected
         // value of the ColumnsList DropDownList control.
         ItemsList.RepeatColumns = ColumnsList.SelectedIndex;

         // Show or hide the gridlines based on the value of the
         // ShowBorderCheckBox property. Note that gridlines are displayed
         // only if the RepeatLayout property is set to Table.
         if ((ShowBorderCheckBox.Checked) 
             && (ItemsList.RepeatLayout == RepeatLayout.Table)) 
         {
            ItemsList.BorderWidth = Unit.Pixel(1);
            ItemsList.GridLines = GridLines.Both;
         }    
         else  
         {
            ItemsList.BorderWidth = Unit.Pixel(0);
            ItemsList.GridLines = GridLines.None;
         }
    
      }    
 
   </script>
 
<body>
 
   <form runat=server>

      <h3>DataList Example</h3>
 
      <asp:DataList id="ItemsList"
           BorderColor="black"
           CellPadding="5"
           CellSpacing="5"
           RepeatDirection="Vertical"
           RepeatLayout="Table"
           RepeatColumns="0"
           ShowBorder="False"
           runat="server">

         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>

         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>

         <HeaderTemplate>

            List of items

         </HeaderTemplate>
               
         <ItemTemplate>

            Description: <br>
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>

            <br>

            Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>

            <br>

            <asp:Image id="ProductImage"
                 ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
                 runat="server"/>

         </ItemTemplate>
 
      </asp:DataList>
 
      <hr>

      <table cellpadding="5">

         <tr>

            <td>

               Repeat direction:

            <td>

            <td>

               Repeat layout:

            <td>

            <td>

               Repeat columns:

            <td>

            <td>

               <asp:CheckBox id="ShowBorderCheckBox"
                    Text="Show border"
                    Checked="False" 
                    runat="server" />

            <td>

         </tr>

         <tr>

            <td>

               <asp:DropDownList id="DirectionList" 
                    runat="server">

                  <asp:ListItem>Horizontal</asp:ListItem>
                  <asp:ListItem Selected="True">Vertical</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               <asp:DropDownList id="LayoutList" 
                    runat="server">

                  <asp:ListItem Selected="True">Table</asp:ListItem>
                  <asp:ListItem>Flow</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               <asp:DropDownList id="ColumnsList" 
                    runat="server">

                  <asp:ListItem Selected="True">0</asp:ListItem>
                  <asp:ListItem>1</asp:ListItem>
                  <asp:ListItem>2</asp:ListItem>
                  <asp:ListItem>3</asp:ListItem>
                  <asp:ListItem>4</asp:ListItem>
                  <asp:ListItem>5</asp:ListItem>

               </asp:DropDownList>

            <td>

            <td>

               &nbsp;

            <td>


         </tr>

      </table>     
         
      <asp:LinkButton id="RefreshButton" 
           Text="Refresh DataList" 
           OnClick="Button_Click" 
           runat="server"/>
 
   </form>
 
</body>
</html>

[C++, JScript] No example is available for C++ or JScript. To view a Visual Basic or C# example, click the Language Filter button Language Filter in the upper-left corner of the page.

Requirements

Platforms: Windows 2000, Windows XP Professional, Windows Server 2003 family

See Also

DataList Class | DataList Members | System.Web.UI.WebControls Namespace | HeaderStyle | System.Web.UI.ITemplate

Show:
© 2015 Microsoft