ASP.NET and MVC Editors - Floating Action Button (v18.2)

It's not every day that I'm impressed by a button control but the new DevExpress ASP.NET Floating Action Button has me intrigued.

The new button control hovers over another control to provide a quick way to access common actions. It can be used to replace context menus, toolbars, etc. This is especially helpful for mobile/touch devices.

It was inspired by Material Design that is used in popular apps like Google Calendar.

Stand-alone control

Take a look at how the Floating Action Button can be used in the ASP.NET Data Grid control:

Setup

Add the Floating Action Button to any page of your ASP.NET application and assign it to a container. Below, we set the button's ContainerElementID to the DIV element that contains the ASPxGridView:

<div id="someContainer">
    <dx:ASPxGridView ID="GridView" runat="server">
        <%--......................--%>
    </dx:ASPxGridView>
</div>
<dx:ASPxFloatingActionButton ID="FloatingActionButton" runat="server" ContainerElementID="someContainer">
    <%--......................--%>
    <Items>
        <dx:FABAction ActionName="NewRow" />
        <%--......................--%>
    </Items>
</dx:ASPxFloatingActionButton>

Context Specific

You can define the context of which actions are displayed when the button is clicked.

So, after declaring the control, be sure to set the custom actions for when an end-user clicks the Floating Action Button.

Scheduler

While it's available as a stand-alone control, we decided that this functionality was especially useful for the ASP.NET Scheduler control. Therefore, we integrated the new Floating Action Button into the Scheduler control directly.

You can create, edit, and delete appointments using predefined actions. You can also assign any custom context and specify any custom actions too.

What are your thoughts on the new DevExpress ASP.NET Floating Action Button? Drop me a line below, thanks!

Free DevExpress Products - Get Your Copy Today