Skip to content

Collapse/expand a panel

Provide a collapsible, titled panel whose expand/collapse state survives postback. Control construction, CreateChildControls, and postback for a SAIFPanel instance.

Field Value
Operation ID OP-V2-007
Trigger Control construction, CreateChildControls, and postback for a SAIFPanel instance.
Inputs PanelState, hidden-field posted value.
Outputs Header, hidden state field, and content panel markup with the correct display style.
Primary components SAIFPanel
Entry point SAIF.Presentation.Web.Controls.V2/SAIFPanel.vb

Steps

  1. On construction, set CSS class SAIFPanel and register /Resources/Scripts/Controls/Panel.js. (BR-V2-047)
  2. On CreateChildControls, build the header (Header/Title/ImageHolder CSS classes), a HiddenField holding the panel state, and the content Panel (CSS class Content). (BR-V2-048)
  3. Set the content panel's inline style to display: none; when collapsed and display: block; when expanded. (BR-V2-049)
  4. Publish CollapseImgUrl (/Resources/Images/Up.png), ExpandImgUrl (/Resources/Images/Down.png) and StateControl (the hidden field's client ID) as control attributes so Panel.js can toggle state on the client. (BR-V2-050)
  5. On postback, read the state back from the hidden field and re-apply the display style. (BR-V2-051)

Process flow

The following diagram visualizes this operation's control flow.

flowchart TD
    Start([Construction]) --> Css[Set SAIFPanel CSS class, register Panel.js]
    Css --> CCC[CreateChildControls: header, hidden field, content panel]
    CCC --> Style[Apply display style from PanelState]
    Style --> Publish[Publish CollapseImgUrl/ExpandImgUrl/StateControl]
    Publish --> PB{Postback?}
    PB -->|Yes| Read[Read hidden field, re-apply style]
    PB -->|No| Done([Initial render])
    Read --> Done

Failure and edge-case behavior

  • No exceptional failure handling beyond the branches described in Steps was found in the analysis findings.*

Sources

  • SAIF.Presentation.Web.Controls.V2/SAIFPanel.vb