With the Ajax Control Toolkit, how would I go about programmatically creating an accordion control that is resizeable and drag/droppable at runtime?

Question

I was trying to generate a resizable and drag/droppable ajax control toolkit accordion control programmatically, but am running into some problems.

First, can it be done?

Second, my approach is not exactly working. I have a button that, OnClick, is supposed to create the accordion. So I create the accordion. Add an accordion pane to it. Add a combo button to the accordion pane. Then add the entire accordion to the Ajax Panel. My event handler follows.

    protected void btnTest_Clicked(object sender, EventArgs e)
    {
        //Generate the accordion
        AjaxControlToolkit.Accordion acc = new AjaxControlToolkit.Accordion();

        //Generate a single accordion pane
        AjaxControlToolkit.AccordionPane itm = new AccordionPane();

        //Create and add a control to the pane
        AjaxControlToolkit.ComboBoxButton cbbtn = new ComboBoxButton();
        itm.Controls.Add(cbbtn);   
        acc.Panes.Add(itm);

        //Add resizable extender to the accordion.  Only did resizable for now.
        //One step at a time.
        AjaxControlToolkit.ResizableControlExtender extResizeLocation = new AjaxControlToolkit.ResizableControlExtender();
        extResizeLocation.TargetControlID = acc.ID;
        extResizeLocation.Enabled = true;

        //Add accordion to update panel and update.
        UpdatePanel1.Controls.Add(acc);
        UpdatePanel1.Update();
    }

What I get when I press the test button is what appears to be a minimized button without text generated under the test button. I have no clue what to do.

Appreciate the help

Answer 1

Dynamically added controls are typically supposed to be added during init or preinit event of the page. That may be a complication, since you are doing it after load.

The key is to make sure the $register method on the client for the accordion is occurring. This is what initializes the client-side features of the AJAX component, and starts the lifecycle. I don't know if it happens for dynamically added controls...

Answer 2

You may want to look at the JQuery UI Accordian widget and use the draggable/droppable interactions.

You could use server side code to create an block and apply the jQuery interaction.