Tuesday, December 20, 2011

Multi Header Footer Gridview

You may come across a situation, where you may have to display multiple headers rather just single one, and also some of these header or footer values has to be updated dynamically.  Here is a simple example on how to do it using a simple ASPX page.

WebForm1.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Multi Header Gridview</title>
</head>
<body>
    <form id="form1" runat="server">
 
    <div id="searchArea" align=center>
        <asp:Button ID="btnGetData" runat="server" Text="Get Data" />
        <br />
 
    </div>
 
    <div align="center">
 
      <asp:GridView ID="gvwRecord" runat="server"  AutoGenerateColumns="false" FooterStyle-Wrap="false" 
                            EmptyDataText="No data is available for this search criteria." DataKeyNames="ID" AllowPaging="false"   > 
             <Columns>                                                                                                   
                <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-HorizontalAlign="left"/> 
                <asp:BoundField DataField="Name" HeaderText="Name"  ItemStyle-HorizontalAlign="left" ItemStyle-Wrap="false" /> 
                <asp:BoundField DataField="Age" HeaderText="Age"  ItemStyle-HorizontalAlign="Right"  ItemStyle-Wrap="false" /> 
                <asp:BoundField DataField="Sex" HeaderText="Sex" ItemStyle-HorizontalAlign="Right" />  
                <asp:BoundField DataField="Title" HeaderText="Title" ItemStyle-Wrap="false"/>                
            </Columns>
 
        </asp:GridView>
    </div>
    </form>
</body>
</html>

 

WebForm1.aspx.vb

The sample is generated for the test purpose

Public Class WebForm1
    Inherits System.Web.UI.Page
 
 
    Protected Sub btnGetData_Click(sender As Object, e As EventArgs) Handles btnGetData.Click
        Dim tst As New TestRecord
        Dim recs As List(Of TestRecord) = tst.LoadData
        Session("Data") = recs
        gvwRecord.DataSource = recs
        gvwRecord.DataBind()
    End Sub
 
    Private Sub gvwRecord_RowCreated(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvwRecord.RowCreated
        If e.Row.RowType = DataControlRowType.Header Then
            Dim headerCell1 As TableCell = New TableCell()
            Dim headerCell2 As TableCell = New TableCell()
 
            headerCell1.ColumnSpan = 3
            headerCell1.Text = "Main Header 1"
            headerCell1.BackColor = Drawing.Color.LightGray
            headerCell1.HorizontalAlign = HorizontalAlign.Center
 
            headerCell2.ColumnSpan = 2
            headerCell2.Text = "Main Header 2"
            headerCell2.BackColor = Drawing.Color.LightGray
            headerCell2.HorizontalAlign = HorizontalAlign.Center
 
            Dim rowHeader1 As GridViewRow = New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
            rowHeader1.Cells.Add(headerCell1)
            rowHeader1.Cells.Add(headerCell2)
            rowHeader1.ForeColor = Drawing.Color.Black
            rowHeader1.Font.Bold = True
            rowHeader1.Visible = True
            gvwRecord.Controls(0).Controls.AddAt(0, rowHeader1)
 
            Dim fields2 As TableCellCollection = e.Row.Cells
            Dim headerCell11 As TableCell = New TableCell()
            Dim headerCell12 As TableCell = New TableCell()
 
            headerCell11.ColumnSpan = 2
            headerCell11.Text = "ID and Name"
            headerCell11.BackColor = Drawing.Color.Maroon
 
            headerCell12.ColumnSpan = 3
            headerCell12.Text = "Age and Sex"
            headerCell12.BackColor = Drawing.Color.Maroon
 
            Dim rowHeader2 As GridViewRow = New GridViewRow(1, 1, DataControlRowType.Header, DataControlRowState.Normal)
            rowHeader2.Cells.Add(headerCell11)
            rowHeader2.Cells.Add(headerCell12)
 
            rowHeader2.Font.Size = 12
            rowHeader2.ForeColor = Drawing.Color.White
            rowHeader2.HorizontalAlign = HorizontalAlign.Center
            rowHeader2.Visible = True
            rowHeader2.Font.Bold = True
            gvwRecord.Controls(0).Controls.AddAt(1, rowHeader2)
 
        ElseIf e.Row.RowType = DataControlRowType.Footer Then
            Dim footerCell1 As TableCell = New TableCell()
            Dim footerCell2 As TableCell = New TableCell()
            Dim footerCell3 As TableCell = New TableCell()
            Dim footerCell4 As TableCell = New TableCell()
 
            Dim dataRecs As List(Of TestRecord) = Nothing
            Dim totalRec As Integer = 0
            Dim totalMale As Integer = 0
            Dim totalFemale As Integer = 0
            Dim totalAgeBelow30 As Integer = 0
            Dim totalAgeAbove30 As Integer = 0
 
 
            If Session("Data") IsNot Nothing Then
                dataRecs = DirectCast(Session("Data"), List(Of TestRecord))
                If Not dataRecs Is Nothing AndAlso dataRecs.Count > 0 Then
                    totalRec = dataRecs.Count
                    Dim list1 = From r As TestRecord In dataRecs Where r.Sex = "Male"
                    totalMale = list1.Count
 
                    Dim list2 = From r As TestRecord In dataRecs Where r.Sex = "Female"
                    totalFemale = list2.Count
 
                    Dim list3 = From r As TestRecord In dataRecs Where r.Age < 30
                    totalAgeBelow30 = list3.Count
 
                    Dim list4 = From r As TestRecord In dataRecs Where r.Age >= 30
                    totalAgeAbove30 = list4.Count
 
                End If
            End If
 
            footerCell1.Text = "Summary"
            footerCell2.Text = "Age [< 30yrs: " & totalAgeBelow30.ToString() & "] [>=30yrs:" & totalAgeAbove30.ToString() & "]"
            footerCell3.ColumnSpan = 2
            footerCell3.Text = "Male: " & totalMale.ToString() & " Female:" & totalFemale.ToString()
            footerCell4.Text = "Total Count:" & totalRec.ToString()
 
            Dim rowFooter1 As GridViewRow = New GridViewRow(gvwRecord.Rows.Count + 3, 0, DataControlRowType.Footer, DataControlRowState.Normal)
            rowFooter1.Cells.Add(footerCell1)
            rowFooter1.Cells.Add(footerCell2)
            rowFooter1.Cells.Add(footerCell3)
            rowFooter1.Cells.Add(footerCell4)
            rowFooter1.ForeColor = Drawing.Color.Black
            rowFooter1.BackColor = Drawing.Color.LightGray
            rowFooter1.HorizontalAlign = HorizontalAlign.Left
            rowFooter1.Font.Bold = True
            rowFooter1.Visible = True
 
            For cellCount As Integer = 0 To rowFooter1.Cells.Count - 1
                rowFooter1.Cells(cellCount).Wrap = False
            Next
            gvwRecord.Controls(0).Controls.AddAt(gvwRecord.Rows.Count + 3, rowFooter1)
 
        End If
    End Sub
End Class
 
Public Class TestRecord
    Public Property ID As Integer = 0
    Public Property Name As String = String.Empty
    Public Property Age As Integer = 18
    Public Property Sex As String = "Male"
    Public Property Title As String = "CEO"
 
    Public Sub New()
 
    End Sub
 
    Public Sub New(ByVal ID As Integer, ByVal name As String, ByVal age As Integer, ByVal sex As String, ByVal title As String)
        Me.ID = ID
        Me.Name = name
        Me.Age = age
        Me.Sex = sex
        Me.Title = title
    End Sub
 
    Public Function LoadData() As List(Of TestRecord)
        Dim recs As New List(Of TestRecord)
        For i = 0 To 10
            Dim rec As New TestRecord(i, "LastName" & i.ToString & ", FirstName" & i.ToString(), 25 + i, IIf(i Mod 2 = 0, "Male", "Female").ToString, "Title #" & i.ToString)
            recs.Add(rec)
        Next
        Return recs
    End Function
End Class

Output at the runtime

No comments: