ListView GroupTemplate

This article is written by Pon Saravanan  on 12-Jul-10 Last modified on :25-Sep-10

ListView and Templates

ListView is a fantastic control when you want to render the tabular data in a customized way. It gives you a lot of templates to work with. These templates will improve the most used functionalities. This article explains about one of them, which is ListView GroupTemplate.

What is not covered?

The basic functionalities of ListView and how to bind the data to DataSource from SQL database are not covered in this article. Please refer to the ASP.Net Data Controls section for that.


This template is used mainly for determining the basic layout the control supposed to render. So in our case this will hold the groups. Further groups hold their respective items. Hence we need to specify the GroupPlaceholderID to the layout template not to the GroupTemplate.  I have placed a silver colored (as a background) box to contain all group boxes.

ListView GroupTemplate

As I already mentioned in the previous paragraph, we supposed to put the items in the groups so the ItemPlaceHolderId is planned to go to GroupTemplate. If you are unable to understand please refer to the screenshots and the source code for further information. I have placed a gray colored (as a background) box to contain all items.


Without this property the grouping will not be applied. So specify a number bigger than 1. I have used GroupItemCount as 5. So every 5 items in the list will be grouped.

Screen Capture


Source Code


<html xmlns="">
<head runat="server">
    <style type="text/css">
        .GroupBox/*to draw the outer box to contain groups*/
            width: 50%;
            background-color: silver;
            border: solid 1px gray;
        .ItemBox/*to draw the box for each group containing items*/
            width: 100%;
            margin:10px 10px 10px 10px;
            background-color: Gray;
            border: solid 1px Black;
    <form id="form1" runat="server">
        <asp:ListView runat="server" ID="ListView1"
            GroupPlaceholderID="GroupContainer" GroupItemCount="5"
                <asp:Panel runat="server" ID="GroupBox" CssClass="GroupBox">
                    <asp:Panel runat="server" ID="GroupContainer">
                <asp:Panel runat="server" ID="ItemBox" CssClass="ItemBox">
                    <asp:Panel runat="server" ID="ItemContainer">
                <asp:Label runat="server" ID="lblName"
                    Text='<%# Eval("ProductName")%>'></asp:Label>
                <br />

Code Behind(*.aspx.vb)

Imports System.Data.SqlClient
Imports System.Data
Partial Public Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, _
                            ByVal e As System.EventArgs) Handles Me.Load
        If (Not IsPostBack) Then
        End If
    End Sub
    Private Sub BindListView()
        ListView1.DataSource = GetData(String.Empty)
    End Sub
    Private ReadOnly Property ConnectionString() As String
            Return "Server=.\SQLEXPRESS;Database=NorthWind;Trusted_Connection=True"
        End Get
    End Property
    Private ReadOnly Property Connection() As SqlConnection
            Dim ConnectionToFetch As New SqlConnection(ConnectionString)
            Return ConnectionToFetch
        End Get
    End Property
    Public Function GetData(ByVal Expression As String) As DataSet
        Dim SelectQry = "select * from Products"
        Dim SampleSource As New DataSet
        Dim SampleDataAdapter As New SqlDataAdapter(SelectQry, ConnectionString)
        Return SampleSource
    End Function
End Class

    thank u 2/11/2011 6:01:27 AM

Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    

Spam Bot Trap


Select Theme