What's Wrong with Accordion Control?

Briefly

1. Controls in a AccordionPane are not instantiated until PreRender
2. Values of TextBoxes, CheckBoxes and other controls are not preserved between postbacks.

With More Details and Solution of the Problems

Accordion control is a nice visual control in the Ajax Control Toolkit which can be used similar to TabContainer control.  It allows user to switch between different pages of content. 

The very simple sample of how to use the Accordion control:

            <act:Accordion ID="Accordion1" runat="server">
                <Panes>
                    <act:AccordionPane runat="server" ID="pane1">
                        <Header>
                            Header 1</Header>
                        <Content>
                            Content 1</Content>
                    </act:AccordionPane>
                    <act:AccordionPane runat="server" ID="AccordionPane1">
                        <Header>
                            Header 2</Header>
                        <Content>
                            Content 2</Content>
                    </act:AccordionPane>
                </Panes>
            </act:Accordion>

Content and Header are ITemplate properties of AccordionPane control.  Both these properties are decorated with

[TemplateInstance(TemplateInstance.Single)]

attribute, which makes controls declared inside this template accessible as page properties like any other controls on the page.  Thus if you have the following accordion on the web page

<act:Accordion ID="Accordion1" runat="server">
    <Panes>
        <act:AccordionPane runat="server" ID="pane1">
            <Header>
                Header 1</Header>
            <Content>
                <h2>
                    Test</h2>
                <asp:CheckBox runat="server" ID="CheckBox1"
                           Text="CheckBox" />
            </Content>
        </act:AccordionPane>
    </Panes>
</act:Accordion>

you should be able to write the following code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (CheckBox1.Checked) {
            //
        }
    }
And indeed TemplateInstance.Single works and you can compile this code.  However, when you attempt browsing your page you get:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 13: protected void Page_Load(object sender, EventArgs e) Line 14: { Line 15: if (CheckBox1.Checked) { Line 16: // Line 17: }

 

Well, this is not what you expect from TemplateInstance.Single.  CheckBox1 is not instantiated on Page_Load.  Moreover, if you try handling CheckedChanged event, you will find that it does not fire.

<asp:CheckBox runat="server" ID="CheckBox1" Text="CheckBox" 
    AutoPostBack=true OnCheckedChanged="CheckBox1_CheckedChanged" />

and even more, checkbox checked state is not preserved between postbacks.  (TextBox value always remains the same if you replace CheckBox with TextBox.)

So, what's wrong with Accordion and AccordionPane?

I could explain not instantiating controls before the OnLoad event by the fact that when page is loading for the first time CreateChildControls is first called in PreRender page lifecycle phase.  However, post data processing usually triggers CreateChildControls and any controls receiving post data are created.  So, accordion is different.

When response Html is rendered, client id of my checkbox control becomes ctl03_CheckBox1 and its name is ctl03$CheckBox1.  So, when ASP.NET processes post data it first looks for ctl03 control and then if it is found asks ctrl03 control to find CheckBox1 control.  Ctl03 control must be marked with INamingContainer.  If you enable page trace and look for Ctl03 control, you find that it is AccordionContentPanel control.  AccordionContentPanel is an internal control in the AccordionPane and it is naming container.

However, when I try to find ctl03 control in my page, I cannot find it until PreRender phase when AccordionPanes instantiate their templates an so does ASP.NET.

I looked into the source code. CreateChildControls is overridden in both Accordion and AccordionPane classes, but both these controls are not naming containers; while ASP.NET asks only naming containers to create their children.  ASP.NET would ask ctl03 to create its children if it had exist.

I verified that adding a INamingContainer marker interface to Accordion and AccordionPane class fixes all problems described above.  (Well, I am too lazy to check if it does not break data binding features).

However, as Accordion and AccordionPane controls are not naming containers in current build of Ajax Control Toolkit, workaround for these problems is required.

Workaround

If you have declaratively created accordion controls on your web page, add to your page_init handler the following:

        Accordion1.FindControl("nothing");
for each accordion on the page.  It helps!

I posted a bug request to www.codeplex.com hoping this can be fixed: http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=11615