FAB Actions

• Dec 17, 2020
• 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.

  ASPX

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

  JS

  function OnActionItemClick(s, e) {
      if(e.actionName === "New") {
          grid.AddNewRow();
      }
  ...
  }
  

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

  ASPX

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

  JS

  function OnActionItemClick(s, e) {
              if(e.actionName === "New") {
                  grid.AddNewRow();
              }
              else if (e.actionName === "Edit") {
                  grid.StartEditRow(grid.GetFocusedRowIndex());
                  grid.SetFocusedRowIndex(-1);
              }
              else if (e.actionName === "Delete") {
                  grid.DeleteRow(grid.GetFocusedRowIndex());
                  grid.SetFocusedRowIndex(-1);
              }
              else if (e.actionName === "Save") {
                  grid.UpdateEdit();
              }
              else if (e.actionName === "Cancel") {
                  grid.CancelEdit();
              }...
  }