Skip to main content

ASPxClientFloatingActionButton.ActionCollapsing Event

Occurs when the end user collapses the action group.

#Declaration

TypeScript
ActionCollapsing: ASPxClientEvent<ASPxClientFloatingActionButtonActionCollapsingEventHandler<ASPxClientFloatingActionButton>>

#Event Data

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

Property Description
collapseReason Specifies whether the user action or APIs has collapsed the action group.
contextName Specifies the FAB action’s context name.

#Remarks

Refer to the Floating Action Button topic for more information.

The following code snippet illustrates how to use the ActionCollapsing event.

<dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" ClientInstanceName="fab" HorizontalMargin="35" ContainerElementID="form1">
        <ClientSideEvents 
            ActionItemClick="OnActionItemClick"
            ActionCollapsing="OnActionCollapsing"
        />
        <Items>
            <dx:FABActionGroup ContextName="FocusedRowContext">
                <ExpandImage Url="../Content/FloatingActionButton/Images/EditRowContext.svg"></ExpandImage>
                <Items>
                    <dx:FABActionItem ActionName="DeleteRow" Text="Delete">
                        <Image Url="../Content/FloatingActionButton/Images/Delete.svg"></Image>
                    </dx:FABActionItem>
                    <dx:FABActionItem ActionName="EditRow" Text="Edit">
                        <Image Url="../Content/FloatingActionButton/Images/Edit.svg"></Image>
                    </dx:FABActionItem>
                </Items>
            </dx:FABActionGroup>
         ...
        </Items>
    </dx:ASPxFloatingActionButton>

#Online Demo

External FAB for GridView

See Also