|
|
|
Multi Header GridView - Part I
|
|
|
|
|
|
|
|
|
| |
2 people have rated this article
|
|
|
|
|
|
|
|
|
|
|
This article describes how to show an extra header for a GridView.
In some of the applications, we need fancy headers for our control. The traditional GridView supports only one header to show the column names as the title.
For example, we are displaying the sales account details for sales shop. We also want to display a title to describe which city does it belongs to. To display an
extra header on the GridView, ASP.NET infrastructure offers lot of ways to add an extra header to the grid view. We can add the extra header in the OnDatabound, OnRowDataBound Override events. This method has little drawback. Whenever a post back occurs we will loose our extra header.
Is there any possible way to keep the extra header after the postback?
YES!
We can make this happen by rendering our extra header in HTML code through SetRenderMethodDelegate methode.
Please refer http://msdn.microsoft.com/en-us/library/system.web.ui.rendermethod.aspx for more details.
Create Your Own Custom Control
So our very first step is creating a class file and inherits GridView Class.
namespace CustomControls
{
public class DoubleHeadedGrid : GridView
{
public DoubleHeadedGrid()
{
}
}
}
OnRowCreated() Event
.NET 2.0 framework offers lot of new features. We are going to use the new .Net 2.0 feature OnRowCreated method to render our extra header.
Before GridView control can be rendered,a GridView Row object must be created for each row.The RowCreated event is raised when each row of the GridView control is created. This enables you provide your own event handling method that adds extra
content to the rows.
This is the preferred method for modifying GridView in the derived class. For those who are using old versions, override OnDataBound or OnRowDataBound method in the derived class to create a custom routine.
But disadvantage is griview does not keep the extra header after the postback.
protected override void OnRowCreated(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{ }
base.OnRowCreated(e);
}
When override OnRowCreated Method,we have to call the base’s class OnRowCreated method.So that our registered delegates will receive the event.
SetRenderMethodDelegate() Method To Perform Custom Routine
To perform custom routine such as adding additional header to the GridView, we use the Control.SetRenderMethodDelegate(CreateExtraHeader) method. This method assigns an event handler delegate to render the server control
and its content into its parent control.
e.Row.SetRenderMethodDelegate(YourRenderMethod).
It represents the method that renders the specified Control container to the specified
HtmlTextWriter.
Render Method
Your render method will be:
private void CreateExtraHeader(HtmlTextWriter PageOutput, Control HeadContainer)
{
}
When a GridView is rendered to a page, then the content of the control will be a HTML table. So to add a new row, you can design a table row in html and add it to HTMLTextWriter .
To render Extra Header,Add the following code to the render method.
String ExtraHeader = String.Format("<td colspan='{0}'>My Title Goes Here</td>", HeadContainer.Controls.Count);
PageOutput.Write(ExtraHeader);
Now we got the title, which would be the very first row.
Next row would be column names orginally from asp.net GridView Control.
To render GridView Coulmns, add the following code to the render method.
PageOutput.RenderBeginTag("tr");
for (int i = 0; i < HeadContainer.Controls.Count; i++)
{
TableCell cell = (TableCell)HeadContainer.Controls[i];
cell.RenderControl(PageOutput);
}
We are done with creating our own custom control.Now we can use this derived class as GridView Control.
Using MultiHeader Custom GridView Class In ASPX page
Create a aspx page. Add the following register tag next to the page tag.
<%@ Register TagPrefix="cc1" Namespace="CustomControls" %>
Drag and drop a grid view from the tool box. In Source Mode,replace asp with cc1.Replace GridView with your class Name.
<cc1:DoubleHeadedGrid ID="Gridview1" runat="server" ></cc1:DoubleHeadedGrid>
Our control is ready for test drive.
To make more customizable,we are going to add properties to the DoubleHeadedGrid class. First property used to define the visibility of the extra header. Just like ShowHeader and ShowFooter property of GridView, you
can turn off the extra header if you don’t want to display it.
public Boolean ShowExtraHeader
{
get { return _showExtraHeader; }
set { _showExtraHeader = value; }
}
Second property sets the Title of the GridView to make the control more meaningful.
public String ExtraHeaderText
{
get { return _extraHeaderText; }
set { _extraHeaderText = value; }
}
Right Click on the GridView, hit properties. Now we can see ShowExtraHeader and
ExtraHeaderText properties in property window.
Adding Styles to the Extra Header
The extra header is plain html code. It doesn’t contain styles. We can pass the styles as a string like we did for the extra header title.
String ExtraHeader = String.Format("<td colspan='{0}' style='{1}'>My Title Goes Here</td>", HeadContainer.Controls.Count,MyStyleString);
To make it more convinient we get the styles from default gridview header.
It should be same as GridvIew default header Style.
String Style = String.Format(@"font: 10pt Verdana,sans-serif;
text-align: center;
color:{0};
background-color:{1};
border: 1px solid {2};
font-weight:{3};
padding:2px 4px 2px 4px; ", ColorTranslator.ToHtml(this.HeaderStyle.ForeColor)
, ColorTranslator.ToHtml(this.HeaderStyle.BackColor)
, ColorTranslator.ToHtml(this.HeaderStyle.BorderColor)
,this.HeaderStyle.Font.Bold?"bold":"");
In our next article,we will discuss about adding Printer Friendly option to the GridView.
|
|
Please Sign In In to post messages.
|
|
|
|
bruce
|
Posts: 2
Registered:
Sep 11, 2008
|
|
|
|
|
|
|
dnivdniv
|
Posts: 1
Registered:
May 19, 2009
|
|
|
Good explanation of Objects
|
|
|
Excellent introduction to the code behind of a Gridview
|
|
|
|
|
|
admin
|
Posts: 1
Registered:
Jun 13, 2008
|
|
|
|