Get Started with Floating Action Button

• Jun 15, 2022
• 2 minutes to read

This topic contains step-by-step instructions on how to use ASPxFloatingActionButton and demonstrates its functionality.

Follow the steps below.

• Step 1. Create a new website or open an existing one in Visual Studio. Drop the ASPxFloatingActionButton control from the Visual Studio toolbox onto the form.

  ASPX

  <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" ClientInstanceName="fab" TextVisibilityMode="Always">
  </dx:ASPxFloatingActionButton>
  

• Step 2. Add two buttons to the form to call the control’s action and action group items on each button click.

  ASPX

  <div id="div1">
      <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Button 1" AutoPostBack="false"></dx:ASPxButton>
      <dx:ASPxButton ID="ASPxButton2" runat="server" Text="Button 2" AutoPostBack="false"></dx:ASPxButton>
  </div>
  

• Step 3. Use the ASPxFloatingActionButton.ContainerElementID property to associate the control with the DIV element that contains the buttons. Specify the ASPxFloatingActionButton.VerticalPosition and ASPxFloatingActionButton.HorizontalPosition properties to define the control’s position.

  ASPX

  <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" VerticalPosition="Bottom" HorizontalPosition="Right" ContainerElementID="div1" ClientInstanceName="fab" TextVisibilityMode="Always">
  </dx:ASPxFloatingActionButton>
  

• Step 4. Specify the control’s FABAction and FABActionGroup objects to create an action and action group items.

  ASPX

  <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" VerticalPosition="Bottom" HorizontalPosition="Right" ContainerElementID="div1" ClientInstanceName="fab" TextVisibilityMode="Always">
       <Items> 
            <dx:FABAction ContextName="button1" Text="Action 1" ActionName="Action1"></dx:FABAction> 
            <dx:FABActionGroup ContextName="button2" Text="Action Group"> 
                  <Items> 
                      <dx:FABActionItem ActionName="Action2" Text="Action 2"></dx:FABActionItem> 
                      <dx:FABActionItem ActionName="Action3" Text="Action 3"></dx:FABActionItem> 
                  </Items> 
            </dx:FABActionGroup> 
       </Items>
  </dx:ASPxFloatingActionButton>
  

• Step 5. Handle a button’s Click event to invoke a floating action item.

  ASPX

  <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Button 1" AutoPostBack="false">
      <ClientSideEvents Click="function(s, e) { fab.SetActionContext('button1'); } />
  </dx:ASPxButton>
  <dx:ASPxButton ID="ASPxButton2" runat="server" Text="Button 2" AutoPostBack="false">
      <ClientSideEvents Click="function(s, e) { fab.SetActionContext('button2', true); } />
  </dx:ASPxButton>
  

• Step 6. Use the ActionItemClick event to handle an action item’s click.

  ASPX

  <dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" VerticalPosition="Bottom" HorizontalPosition="Right" ContainerElementID="div1" ClientInstanceName="fab" TextVisibilityMode="Always">
       <Items> 
          ...
       </Items>
       <ClientSideEvents ActionItemClick="function(s, e) {
              if (e.actionName == 'Action1')
                  button1.SetText('Action 1 is clicked');}" />
  </dx:ASPxFloatingActionButton>
  

• Result: