C# .NET - find out which header template of accordion control is clicked..

Asked By sarah oliver on 22-Mar-12 08:54 AM
Earn up to 10 extra points for answering this tough question.

. i have  accordion control, which i have bound to a datatable.
Now, in my content template , i have a button, and some labels and textboxes with data from the server. when i click on that button, i need to recognize from which of the panes has it come, and accordingly i need to modify the text and labels inside the content template of that pane.
do you have any idea how to do it?

I have bound a datatable( from the server) to my accordion control.

Hence, the number of accordion header and content templates are not constant.

In each accordion control template, i have 1 button, and some label with some data.

If the button from the content template is pressed, i need to access the corresponding row of the datatable, and make changes to the datatable, and correspondingly to the text that i display in the labels and textbox of that particular content template.

How is it possible?

.cs page

Accordion2.DataSource = _dt.DefaultView;


          Any help will be appreciated.

Probably some way to recognize onclick event or something for the header template pane which is clicked or is open currently? or some UI.ACTIONS.ACTIVE sort of thing?
accordion2.FindControl cant be used effectibvely in this right?

Vikram Singh Saini replied to sarah oliver on 03-Jun-12 04:16 AM

Dear Sarah Oliver,

We have framed solution for your requirements. But there are pre-requirements:

(1)  (1) Use AjaxControlToolkit 4.0 instead of AjaxControlToolkit 2.0. Because onclick event of button (in Accordion control’s template) will not be executed for 2.0 as it is a bug.

(2)  (2) The table in database should have primary key. We have used AdmNo of type int as primary key.

Here is the code snippet (in .aspx page):

<ajax:Accordion ID="accMenu" HeaderCssClass="header" SelectedIndex="0" ContentCssClass="content"

        HeaderSelectedCssClass="selected" AutoSize="Limit" EnableViewState="true" runat="server"

        CssClass="rmenu" Height="340px" Width="30%">


          <%# Eval("Student") %>



          Admission No. :&nbsp;

          <%# Eval("AdmNo") %><br />

          OBC:&nbsp;<%# Eval("Obc") %><br />

          <asp:Label ID="lblEmail" runat="server" /><br />

          <asp:Button ID="btnGiveEmail" runat="server" Text="Get Email" OnClientClick="SetHeaderTemplateIndex()"

            OnClick="btnGiveEmail_Click" />




As you can notice we have bind accordion control accMenu’s template items to database values. Further there is button declared which will execute function to retrieve  Email field values and set email value to Label later. We have not used Update query as per your requirement. But the code snippet will help you to understand functioning.


To get information about click button from specific content pane, we would retrieve selected index value of Accordion. The very first index would return value as 0 (zero). SelectedIndex will let us to know which button clicked. And we will search that pane’s controls to modify.

Code snippet in (.aspx.cs page):

protected void btnGiveEmail_Click(object sender, EventArgs e)


      int admNo = accMenu.SelectedIndex + 1;


      string query = "SELECT Email FROM Students WHERE AdmNo=" + admNo;

      DataTable dt = GetData(query);


      AccordionPane pane = accMenu.Panes[accMenu.SelectedIndex];

      Label lbl = pane.FindControl("lblEmail") as Label;

      lbl.Text = "Email: " + dt.Rows[0]["Email"].ToString();



Instead of SELECT query you can use UPDATE query. And then later modify those values. If you need more help let us know.