Monday, November 12, 2012

Merging rows in GridView

Let us take the same example and extend to get the row header.

To understand the requirement, we are going to merge the Year columns. If the same year repeats for next row, it needs to be merged. To achieve this, we can use DataBound event of GridView. 

The C# implementation goes as below (the other events are same as described first example): 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
protected void grdViewProducts_DataBound(object sender, EventArgs e)
{
    //Starting from last Row Previous Row (if 12 rows in our grid)
    // merging last row and last previous row if same value (take 12, 11 and merge if same year)
    // Then last previous row with second last previous row (take 11, 10 and merge if same year)
    // etc., till first row and second row merging
    for (int rowIndex = grdViewProducts.Rows.Count - 2; rowIndex >= 0; rowIndex--)
    {
        GridViewRow row = grdViewProducts.Rows[rowIndex];
        GridViewRow previousRow = grdViewProducts.Rows[rowIndex + 1];
        if (row.Cells[0].Text == previousRow.Cells[0].Text)
        {
            if (previousRow.Cells[0].RowSpan < 2)
            {
                row.Cells[0].RowSpan = 2;
            }
            else
            {
                row.Cells[0].RowSpan = previousRow.Cells[0].RowSpan + 1;
            }
            previousRow.Cells[0].Visible = false;
        }
        row.Cells[0].CssClass = "HeaderStyle"; // This is to just give header color, font style
    }
}

We have to register DataBound event in the GridView script also 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<asp:GridView ID="grdViewProducts" runat="server" AutoGenerateColumns="False" TabIndex="1"
    Width="100%" DataSourceID="XmlDataSource1" ShowFooter="false"
    CellPadding="4" ForeColor="Black" GridLines="Vertical"
    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
    OnRowDataBound="grdViewProducts_RowDataBound"
    onrowcreated="grdViewProducts_RowCreated"
    ondatabound="grdViewProducts_DataBound" >
    <RowStyle BackColor="#F7F7DE" />
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="Year" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="Period" HeaderText="Period" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="AuditedBy" HeaderText="Audited By" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="DirectRevenue" HeaderText="Direct" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:BoundField DataField="ReferralRevenue" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:TemplateField HeaderText="Total">
            <ItemStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:Label runat="server" ID="lblTotalRevenue" Text="0" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
     
    <FooterStyle BackColor="#CCCC99" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/RevenueReport.xml"></asp:XmlDataSource>

Here are the outputs of our example:

Output of merging adjacent rows to get Row header (adding to first example)

source : http://www.dotnettwitter.com/2010/12/how-to-create-multiple-row-header-and.html

No comments:

Post a Comment