Friday, September 4, 2009

Insert Group Headers within GridView [REVISITED]

We should consider using AJAX to solve the problem of expanding/collapsing sub-sections within the grid view. [View Sample]
AJAX elements used: Collapsible Panel
The idea:
- Insert an AJAX Script Manager
- Define 2 Data Sources (for GridView1 and GridView2)
- Insert an AJAX Update Panel, which nests a ContentTemplate, and contains all the elements below.
GridView1
- Links to the data source that retrieves the list of group headers.
- OnRowCreated event handler: GridView1_RowCreated
- Contains 1 column, which is a TemplateField
- Nested inside the TemplateField tag is an ItemTemplate, which nests 2 Panels (Panel1 and Panel2) and an AJAX CollapsiblePanelExtender.
Panel1
- Represents the group header, so customise accordingly (i.e with the expand icon)
Panel2
- Contains GridView2
GridView2
- Links to another data source that retrieves the list of item associated with the group header
- Similar to a normal grid view, add the boundfield tags and initialise the DataField to bind the values of the column.
CollapsiblePanelExtender
[cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel2" CollapsedSize="0" Collapse="True" ExpandControlID="Panel1" CollapseControlID="Panel1" ExpandDirection="Vertical" /]
* Can also add attributes like expand/collapse image

* Remember to add the following tag at the top of the .aspx file
[%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %]

In the .cs page, method for GridView1_RowCreated(object sender, GridRowEventArgs e) should contain:
if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource ctrl = e.Row.FindControl(”SqlDataSource1”) as SqlDataSource;
    if (ctrl != null && e.Row.DataItem != null)
      ctrl.SelectParameters["CustomerID"].DefaultValue = ((DataRowView)e.Row.DataItem)["CustomerID"].ToString();
}

Source:
http://yasserzaid.wordpress.com/2008/12/21/ajax-collapsible-panel-with-gridview-master-and-detail/
http://mosesofegypt.net/post/Building-a-grouping-Grid-with-GridView-and-ASPNET-AJAX-toolkit-CollapsiblePanel.aspx

No comments:

Post a Comment