ASPxClientFloatingActionButton.ActionItemClick Event

Occurs when an end user clicks the action item.

Declaration

ActionItemClick: ASPxClientEvent<ASPxClientFloatingActionButtonActionItemClickEventHandler<ASPxClientFloatingActionButton>>

Event Data

The ActionItemClick event's data class is ASPxClientFloatingActionButtonActionItemClickEventArgs. The following properties provide information specific to this event:

Property	Description
actionName	Gets the name of the processed action.

Remarks

The ActionItemClick event allows you to handle each action item click.

The following code snippet illustrates how to use the ActionItemClick event.

Web Forms:

ASPX

<dx:ASPxFloatingActionButton ID="ASPxFloatingActionButton1" runat="server" ClientInstanceName="fab" ContainerElementID="content">
    <ClientSideEvents Init="OnInit" ActionItemClick="OnActionItemClick" />
    <Items>
        <dx:FABActionGroup ContextName="ShareItemContext" Text="Share">
            <ExpandImage Url="../Content/FloatingActionButton/Images/Share.svg"></ExpandImage>
            <Items>
                ...
                <dx:FABActionItem ActionName="GooglePlus">
                    <Image Url="../Content/FloatingActionButton/Images/GooglePlus.svg"></Image>
                </dx:FABActionItem>
                <dx:FABActionItem ActionName="Facebook">
                    <Image Url="../Content/FloatingActionButton/Images/Facebook.svg"></Image>
                </dx:FABActionItem>
            </Items>
        </dx:FABActionGroup>
        ...
    </Items>
</dx:ASPxFloatingActionButton>

JS

function OnActionItemClick(s, e) {
    if (e.actionName == 'Facebook')
        // some code
}

MVC:

Razor#

@{
    var _fabActionItemCollection = new FABActionItemCollection();
    _fabActionItemCollection.Add(new FABActionItem("Down", "icon1.png"));
    _fabActionItemCollection.Add(new FABActionItem("Up", "icon2.png"));
}
@Html.DevExpress().FloatingActionButton(floatingActionButtonSettings => {
    floatingActionButtonSettings.Name = "fab";
    floatingActionButtonSettings.ContainerElementID = "Grid";
    floatingActionButtonSettings.Items.Add(new FABAction("Action1", "Action1"));
    floatingActionButtonSettings.Items.Add(new FABActionGroup("Action2", _fabActionItemCollection));
    floatingActionButtonSettings.ClientSideEvents.ActionItemClick = "onItemClick";
...
}).GetHtml()

JS

function onItemClick(s, e) {
        if (e.actionName === "Action1") {
            $.post('@Url.Action("Action1", "Home")', function (data) {
                alert("Data Loaded: " + data);
            });

        }
    }

Online Demo

Floating Action Button - Features