|
|
|
Nested GridView With Printer Friendly Option - Part III
|
|
|
|
|
|
|
|
|
| |
1 people have rated this article
|
|
|
|
|
|
|
|
|
|
|
In the previous articles, we implemented extra header,printer friendly options to the GridView.
To extend further, this article describes about how to arrange data in heirarchical format.
It is always fancy if you give a drill down option to the traditional gridview.
To make the nested row,first we decide where to place nested row content.
It is easy render the gridview if you place your nested contet in fist column or last column of each row of GridView. If you want to put it in the middle of the GridView,
then add a property to custom control class to hold the nested content ‘s column id. Then add your functionality based on the column id.
Nested Contents
Assuming all the nested contents are placed in the last column of the GridView.
After rending, the HTML content of the GridView looks like this:
<tr>
<td>
Column1 Values
</td>
<td>
Column2 Values
</td>
<td>
Column3 Holds Nested Content Values
</td>
</tr>
To make the gridview look like tree structure,you need to split this row into two rows. You put the nested content in a separate row.
<tr>
<td>
Column1 Values
</td>
<td>
Column2 Values
</td>
</tr>
<tr>
<td>
Column3 Holds Nested Content Values
</td>
</tr>
Drill Down Buttons
Now we got two rows,first represents the master row,second holds nested data.
Next step,You need to hide the nested contents.So add style tag with display:none value to nester content row.
To show this nested contents,you provide a button or anchor tag. It should look like MSDN website drill down menu. So add new cell to the left side of the master row.
Then add anchor tag with ‘+’ as the name.Then you need to have a function to show the nested content when it is clicked.To make look and feel effect, best shot is javascript.So add onclick event to anchor and display thenested row when it is clicked.
<tr>
<td>
<a onclick=’ShowNestedRow(this)’>+</a>
</td
<td>
Column1 Values
</td>
<td> Column2 Values </td>
</tr>
<tr style=’display:none’>
<td> Column3 Holds Nested Content Values </td>
</tr>
Next step, use render methode to create all these rows and cells(refer:Multi GridView
- Part1).
//This method is new in the .NET Framework version 2.0.
protected override void OnRowCreated(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
//Represents the method that renders the specified Control container to the specified HtmlTextWriter.
e.Row.SetRenderMethodDelegate(CreateExtraHeader);
}
else if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Alternate)
HasAlternateRow = true;
//Represents the method that renders the specified Control container to the specified HtmlTextWriter.
e.Row.SetRenderMethodDelegate(RenderCells);
}
// When overriding OnRowCreated in a derived class, be sure to call the base class's
//OnRowCreated method so that registered delegates receive the event.
base.OnRowCreated(e);
}
This class has tow render methods,one for header and second for data rows.
Add the following drill down column to your class:
HtmlAnchor DrillDownAnchor = new HtmlAnchor();
DrillDownAnchor.Attributes["id"] = "DrillDown" + iRowIndex;
DrillDownAnchor.Attributes["onclick"] = "ShowNestedRow(this)";
DrillDownAnchor.InnerText = "+";
DrillDownAnchor.Attributes["class"] = "DrillDownAnchorTag";
TableCell DrillDownCell = new TableCell();
DrillDownCell.Controls.Add(DrillDownAnchor);
DrillDownCell.RenderControl(PageOutput);
You name the drill down menu with suffix Row Index. So that in javascript function, it would be very easy to access and you will get a unique ID even if you have many
nested GridViews in a page. Be sure to give same color combination to nested row
and master row.
Register the javascript styles in oninit() method. You can also
add directly to the page.
To make more customizable add a dill down button to the header. When the header dill down button is clicked, GridView shows all the nested
content and vice versa.
Adding an extra header to the Nested GridView is same as adding a header to simple
GridView.For more information, please refer
Adding Printer Friendly Option To Multi Header GridView - Part II
article.
Multi Header Nested GridView Walkthrough
- Automatically Generate Styles for the Button.
- Adding Print Button and Script to the Extra Header.
- Automatically re-structure the Print Button position and Header text according to
the number of columns present in GridView Header.
Printer Friendly Nested GridView has ShowExtraHeader property to turn on/off the
extra header. Other important feature master drill down button located on the header.
This will open/close all nested rows in a sigle click. You can also nest a Printer
Friendly GridView in a printer Friendly Nested Gridview.
In the next article, I am going to write about adding Save as Excel Option to the
GridView without any postback.
|
|
Please Sign In In to post messages.
|