Tuesday, May 18, 2010

Merged header in ASP.Net GridView

When working with the ASP.Net GridView some times you need to have a header with merged cells. Like in the following example.


in ASP.Net you cannot find a direct method for merging the header cells as the above GridView. So you have to do some coding and tricky stuff. First of all you should create the GridView with the columns which you can find in the lowest row (row nearest to the data rows). when finished the code will be more likely to this with the formatting done.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onrowcreated="GridView1_RowCreated"
>
<Columns>
<asp:BoundField HeaderText="Id" DataField = "id">
<ItemStyle BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="email" DataField = "email">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="tp" DataField = "tp">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="purchase" DataField = "purchase">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="return" DataField="purchaseReturns">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="sales" DataField = "sales">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
<asp:BoundField HeaderText="return" DataField = "returns">
<ItemStyle BorderStyle="Solid" />
<HeaderStyle BackColor="Gray" ForeColor="White" BorderColor="White"
BorderStyle="Solid" />
</asp:BoundField>
</Columns>
</asp:GridView>

now comes the most interesting part. In the above example you can see that there are two rows on top of the header row which we were given by the GridView it self, So how can we add the other two rows best option is to use the GridView_RowCreated method. We have to do some customization in the above method to make our Grid looks like the example. First I will post the code and then explain it.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
GridView grid = (GridView)sender;
e.Row.Cells.RemoveAt(0); //remove the first cell from the header row

GridViewRow header = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert); //create a header row

TableCell headercell = new TableCell(); //create a cell to add to the row



//format cells as the requirement
headercell = new TableCell();
headercell.ColumnSpan = 2;
headercell.RowSpan = 1;
headercell.Text = "Purchase Details";
headercell.Font.Bold = true;
headercell.BorderStyle = BorderStyle.Solid;
headercell.BorderColor = System.Drawing.Color.White;
headercell.ForeColor = System.Drawing.Color.White;
headercell.BackColor = System.Drawing.Color.Gray;

header.Cells.Add(headercell); //add the cell to the header row

headercell = new TableCell();
headercell.ColumnSpan = 2;
headercell.RowSpan = 1;
headercell.Text = "Sales Details";
headercell.Font.Bold = true;
headercell.BorderStyle = BorderStyle.Solid;
headercell.BorderColor = System.Drawing.Color.White;
headercell.ForeColor = System.Drawing.Color.White;
headercell.BackColor = System.Drawing.Color.Gray;

header.Cells.Add(headercell);
grid.Controls[0].Controls.AddAt(0, header); //add the header row to the grid

//after adding a row top of the header then create another row to add
header = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);


headercell = new TableCell();
headercell.ColumnSpan = 1;
headercell.RowSpan = 3;
headercell.Text = "Id";
headercell.VerticalAlign = VerticalAlign.Middle;
headercell.Font.Bold = true;
headercell.BorderStyle = BorderStyle.Solid;
headercell.BorderColor = System.Drawing.Color.White;
headercell.ForeColor = System.Drawing.Color.White;
headercell.BackColor = System.Drawing.Color.Gray;

header.Cells.Add(headercell);

headercell = new TableCell();
headercell.ColumnSpan = 2;
headercell.RowSpan = 2;
headercell.Text = "Personal Details";
headercell.Font.Bold = true;
headercell.BorderStyle = BorderStyle.Solid;
headercell.BorderColor = System.Drawing.Color.White;
headercell.ForeColor = System.Drawing.Color.White;
headercell.BackColor = System.Drawing.Color.Gray;

header.Cells.Add(headercell);

headercell = new TableCell();
headercell.ColumnSpan = 4;
headercell.RowSpan = 1;
headercell.Text = "Year";
headercell.BorderStyle = BorderStyle.Solid;
headercell.BorderColor = System.Drawing.Color.White;
headercell.HorizontalAlign = HorizontalAlign.Center;
headercell.Font.Bold = true;
headercell.ForeColor = System.Drawing.Color.White;
headercell.BackColor = System.Drawing.Color.Gray;

header.Cells.Add(headercell);
grid.Controls[0].Controls.AddAt(0, header);

}
}


using the above method as the row created event in the GridView you can have the merged header as the Grid which is at the top of this article. Now lets see how it works.

First of all at the beginning of the method we have to check that whether we are referring to header row in the GridView because not only the header rows but also the data rows will fire this method. Because the sender object represent the GridView in this method we can get the GridView object out of that. Here the event argument is referring to the header row of the GridView so with e.Row attribute you can access the Row which fire the method.

If you see carefully at the GridView in design or the aspx code you can see the cell with the header text "Id" is not in the final GridView, for that we have a cell which has row span of 3 with the text "Id" that means we have to remove the cell which had the text "Id" otherwise what will happen is the new cells we are adding will add but also the existing cell will remain, which means we dont get the desired out put. so we have to remove that cell.

Then it all about adding a header row and adding formatted cells to the row and merging the GridView with that row. Which you have to concentrate is nothing other than the row span and column span. If you get it right (very easy) then you have what you want. I think you can understand the code to add cells to the row and row to the GridView just looking at them once.

Actually theres nothing new in code its only new in strategy, which means we can do some great things just with the technology but just thinking bit differently.




No comments:

Post a Comment