Asp.Net News
Free Tech Magazines
Asp.Net Web Hosting
Suggest Us
Link to Us
Feeds Subscription
Questions & Answers
Tips & Tricks
 Simple Parent-Child Data Binding using Accordion Control
Posted by Moderator1 on 7/20/2008 1:51:15 AM Category: AJAX
Total Views : 114651
Add to my favorites
Email to friend
As we know, Accordion control is one of the Ajax Toolkit web controls, which is used to display multiple panes one at a one. User can view the contents inside the pane one by one by choosing the header section. In this article, we show you how to bind the Accordion control with data source at run-time. Furthermore, to enrich the quality of this article, we took the concept of parent-child relationship, by introducing a GridView control inside the Accordion Control.

An Accordion control contains two template sections such as HeaderTemplate and the ContentTemplate. As the name suggests, the HeaderTemplate sections will have all the controls, which has to appear in the header pane of the Accordion control. And its corresponding content and controls can to be placed in the ContentTemplate section.

Accordion Control Data Bind

To bind the Accordion control, we have make use of the DataSource property and the DataBind method. For demo purpose, we are going to use Customer Table with Customer Type as the Header information and based on Customer Type, its corresponding customers will be listed in the Content Section in a GridView Control. Then the data in the GridView can be used for Edit, Update or Delete functions.

To start with, open an Ajax-enabled website in the Visual Studio 2005, then in the Default.aspx place a ScriptManager, an UpdatePanel and inside the UpdatePanel drag and drop an Accordion control. Switch to the Html-Code view, inside the Accordion control’s tag, insert and sections manually.

First On <HeaderTemplate> Section

Now in the <HeaderTemplate> section, place a Label Control and write code to bind it to display the value of Customer Type (Cus_Type).

<asp:Label runat="server" Id="lbHeaderId" Text='<%# Eval("Cus_Type") %>'></asp:Label>

In the Code-behind page, write a method to bind the Accordion control.
private void BindAccordion()
  sql = "Select distinct Cus_Type from Customers"; 
  SqlDataAdapter da = new SqlDataAdapter(sql, “YourConnectionString”); 
  DataTable dt = new DataTable(); 

  Accordion1.DataSource = dt.DefaultView; 

The above BindAccordion method, fetches distinct Customer Type from the Customer table, bind it with the Accordion control. Call this BindAccordion method in the Page load event.

protected void Page_Load(object sender, EventArgs e)


Important Points to Remember before Binding an Accordion Control:

1. You cannot bind an Accordion control directly with a DataSet or DataTable. You must convert it to a DataView before you bind it to the Accordion control.

2. SuppressHeaderPostbacks: Set the SuppressHeaderPostbacks property of the Accordion control to TRUE to avoid postback when you click the Header section of the Accordion control.

3. Include AjaxControlToolkit namespace on your Code-Behind to access the methods and properties of the Accordion control.

So after you do all the above points, save it and run it in your browser. You can see the Accordion control populated with the Header information only. So we are half way done.
Focus on <ContentTemplate>

Now we are going to work on the <ContentTemplate> section of the Accordion control. In this section, place a HiddenField and bind its value with Cus_Type. This hidden field is responsible for maintaining the parent-child relationship between the accordion control and the GridView control. That means the Customer Type value in both the Header and Content section has to be uniformly maintained. In Header section we have a Label control, on the same way in Content section we place this hidden field.

<asp:HiddenField runat="server" id="hidCusType" value='<%# Eval("Cus_Type") %>'></asp:HiddenField>

Next place a Gridview control inside the <ContentTemplate> section exactly below the HiddenField. As we are going to do Edit, Update and Delete operations in the GridView control, we have to set the DataKeyNames value with Cus_Type and Cus_Code, which meant for Customer Type and Customer Code respectively. Then set the value of AutoGenerateColumns property as false. That means we have to add columns in the GridView control which we want to display. So by clicking the Smart Tag at the right-side corner of the GridView, choose Add New Columns and specify the Column names in the Customer Table that you want to display. For this article purpose, we have added columns for Customer Name (Cus_Name), Gender (Cus_Gender), City (Cus_City) and State (Cus_State). Also add CommandField columns for Edit and Delete functions. As we are going to perform Edit and Update operations, convert all the BoundField columns to a TemplateField column by choosing the Property of the GridView > Columns > Convert this field into a TemplateField.

Now all the TemplateField column which will have a Label control at the <ItemTemplate> section and a TextBox control at the <EditItemTemplate> section. Just change the ID value of the Name, Gender, City, State Textbox as TxCusName, TxCusGender, TxCusCity and TxCusState respectively.

Next add events for the GridView control, to display and manipulate the data within the GridView control as follows:

For Edit, add OnRowEditing event and specify the event name as GridView1_RowEditing.
For Update, add OnRowUpdating event and specify the event name as GridView1_RowUpdating.
For Cancel Edit, add OnRowCancelingEdit event and specify the event name as GridView1_RowCancelingEdit.
For Delete, add OnRowDeleting event and mention its event name as GridView1_RowDeleting

Abstract to Set-up GridView control:
1. Set DataKeyNames value
2. Set AutoGenerateColumns as false
3. Add BoundField columns and CommandField columns for Edit and Delete.
4. Convert BoundField columns to TemplateField columns
5. In TemplateField > EditItemTemplate > change the ID of the TextBoxes.
6. Add events for Edit, Update, Cancel and Delete.

Bind the GridView inside Accordion Control:

In the OnItemDataBound event of the Accordion control, add the following Code.

protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
  if (e.ItemType == AccordionItemType.Content) 
    GridView GridView1 = (GridView)e.AccordionItem.FindControl("GridView1"); 
    HiddenField hidCusType = (HiddenField)e.AccordionItem.FindControl("hidCusType"); 
    BindGrid(GridView1, hidCusType.Value); 

Point is that, we find the GridView and HiddenField controls, and pass the GridView reference and the HiddenField value to a BindGrid method. The BindGrid method use the Customer Type value to fetch data and bind it to the corresponding GridView control.
private void BindGrid(GridView Grid, string lCustomerType)
  string sql = "Select * from Customers Where Cus_Type=@CustomerType"; 
  SqlDataAdapter da = new SqlDataAdapter(sql, cnstr); 
  da.SelectCommand.Parameters.Add("@CustomerType", SqlDbType.VarChar, 20).Value = lCustomerType; 

  DataTable dt = new DataTable(); 

  Grid.DataSource = dt; 

That’s it. Now save everything and run this page. You can see, Accordion control with Header Information and when you click on the Header section, it will expand and show the GridView control with the corresponding data.

Add Events to the GridView control inside Accordion Control

To add events, first thing to consider is to identify which GridView inside the Accordion control is firing the event. This can be identified easy with a single line of code. See the RowEditing Event below.
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
  GridView GridView1 = (GridView)sender;
  GridView1.EditIndex = e.NewEditIndex;
  BindGrid(GridView1, GridView1.DataKeys[0].Value.ToString());
So by creating a GridView object from the sender object, its easy to identify the calling GridView control and its corresponding operations to take place. Everytime we call the BindGrid method by passing the calling GridView reference and the Customer Type value which will be maintained in the GridView’s DataKeyNames value.

Cancel Event - OnRowCancelingEdit: 

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
  GridView GridView1 = (GridView)sender;
  GridView1.EditIndex = -1;
  BindGrid(GridView1, GridView1.DataKeys[0].Value.ToString());

Update Event - OnRowUpdating:

In the RowUpdating event, additionally we have to find the TextBox control which is in Edit Mode, by using the RowIndex property of the GridView control. Use those TextBox values and the Customer Code maintained in the GridView control’s DataKeyNames to update the corresponding row in the database. Finally call the BindGrid method as usual.

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
  GridView GridView1 = (GridView)sender; 

  TextBox TxCusName = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusName"); 
  TextBox TxCusGender = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusGender"); 
  TextBox TxCusCity = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusCity"); 
  TextBox TxCusState = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusState"); 

  string sql = "Update Customers Set Cus_Name=@CustomerName,"
+ "Cus_Gender=@CustomerGender, Cus_City=@CustomerCity, "
+ " Cus_State=@CustomerState, Cus_Type=@CustomerType "
+ "Where Cus_Code=@CustomerCode"; 

  SqlConnection conn = new SqlConnection(ConnectionString); 
  SqlCommand cmd = new SqlCommand(sql, conn); 
  cmd.Parameters.Add("@CustomerCode", SqlDbType.Int).Value = 
  cmd.Parameters.Add("@CustomerName", SqlDbType.VarChar, 50).Value = TxCusName.Text; 
  cmd.Parameters.Add("@CustomerGender", SqlDbType.VarChar, 6).Value = TxCusGender.Text; 
  cmd.Parameters.Add("@CustomerCity", SqlDbType.VarChar, 50).Value = TxCusCity.Text; 
  cmd.Parameters.Add("@CustomerState", SqlDbType.VarChar, 50).Value = TxCusState.Text; 


  GridView1.EditIndex = -1; 
  BindGrid(GridView1, GridView1.DataKeys[e.RowIndex].Values[0].ToString()); 


Delete Event – OnRowDeleting:

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
  GridView GridView1 = (GridView)sender; 
  string sql = "Delete From Customers Where Cus_Code=@CustomerCode"; 

  SqlConnection conn = new SqlConnection(ConnectionString); 
  SqlCommand cmd = new SqlCommand(sql, conn); 
  cmd.Parameters.Add("@CustomerCode", SqlDbType.Int).Value =
  BindGrid(GridView1, GridView1.DataKeys[e.RowIndex].Values[0].ToString());

Done. Now save the codes you have done above. Run it in your browser. You can see the Accordion control populated with Customer Type and when you click the header of the Accordion control, it will expand to show the GridView control populated with data based on the Customer Type. You can Edit the data, Update it and Delete the rows.

Complete Source Code of Accordion & GridView Control:
<cc1:Accordion id="Accordion1" runat="server" Width="100%" SuppressHeaderPostbacks="true" OnItemDataBound="Accordion1_ItemDataBound" >

<asp:Label runat="server" Id="lbHeaderId" Text='<%#Eval("Cus_Type") %>'> </asp:Label>


<asp:HiddenField runat="server" id="hidCusType" value='<%#Eval("Cus_Type") %>'> </asp:HiddenField>

<asp:GridView runat="server" id="GridView1" AutoGenerateColumns="False" OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit" DataKeyNames="Cus_Type,Cus_Code" OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" >


<asp:TemplateField HeaderText="Name" SortExpression="Cus_Name">
<asp:TextBox ID="TxCusName" runat="server" Text='<%# Bind("Cus_Name") %>' CssClass="InputFieldLogin"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Cus_Name") %>' ></asp:Label>

<asp:TemplateField HeaderText="Gender">
<asp:TextBox ID="TxCusGender" runat="server" Text='<%# Bind("Cus_Gender") %>' CssClass="InputFieldLogin" width="50px"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Cus_Sex") %>'></asp:Label>

<asp:TemplateField HeaderText="City">
<asp:TextBox ID="TxCusCity" runat="server" Text='<%# Bind("Cus_City") %>' CssClass="InputFieldLogin"></asp:TextBox>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("Cus_City") %>'></asp:Label>

<asp:TemplateField HeaderText="State">
<asp:TextBox ID="TxCusState" runat="server" Text='<%# Bind("Cus_State") %>' CssClass="InputFieldLogin"></asp:TextBox>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Cus_State") %>'></asp:Label>

<asp:CommandField HeaderText="Update" ShowEditButton="True"> </asp:CommandField>

<asp:CommandField HeaderText="Delete" ShowDeleteButton="True">

<asp:Label ID="Label1" runat="server" CssClass="WarnBold" Text="No Records Found."></asp:Label>

Click here to view the Accordion Control with GridView
Viewer's Comments
Posted by yosef on 7/23/2008 8:33:16 AM
Nice work! This is what I have been looking for a long time.You made my day. Thank you and keep up the good work
Posted by Prashanth on 7/29/2008 3:58:59 AM
Hello, It is a nice article, I am looking for this event code, GridView1_RowDataBound If you can provide me the code it will be a great help. Thanks
Posted by Amit Kohli on 12/17/2008 5:08:42 PM
Definitely one of the better articles on Accordion/Gridview. Thanks, Amit Kohli
Posted by Ta Quoc Anh on 2/3/2009 4:12:00 AM
Please tell me how to display two columns in dropdownlist
Posted by Rohit on 2/11/2009 1:23:21 AM
but i want when we click on second pane then gridview of fist pane should be disable or agian bind grid view..
Posted by kedar on 2/25/2009 12:33:37 AM
Hi I am giving error at /* AccordionItemType.Content */.
Posted by shiv on 3/5/2009 4:42:26 AM
This is very nice to see , each and every step in code is very clear. It will help more to understand the grid inside accrdian.
Posted by 10 on 4/2/2009 8:05:26 AM
very good
Posted by M.Ram. on 5/4/2009 4:38:47 AM
its very nice.
Posted by prem on 5/7/2009 4:07:07 AM
code for binding accordion with database
Posted by irshad on 5/19/2009 9:13:18 AM
This is very nice to see , each and every step in code is very clear. It will help more to understand the grid inside accrdian
Posted by Vikram on 5/29/2009 1:10:30 AM
You make my day sir. i jst tired to find how to bind accordion with database.. thanks sir. it such a great article...
Posted by Qasim Ali on 6/1/2009 10:54:13 AM
Great article. I want to bind gridview based using entity sql how I can accomplish it please.
Posted by shital on 6/15/2009 2:59:16 AM
its really good example. m requesting can u plz attach some zip file for every article to download it and understand easily. nice artical thanks shital jamdade
Posted by Matteo on 7/16/2009 7:15:41 AM
I am really grateful for your kindness to share this with us. Ah! if I just found it last week...
Posted by mohanrao on 8/4/2009 7:02:25 AM
HI, This is a very good article. I liked it. if u can send more examples on accordion..
Posted by Bhavin on 8/11/2009 6:36:50 AM
nice but add some more feature with screen shot
Posted by Nazia on 8/11/2009 8:15:07 AM
This is really an excellent article.It helped me a lot. I wanted to know if it is possible to add GridViewSelectedEventArgs bcoz i want to know the index of the selected row in the gridview. i added this event but it did not help me. Can u plz help me out here. Thank you.
Posted by Baljeet on 8/31/2009 2:55:08 AM
HI, Very nice article............It Realy very helpfull
Posted by Alejandro on 9/22/2009 5:23:21 PM
Bien chvr el ejemplo Man
Posted by kiran on 10/29/2009 10:48:39 AM
Really a nice article ! Thanks a lot.
Posted by Venkatesh on 12/17/2009 11:07:16 PM
Nice work. It ll reduce my pressure from my company..
Posted by sandeep on 2/24/2010 12:34:48 AM
how to use pageindex changin event while using gridview inside accordion ?
Posted by amit on 2/26/2010 10:36:44 PM
really a nice article .......
Posted by Kaja; on 4/24/2010 3:00:28 AM
very nicely explained....
Posted by Avinash on 8/21/2010 2:27:07 AM
Showing Error: Object Reference Not Set An INstance Of An Object.. While Debugging The LIne "Grid.DataSource = ds;"
Posted by Avinash on 8/22/2010 11:21:02 PM
Previous Error Solved: But The Contents are not Coming. Only the Headers are showing. Contents Not Coming.. Showing No Records Available
Posted by kashyap on 10/25/2010 11:21:02 AM
accordion won't animate after giving SuppressHeaderPostbacks="true" also.
Posted by mani on 4/5/2012 7:41:04 AM
nice artical its helpfull thank u
Posted by Vishal panwar on 4/23/2012 2:03:37 AM
Nice article.....
Posted by Dek mekong on 1/22/2013 11:18:31 PM
I had a checkbox inside of the Gridview. How do I get the checkbox value? Checkbox is inside the Gridview and Gridview also inside the ajaxAccordian. Thank you.
Posted by Binal P on 8/9/2013 7:32:32 AM
Thanks.. helped me lot.
Posted by fereshteh on 10/5/2013 12:10:47 PM
Great article Thanks I have a Question I have a button in header of accordion and in itemcommand i want to do something but page doesnt post back. what shoud i do?
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Three plus Forty Equals To
Sponsored by
The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition - Free 207 Page Preview!
When Good HTML Goes Bad: How You Can Protect Your Web Applications
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks - Free 158 Page Preview