How do I collapse collapsible panels in UpdatePanel from code-behind?

Hi, all. There are quite a few posts about the collapsible panel here (some are my own), and I did a good amount of going through those, but they didn't seem to address my problem.

I have a master/detail setup in the form of a GridView in one collapsible panel and a FormView in another collapsible panel. The Grid- & FormViews work fine together. My problem lies in getting the collapsible panels to expand/collapse on a button clicked in the appropriate Grid/FormView. Actually, through much testing I found the problem lies in the fact that both the GridView and FormView are in their own UpdatePanels. When I comment those out, the code I have attached to the save button on the FormView does as it should: collapses the FormView panel and expands the GridView panel.

I tried using triggers for each of the UpdatePanels, setting the ControlID property to the FormView for the GridView's panel & vice versa for the FormView's panel. That didn't work...

Here's a code example to show you what I've got:

<asp:UpdatePanel ID="updPnlActCodeFmv" runat="server" UpdateMode="Conditional"><Triggers> <asp:AsyncPostBackTrigger ControlID="gvActCode" /></Triggers><ContentTemplate><asp:FormView ID="fmvActCode" runat="server" DefaultMode="Insert" DataSourceID="dsActCode"DataKeyNames="ActivityCodeID" BorderWidth="0px" Width="600px"> <InsertItemTemplate></InsertItemTemplate><EditItemTemplate> <asp:Button ID="btnSaveActCodeFmvChange" runat="server" CausesValidation="True" ValidationGroup="EditValidation"CommandName="Update" Text="Save Changes & Return to Table" Font-Bold="True" OnClick="btnSaveActCodeFmvChange_Click" /></EditItemTemplate></asp:FormView></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="updPnlActCodeGv" runat="server" UpdateMode="Conditional"><Triggers><asp:AsyncPostBackTrigger ControlID="fmvActCode" /></Triggers><ContentTemplate><asp:GridView ID="gvActCode" runat="server"> <Columns> </Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

Here's the code for the click event of the save button in the FormView:

Protected Sub btnSaveActCodeFmvChange_Click(ByVal senderAs Object,ByVal eAs EventArgs)
Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeFmv
cpeFmv.Collapsed =True
cpeFmv.ClientState ="True"

Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeGv
cpeGv.Collapsed =False
cpeGv.ClientState ="False"

updPnlCpeActCode.Update()
End Sub

I'm not sure what else I can try - I need UpdatePanels around each of the View controls due to the amount of data being used in them, but with the UpdatePanels, I can't get the CollapsiblePanelExtenders to work they way I need them to!

Any help would be GREATLY appreciated!

Thanks

Anyone have any ideas on this?

Maybe my post was confusing.

In a nutshell, I need to expand & collapse Collapsible Panels via code-behind, while the controls (GridView & FormView) in each of the Collapsible Panels are all in Update Panels. The buttons the use clicks to do this are inside the Grid- & FormViews.

Using triggers doesn't work (at least the way I have them set up) and removing the UpdatePanels makes the collapse/expand code work.

HELP!

Man, Ihate talking to myself!

I was really hoping someone would post something over the weekend with some suggestion on how to deal with this!

Anyone?

Once again I would greatly appreciate it if someone could help me out on this. This is a feature I'm trying to implement on a site for a customer, so it is very important to me (and the customer) to be able to get this working!

PLEASE HELP!

[BUMP]

Eventually someone's GOT to have some clue!

Microsoft guys, where the heck are you?!?!??!

I suspect that is has to do with the conditional update. try always.

Not too sure how these things work with multiple update panels as it seems an event is being fired from one panel and you are trying to update another.

Hey, GSpies, thanks for the suggestion, but originally I didn't specify the UpdateMode and I found out that the UpdatePanles default to Always, which, in the case of my page, defeats the purpose of the UpdatePanels in the first place. As I mentioned in my original post, I have a lot of information being loaded on the page, so I need to control partial page postbacks based on certain events (GridView databinding, button clicks, dropdown selections, etc.). With the UpdateMode on Always, the UpdatePanel is, obviously, Always updated!

No, it's something else. I'm also dealing with trying to get a validation summary control and validatorcallout controls to work on the page within UpdatePanels and that endeavor isn't looking too good either.

Seems UpdatePanels, though very useful in and of themselves, really cause havoc with some other controls!

seeing as I am still stuck on the idea that it wont update if it is conditional, and the button you click is not one of the triggers, I wonder if using a behaviorid for the panel is appropriate and trying to fire that behavior from code-behind

Not having any direct experience in this problem, but sort of understanding how these things work, I would investigate.

Hope this helps

Hey, GSpies

Here's some info on UpdatePanels from the ASP.NET Documentation at:http://www.asp.net/AJAX/Documentation/Live/mref/P_System_Web_UI_UpdatePanel_UpdateMode.aspx

"The content of anUpdatePanel control is updated in the following circumstances:

If theUpdateMode property is set toAlways, theUpdatePanel control's content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside otherUpdatePanel controls and postbacks from controls that are not insideUpdatePanel controls.

If theUpdatePanel control is nested inside anotherUpdatePanel control and the parent update panel is updated.

If theUpdateMode property is set toConditional, and one of the following conditions occurs:

You call theUpdate() method of theUpdatePanel control explicitly.

The postback is caused by a control that is defined as a trigger by using theTriggers property of theUpdatePanel control. In this scenario, the control explicitly triggers an update of the panel content. The control can be either inside or outside theUpdatePanel control that defines the trigger.

TheChildrenAsTriggers property is set totrue and a child control of theUpdatePanel control causes a postback. A child control of a nestedUpdatePanel control does not cause an update to the outerUpdatePanel control unless it is explicitly defined as a trigger."

GOT IT!!

Okay, the gist of it was, I had to include the collapsiblepanel controlsinside an updatepanel as well, setting the ChildrenAsTriggers property as true, and then explicitly using the update method from the code-behind:

aspx example:

<ajaxToolkit:TabContainer ID="tabcont1" runat="server"><ajaxToolkit:TabPanel ID="tabPersonnel" runat="server"><ContentTemplate><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="server" /><asp:Panel ID="Panel1" runat="server"><asp:Label ID="Label1" runat="server" /></asp:Panel><asp:Panel ID="Panel2" runat="server"><asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel3" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:FormView ID="FormView1" runat="server"></asp:FormView></ContentTemplate></asp:UpdatePanel></asp:Panel><br /></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe2" runat="server" /><asp:Panel ID="Panel3" runat="server"><asp:Label ID="Label2" runat="server" /></asp:Panel><asp:Panel ID="Panel4" runat="server"><asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel4" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="conditional" ChildrenAsTriggers="True"><ContentTemplate><asp:GridView ID="GridView1" runat="server"><Columns></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel></asp:Panel></ContentTemplate></asp:UpdatePanel></ContentTemplate></ajaxToolkit:TabPanel></ajaxToolkit:TabContainer>

And in the code-behind:

Protected Sub btnSaveClose_collapseCpeFormView(ByVal senderAs Object,ByVal eAs EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv.Collapsed =TruecpeFmv.ClientState ="True"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =FalsecpeGv .ClientState ="False"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End SubProtected Sub btnEditMore_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv .Collapsed =FalsecpeFmv .ClientState ="False"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =TruecpeGv.ClientState ="True"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End Sub

In the GridView there is a button (btnEditMore) to click which populates the FormView with the selected record. That collapses the GV panel & expands the FV panel.

Conversely, when the "btnSaveClose" button is clicked in the FormView, the FV panel is collapsed and the GV panel is expanded.

Hope that info save someone else from the hassel I went through getting this to work!