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

Events

Event log

FloatingActionButton exposes the following client-side events:

  • OnInitialize—Fired just before the RadFloatingActionButton client-side object is initialized.
  • OnLoad—Fired when RadFloatingActionButton is initialized.
  • OnClick—Fires when the user clicks on a the FloatingActionButton. Cancelable.
  • OnExpand—Fires when the speed-dial popup is opened and its animation is finished. Available only when Items are defined.
  • OnCollapse—Fires when the speed-dial popup is closed and its animation is finished. Available only when Items are defined.

Items in FloatingActionButton expose their own client-side Click events:

  • OnClientClicked—Fires when the user clicks on the respective speed-dial item.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.BasicUsage.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>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
    <div class="demo-container" style="height: 300px; position: relative;">
        <telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="share" PositionMode="Absolute" Align="BottomCenter">
            <AlignOffsetSettings X="0" Y="100" />
            <ClientEvents OnCollapse="OnCollapse" OnExpand="OnExpand" OnLoad="OnLoad" />
            <Items>
                <telerik:FloatingActionButtonItem Label="Download" Icon="download" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
                <telerik:FloatingActionButtonItem Label="Print" Icon="print" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
                <telerik:FloatingActionButtonItem Label="Email" Icon="email" OnClientClicked="dialItemClicked"></telerik:FloatingActionButtonItem>
            </Items>
        </telerik:RadFloatingActionButton>
    </div>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance