ASPxClientRoundPanel.CollapsedChanging Event

Fires on the client when a user clicks the panel header or collapse button to expand or collapse the panel.

Declaration

CollapsedChanging: ASPxClientEvent<ASPxClientCancelEventHandler<ASPxClientRoundPanel>>

Event Data

The CollapsedChanging event's data class is ASPxClientCancelEventArgs. The following properties provide information specific to this event:

Property	Description
cancel	Specifies whether to cancel the related action (for example, row edit, export).

Remarks

Handle the panel’s client-side CollapsedChanging event to enable or disable expanding and collapsing the panel.

To cancel the current action, set the cancel argument roperty to true.

The following code sample demonstrates how to prevent the panel from collapsing if it contains editors with invalid data:

JS

function OnCollapsedChanging(s, e) {
    e.cancel = !ASPxClientEdit.ValidateEditorsInContainer(s.GetMainElement());
}

function onNameValidation(s, e) {
    var name = e.value;
    if (name == null)
        return;
    if (name.length < 2)
        e.isValid = false;
}

ASPX

<dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" ShowCollapseButton="true" Width="200px">
    <PanelCollection>
        <dx:PanelContent>
            <dx:ASPxTextBox runat="server" EnableClientSideAPI="True" Width="100%" ID="NameTextBox"
                EncodeHtml="false" ClientInstanceName="Name" >
                <ValidationSettings SetFocusOnError="True" Display="Dynamic" ErrorTextPosition="Bottom"
                    ErrorText="The name must be at least <br /> two characters long" >
                    <RequiredField IsRequired="True" ErrorText="Enter the name" />
                </ValidationSettings>
                <ClientSideEvents Validation="onNameValidation" />
                <InvalidStyle BackColor="LightPink" />
            </dx:ASPxTextBox>
        </dx:PanelContent>
    </PanelCollection>
    <ClientSideEvents CollapsedChanging="OnCollapsedChanging" />
</dx:ASPxRoundPanel>