FAB Actions

  • 2 minutes to read

The ASPxFloatingActionButton stores its items in the ASPxFloatingActionButton.Items collection.

  • Action (FABAction) - Executes the action once an end user clicks the floating action button.

    The following options customize the FABAction object.

    Property Description
    FABCollectionItemBase.ActionName Specifies the action name.
    FABActionBase.ContextName Specifies the context name.
    FABCollectionItemBase.Text Specifies the action's text.
    FABAction.Image Provides access to the action's image settings.
    <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" ClientInstanceName="fab" ContainerElementID="form1">
        <ClientSideEvents 
            ActionItemClick="OnActionItemClick"
        />
        <Items>
            <dx:FABAction ActionName="New" ContextName="NewRowContext">
            </dx:FABAction>
        ...
        </Items>
    </dx:ASPxFloatingActionButton>
    <dx:ASPxGridView ID="GridView" runat="server" DataSourceID="DemoDataSource1" KeyFieldName="ProductID" EnableRowsCache="false" ClientInstanceName="grid" >
    </dx:ASPxGridView>
    
  • Action Group (FABActionGroup) - The floating action button serves as a container for multiple actions. When pressed, the floating action button expands nested actions.

    The following options customizes the FABActionGroup object.

    Property Description
    FABActionBase.ContextName Specifies the context name.
    FABCollectionItemBase.Text Specifies the action group's text.
    FABActionGroup.CollapseImage Provides access to the collapse image settings.
    FABActionGroup.ExpandImage Provides access to the expand image settings.

    Each FABActionGroup object stores its action items in the FABActionGroup.Items collection. An action item (FABActionItem) provides the following settings:

    Property Description
    FABCollectionItemBase.ActionName Specifies the action item's name.
    FABCollectionItemBase.Text Specifies the action item's text.
    FABActionItem.Image Provides access to the action item's image settings.
    <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" ClientInstanceName="fab" ContainerElementID="form1">
        <ClientSideEvents 
            ActionItemClick="OnActionItemClick"        
        />
        <Items>
        ...
            <dx:FABActionGroup ContextName="FocusedRowContext">
                <ExpandImage Url="../Content/FloatingActionButton/Images/EditRowContext.svg"></ExpandImage>
                    <Items>
                        <dx:FABActionItem ActionName="Delete" Text="Delete">
                            <Image Url="../Content/FloatingActionButton/Images/Delete.svg"></Image>
                        </dx:FABActionItem>
                        <dx:FABActionItem ActionName="Edit" Text="Edit">
                            <Image Url="../Content/FloatingActionButton/Images/Edit.svg"></Image>
                        </dx:FABActionItem>
                    </Items>
                </dx:FABActionGroup>
                <dx:FABActionGroup ContextName="EditingRowContext">
                    <ExpandImage Url="../Content/FloatingActionButton/Images/EditRowContext.svg"></ExpandImage>
                    <Items>
                        <dx:FABActionItem ActionName="Cancel" Text="Cancel">
                            <Image Url="../Content/FloatingActionButton/Images/Cancel.svg"></Image>
                        </dx:FABActionItem>
                        <dx:FABActionItem ActionName="Save" Text="Save">
                            <Image Url="../Content/FloatingActionButton/Images/Save.svg"></Image>
                        </dx:FABActionItem>
                    </Items>
                </dx:FABActionGroup>
        </Items>
    </dx:ASPxFloatingActionButton>
    <dx:ASPxGridView ID="GridView" runat="server" DataSourceID="DemoDataSource1" KeyFieldName="ProductID" EnableRowsCache="false" ClientInstanceName="grid" >
    </dx:ASPxGridView>