Retrieving the control value from an ASP Accordion ContentTemplate Item

Posted: 18th February 2010 in AJAX

When you want to update a value from a control in the control template section of a data bound collection of an accordion control it is necessary to find the control in the collection to update it.

Shown below is a basic example to explain what I mean.

basic accordion control
  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  2.         </asp:ToolkitScriptManager>
  3.         <asp:Accordion ID="Accordion1" runat="server" OnItemCommand="Accordion1_ItemCommand" >
  4.         <HeaderTemplate>
  5.             <asp:Label runat="server" ID="Label1" Text='<% #Eval("Text") %>'></asp:Label>
  6.         </HeaderTemplate>
  7.         <ContentTemplate>
  8.              <asp:Label ID="label1" runat="server" Text='<% #Eval("Id") %>'  ></asp:Label>
  9.              <asp:TextBox ID="textBox1" runat="server" Text='<% #Eval("Text") %>'  ></asp:TextBox>
  10.              <asp:Button ID="Button1" runat="server" Text="submit" CommandName="Update" CommandArgument='<% #Eval("Id") %>' />
  11.         </ContentTemplate>
  12.         
  13.         </asp:Accordion>

As seen below, the server side code to bind this control is generated by a loop in the LoadData() method

Binding to the accordion
  1. Accordion1.DataSource = this.LoadData();
  2.             Accordion1.DataBind();

And the LoadData() implementation is a simple iteration to create a List of a  simple class Class1 consisting of two properties Id and Title

Creating the list to bind to
  1. protected IList<Class1> LoadData()
  2.       {
  3.           for (var i = 0; i < 9; i++ )
  4.           {
  5.               list.Add(new Class1 { Id = i, Text = i.ToString() });
  6.           }
  7.  
  8.           return list;
  9.       }

Okay, simple enough. Now, we want to update the the value of the displayed value of textBox1 in the ContentTemplate of the “Basic accordion control” example.

To do this, we need to use the ItemCommand event of the accordion control and cast it to a AccordionCommandEventArgs as seen in the following example.

 

Getting the value
  1. protected void Accordion1_ItemCommand(object sender, EventArgs e)
  2.         {
  3.             var t = ((AccordionCommandEventArgs) e).Container.DataItem;
  4.             var id = ((Label) ((AccordionCommandEventArgs) e).Container.FindControl("label1")).Text;
  5.             var text = ((TextBox) ((AccordionCommandEventArgs) e).Container.FindControl("textBox1")).Text;
  6.         }

The variable “text” will now hold the value you are looking for.

Happy coding 🙂

Advertisements
Comments
  1. ryan says:

    YES!
    Thank you.
    I was at a loss why I couldn’t access the item in the handler and why I got JIT compile errors when I tried to make the event handler signature _ItemCommand(object sender, AccordionItemEventArgs e)
    which gave me access to the container object.

  2. kalaiarasui says:

    Thank You..It works Great!!

  3. sarahaoliver says:

    how do i fire an event when <asp:Button ID="Button1" runat="server" Text="submit" CommandName="Update" CommandArgument='’ /> is clicked?
    I need to call another function when the button from inside the content template is clicked..

    Any help will be appreciated.

    I have wasted weeks trying to do this!

  4. DD says:

    Thank you very much

  5. Freitas says:

    Great article, congratulations.
    Thank you very much…

  6. Eduardo says:

    Muchas Gracias me sirvió de mucho, gracias por el código.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s