New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms FloatingActionButton Overview

 Customer IDCompany NameContact NameContact Title
iqeg owehfewoidrwpihef
oeghrdr'ogk`gv[=repokg3e,v[prg
tu ytutyytuy 

About RadFloatingActionButton for ASP.NET AJAX

RadFloatingActionButton is a server-side WebForms wrapper over the Kendo UI FloatingActionButton widget. It represents the primary action of a screen. It floats in the application above other items and has some main action that is contextual to the content on the page.

RadFloatingActionButton and 120+ other controls are part of Telerik UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Renders and operates on the client-side
  • Alignment - position the component precisely as per the application requirements
  • Appearance - control the size, shape and colors of the component
  • Templates - full control over the rendering of the speed dial action items
  • Accessibility - WCAG 2.1 compliance and keyboard navigation
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.Overview.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide" runat="server">

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080"></asp:Label>
        </div>
        <div style="position: relative">

            <telerik:RadGrid RenderMode="Lightweight" Style="position: relative" ID="RadGrid1" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
                DataSourceID="SqlDataSource1" AllowSorting="True" AllowPaging="True"
                runat="server" AllowMultiRowSelection="True" PageSize="7"
                MasterTableView-EditMode="PopUp" AutoGenerateDeleteColumn="true"
                AllowAutomaticInserts="True" OnItemCreated="RadGrid1_ItemCreated"
                OnItemInserted="RadGrid1_ItemInserted" OnItemDeleted="RadGrid1_ItemDeleted">
                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                <MasterTableView Width="100%" CommandItemDisplay="Top" DataSourceID="SqlDataSource1"
                    DataKeyNames="CustomerID">
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnPopUpShowing="OnPopUpShowing" />
                </ClientSettings>
            </telerik:RadGrid>

            <telerik:RadFloatingActionButton runat="server" Icon="add" Align="BottomEnd" PositionMode="Absolute">
                <AlignOffsetSettings Y="55" />
                <ClientEvents OnLoad="OnClientLoad" OnClick="showInsertForm" />
            </telerik:RadFloatingActionButton>

            <telerik:RadCodeBlock runat="server">

                <script>
                    function OnClientLoad(sender, args) {
                        $telerik.$(sender.get_element()).on({
                            "mouseenter": function () {
                                sender.set_text("Add New Record");
                                var txtElement = $telerik.$(sender.get_element()).find(".k-fab-text");
                                txtElement.hide().stop().toggle(200);
                            },
                            "mouseleave": function () {
                                $telerik.$(sender.get_element()).find(".k-fab-text")
                                    .stop()
                                    .toggle(200)
                                    .promise().done(function () {
                                        sender.set_text("");
                                    });
                            }
                        });
                    }

                    function showInsertForm(sender, args) {
                        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                        masterTable.fireCommand("InitInsert", "");
                    }
                    function OnPopUpShowing(sender, args) {
                        //https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/data-editing/center-popup-edit-form-in-radgrid
                        var popUp = args.get_popUp();
                        var gridWidth = sender.get_element().offsetWidth;
                        var gridHeight = sender.get_element().offsetHeight;
                        var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
                        var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
                        popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
                        popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
                    }
                </script>
            </telerik:RadCodeBlock>

        </div>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID"
            InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle)"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers]"
            UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance