ListView.GroupTemplate Property


The .NET API Reference documentation has a new home. Visit the .NET API Browser on to see the new experience.

Gets or sets the user-defined content for the group container in a ListView control.

Namespace:   System.Web.UI.WebControls
Assembly:  System.Web.Extensions (in System.Web.Extensions.dll)

public virtual ITemplate GroupTemplate { get; set; }

Property Value

Type: System.Web.UI.ITemplate

An object that contains the custom content for the group container in a ListView control. The default is null, which indicates that this property is not set.

Use the GroupTemplate property to create a tiled layout in the ListView control. In a tiled table layout, the items are repeated horizontally in a row. The numbers of times that an item is repeated is specified by the GroupItemCount property.

To specify a template declaratively for the group container, add a GroupTemplate element inside the ListView control. You can then add the contents of the template to the GroupTemplate element.

The GroupTemplate property must include a placeholder for the data item, such as a table cell (td), div, or span element. This placeholder must have the runat attribute set to "server" and the ID attribute set to the value of the ItemPlaceholderID property. At run time, the ListView control replaces the placeholder with the content that is defined for each item in the ItemTemplate and AlternatingItemTemplate templates.

The following example shows how to create a tiled layout in the ListView control by using the GroupTemplate property.

<%@ Page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="" >
  <head id="Head1" runat="server">
    <title>ListView Tiled Layout Example</title>
    <style type="text/css">        
          border-top:solid 1px #9dbbcc;
          border-bottom:solid 1px #9dbbcc;
        .separator { border-right: 1px solid #ccc; }
    <form id="form1" runat="server">

      <h3>ListView Tiled Layout Example</h3>

      <asp:ListView ID="ProductsListView" 
          <table cellpadding="2" width="640px" runat="server" id="tblProducts">
            <tr runat="server" class="header">
              <th runat="server" colspan="3">PRODUCTS LIST</th>
            <tr runat="server" id="groupPlaceholder" />
          <tr runat="server" id="ProductsRow">
            <td runat="server" id="itemPlaceholder" />
          <tr runat="server">
            <td colspan="3"><hr /></td>
          <td align="center" style="width:300px" runat="server">
            <asp:HyperLink ID="ProductLink" runat="server" 
               Text='<%# Eval("Name") %>' 
             NavigateUrl='<%# "ProductDetails.aspx?productID=" + Eval("ProductID") %>' /><br />
            <asp:Image ID="ProductImage" runat="server"
               ImageUrl='<%# "~/images/thumbnails/" + Eval("ThumbnailPhotoFileName") %>' /><br />
            <asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("ListPrice", "{0:c}")%>' /><br />
          <td class="separator" runat="server">&nbsp;</td>
      <br />

      <asp:DataPager runat="server" ID="ProductsDataPager" 
          <asp:NextPreviousPagerField ButtonType="Button"
            ShowPreviousPageButton="false" />
          <asp:NumericPagerField ButtonCount="10" />
          <asp:NextPreviousPagerField ButtonType="Button"
            ShowPreviousPageButton="false" />

      <!-- This example uses Microsoft SQL Server and connects      -->
      <!-- to the AdventureWorks sample database. Use an ASP.NET    -->
      <!-- expression to retrieve the connection string value       -->
      <!-- from the Web.config file.                                -->
      <asp:SqlDataSource ID="ProductsDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:AdventureWorks_DataConnectionString %>"
        SelectCommand="SELECT P.ProductID, P.Name, P.Color, P.ListPrice, 
          FROM Production.Product AS P 
          INNER JOIN Production.ProductProductPhoto AS PPF ON P.ProductID = PPF.ProductID 
          INNER JOIN Production.ProductPhoto AS PF ON PPF.ProductPhotoID = PF.ProductPhotoID">


.NET Framework
Available since 3.5
Return to top