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 FABCollection Item Base. Action Name Specifies the action name. FABAction Base. Context Name Specifies the context name. FABCollection Item Base. 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 FABAction Base. Context Name Specifies the context name. FABCollection Item Base. Text Specifies the action group’s text. FABAction Group. Collapse Image Provides access to the collapse image settings. FABAction Group. Expand Image 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 FABCollection Item Base. Action Name Specifies the action item’s name. FABCollection Item Base. Text Specifies the action item’s text. FABAction Item. 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>