programmatically shrink (collapse) up accordion pane

Hi there,

new here, please direct if this has been asked before.

Is it possible to programmtically scroll/shrink/collapse up an accordion pane?, I have a gridview with detailsview inside it which is inside an accordion. I want to scroll up the accordion (container for detailsview) once user clicks on 'update', 'insert', 'cancel'.

I've tried the following with little success

Protected Sub dvEventMeetings_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewModeEventArgs) Handles dvEventMeetings.ModeChanging

If e.CancelingEdit = True Then
Me.DrawupAccordion(Me.gvEventMeetings, "accdvEventMeeting")
e.Cancel = True
End If

End Sub

Protected Sub DrawupAccordion(ByVal aControltoDrawUp As Control, ByVal controlID As String)

Dim aControl As Control = Nothing
aControl = me.FindControlIterative(aControltoDrawUp, controlID)

If TypeOf aControl Is AjaxControlToolkit.Accordion Then
CType(aControl, AjaxControlToolkit.Accordion).SelectedIndex = -1
End If

End Sub

Protected Function FindControlIterative(ByVal root As Control, ByVal id As String) As Control

Dim ctl As Control = root
Dim ctls As LinkedList(Of Control) = New LinkedList(Of Control)

Do While (ctl IsNot Nothing)
If ctl.ID = ID Then
Return ctl
End If
For Each child As Control In ctl.Controls
If child.ID = ID Then
Return child
End If
If child.HasControls() Then
ctls.AddLast(child)
End If
Next
ctl = ctls.First.Value
ctls.Remove(ctl)
Loop

Return Nothing

End Function

Thanks!

Hi Roshec,

I think you can toggle the accordion programmatically.

Just a few questions:

do you want the actions to happen clientside/ serverside?

Hi Wim,

Thanks

A1 It doesn't matter, client would be good

A2 'Events' are listed in a gridview, one column is 'Add Meeting', clicking on this will expand a detailsview inside an accordion, once the user clicks on 'update','insert' or cancel I want to collapse the accordion back up.

Hey roshec,

I'm looking into this problem ...

Yet another question:
You say your detailsView is on an accordionPane, but are their any other controls on other panes of the accordion?

Based on what you say in A2, why don't you use a collapsiblePanelExtender and place the detailsView on that?

Kind regards,
Wim

Hi Wim,

Thanks. Will look into collapsiblepanelextender.

The accordion, which contains the detailsview, is inside a templatefield of the gridview. There is only pane in this accordion. Having said that, there is another accordion in the same gridview (different column) that also contain one pane which contains a gridview, this isn't a problem though 'coz it's just a list. It's only the detailsview I want to collapse programmatically.

Below is cut down version on the client aspx

<asp:GridView id="gvEvents" runat="server" DataKeyNames="eventID" DataSourceID="DataInstoEvents" AutoGenerateColumns="False" AllowPaging="True" CssClass="gridview">
<Columns>

<asp:CommandField ShowSelectButton="True" />

<asp:TemplateField HeaderText="Add an Event Meeting">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemTemplate>
<ajaxToolkit:Accordion ID="accdvEventMeeting" runat="server" SelectedIndex="-1"
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="accPaneDvEventMeeting" runat="server">
<Header><a href="http://links.10026.com/?link=" mce_href="" class="subheader2">Add Meeting</a></Header>
<Content>
<asp:DetailsView id="dvEventMeetings" runat="server" cellpadding="5" Font-Size="Small" Font-Names="sans-serif" BackColor="Gainsboro" DefaultMode="Insert" DataKeyNames="eventID" DataSourceID="DataInstoEventMeeting" Width="125px" Height="50px" AutoGenerateRows="False" OnItemInserting="dvEventMeetings_ItemInserting">
<Fields>

<asp:BoundField DataField="subject" SortExpression="subject" HeaderText="Subject">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

<asp:BoundField DataField="location" SortExpression="location" HeaderText="Location">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

<asp:CommandField InsertText="Save and Send Invite" ShowDeleteButton="True" ShowInsertButton="True" ShowEditButton="True" />

</Fields>
</asp:DetailsView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="View Meetings for Event">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemTemplate>
<ajaxToolkit:Accordion ID="accgvEventMeetings" runat="server" SelectedIndex="-1"
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="accPaneGvEventMeetings" runat="server">
<Header><a href="http://links.10026.com/?link=" mce_href="" class="subheader2">View Meetings</a></Header>
<Content>
<asp:GridView id="gvEventMeetings" runat="server" DataKeyNames="eventMeetingID" DataSourceID="DataInstoEventMeetings" AutoGenerateColumns="False" AllowPaging="True" CssClass="gridview" PageSize="10">
<Columns>
<asp:BoundField DataField="summary" HeaderText="Summary" SortExpression="summary" HeaderStyle-Wrap="false" ItemStyle-Wrap="true" />
</Columns>
</asp:GridView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="organizerName" SortExpression="organizerName" HeaderText="Organizer">
<ItemStyle Wrap="False"></ItemStyle>
<HeaderStyle Wrap="False"></HeaderStyle>
</asp:BoundField>

</Columns>
</asp:GridView>

Hi

Euhm, I would like to add the following:

You can close the accordion by setting the SelectedIndex property to -1

I just can't implement it into your code because IMO the set up of the controls is kinda weird ....

Kind regards,
Wim

Thanks, but that's what I tried doing (see my first post) with my DrawUpAccordion sub. Not to worry anymore, I've figured it out myself.