Ajax CollapsiblePanelExtender Keep state on Postback

Question

I have a gridview. Inside I have a CollapsiblePanelExtender that contains buttons. When I press a button this causes a post back and the CollapsiblePanelExtender closes. I am trying to compose a solution that will keep the CollapsiblePanelExtender open after the post back. This is what I have attempted so far:

function pageLoad(sender, args) {
   var objExtender;                
   var retval="";               

   if (document.getElementById(GridView1)) {
      retval = document.getElementById(GridView1);
   }
   var CollapsiblePanelExtender1 = retval.getElementsByTagName("CollapsiblePanelExtender1");

   if(CollapsiblePanelExtender1.get_Collapsed()) {
      CollapsiblePanelExtender1.set_Collapsed(true);
   }
   else {
      CollapsiblePanelExtender1.set_Collapsed(false);
   }
}

Answer 1

Basically CollapsiblePanelExtender keeps it's state during postbacks. But during post back I suppose that you perform databind (I guess you have). During databinding all controls are recreated and that's why they are loose their internal states.

To fix your issue I can advice to save state of the CollapsiblePanelExtender before performing databinding and then restore this state. This can be done on server side. This will also help to avoid flicker of the UI if you have animation enabled.

So, to get state of the CollapsiblePanelExtender you can simply to remember it's client state value. Then you will able to restore this value. For example this is code which can be used to expand/collapse CollapsiblePanelExtender on server side:

// To collapse panel.
this.CollapsiblePanelExtender1.ClientState = "true";

// To Expand panel.
this.CollapsiblePanelExtender1.ClientState = "false";

If you still want to collapse/expand CollapsiblePanelExtender on client side than you need code similar to this:

Sys.Application.add_load(function() {
    var extender = $find('<%= this.CollapsiblePanelExtender1.ClientID  %>');

    extender.expandPanel();

    extender.collapsePanel();
});

EDIT This doesn't help because you try to restore state in the click handler. When you call databind of the grid view control, rows are not recreated immediately. So, if you want to set (restore) state of the collapsible extender control it is better to do in RowCreated event handler of your grid.

For example you can use code similar to this:

    protected void GridView_OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow && SomeValueToIdentifyThatThisPanelShouldBeExpanded)
        {
            CollapsiblePanelExtender extender =
                e.Row.FindControl("CollapsiblePanelExtender1") as CollapsiblePanelExtender;
            extender.ClientState = "false";
        }
    }

Answer 2

I actually use these on my blog because asp.net lets me use the collapsible panel drag and drop with a repeater control.

The trick is to ajax in the content when you open the panel. You could easily jquery in the content to insert a page or ajax in from a webservice.

This is a sample of the collapsible panel with ajaxed content. The panels are loaded by a webservice. Click to expand the panels.

http://gosylvester.com/blog.aspx?id=39