ASPxClientFloatingActionButton.ActionCollapsing Event

Occurs when the end user collapses the action group.

Declaration

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.

ASPX

<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>

JS

function OnActionCollapsing(s, e) {
    if(e.contextName === "FocusedRowContext" && e.collapseReason === ASPxClientFloatingActionButtonCollapseReason.CollapseButton) {
        setTimeout(function() {
            grid.SetFocusedRowIndex(-1);
            fab.SetActionContext("NewRowContext");
        }, 100);
    }
}

Online Demo

External FAB for GridView