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.
LayoutTemplate
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.
GroupItemCount
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
Markup(*.aspx)
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head runat=
"server">
<title></title>
<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;
}
</style>
</head>
<body>
<form id=
"form1" runat=
"server">
<div>
<asp:ListView runat=
"server" ID=
"ListView1" GroupPlaceholderID=
"GroupContainer" GroupItemCount=
"5" ItemPlaceholderID=
"ItemContainer">
<LayoutTemplate>
<asp:Panel runat=
"server" ID=
"GroupBox" CssClass=
"GroupBox">
<asp:Panel runat=
"server" ID=
"GroupContainer">
</asp:Panel>
</asp:Panel>
</LayoutTemplate>
<GroupTemplate>
<asp:Panel runat=
"server" ID=
"ItemBox" CssClass=
"ItemBox">
<asp:Panel runat=
"server" ID=
"ItemContainer">
</asp:Panel>
</asp:Panel>
</GroupTemplate>
<ItemTemplate>
<asp:Label runat=
"server" ID=
"lblName" Text=
'<%# Eval("ProductName")%>'></asp:Label> <br />
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
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
BindListView()
End If
End Sub
Private Sub BindListView()
ListView1.DataSource = GetData(String.Empty)
ListView1.DataBind()
End Sub
Private ReadOnly Property ConnectionString() As String
Get
Return "Server=.\SQLEXPRESS;Database=NorthWind;Trusted_Connection=True"
End Get
End Property
Private ReadOnly Property Connection() As SqlConnection
Get
Dim ConnectionToFetch As New SqlConnection(ConnectionString)
ConnectionToFetch.Open()
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)
SampleDataAdapter.Fill(SampleSource)
Return SampleSource
End Function
End Class