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

API

  • Demo Configurator
Api Functions
Appearance
Shape
Size

When setting an icon use the name of an existing icon of the Kendo UI theme that is rendered in the FloatingActionButton. For details on available Web Font Icons refer to Web Font Icons article.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.BasicUsage.DefaultVB" CodeFile="DefaultVB.aspx.vb" %>

<%@ 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" />

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadFloatingActionButton1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadCodeBlock runat="server">
        <script>
            function enableClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                fab.enable();
            }
            function disableClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                fab.disable();
            }
            function showClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                fab.show();
            }
            function hideClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                fab.hide();
            }
            function getIconClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var icon = fab.get_icon();
                window.radalert(icon);
            }
            function setIconClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var tbValue = $find("<%= tbIcon.ClientID %>");

                fab.set_icon(tbValue.get_value());
            }
            function getTextClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var text = fab.get_text();
                window.radalert(text);
            }
            function setTextClicked(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var tbValue = $find("<%= tbText.ClientID %>");

                fab.set_text(tbValue.get_value());
            }
            function shapeSelectionChanged(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var shape = args.get_item().get_value();
                fab.set_shape(Telerik.Web.UI.RadFloatingActionButtonShape[shape]);
             }
            function sizeSelectionChanged(sender, args) {
                var fab = $find("<%= RadFloatingActionButton1.ClientID %>");
                var size = args.get_item().get_value();
                fab.set_size(Telerik.Web.UI.RadFloatingActionButtonSize[size]);
            }

        </script>
    </telerik:RadCodeBlock>
    <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
    <div class="demo-container" style="height: 300px; position: relative;">
        <telerik:RadFloatingActionButton runat="server" Size="Large" ID="RadFloatingActionButton1" Icon="home" Text="Home" PositionMode="Absolute" Align="BottomCenter">
            <AlignOffsetSettings X="0" Y="100" />
        </telerik:RadFloatingActionButton>
    </div>


    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Api Functions" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" Text="Enable" ID="btnEnable" OnClientClicked="enableClicked" AutoPostBack="false"></qsf:Button>
                            <qsf:Button runat="server" Text="Disable" ID="btnDisable" OnClientClicked="disableClicked" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button runat="server" Text="Show" ID="btnShow" OnClientClicked="showClicked" AutoPostBack="false"></qsf:Button>
                            <qsf:Button runat="server" Text="Hide" ID="btnHide" OnClientClicked="hideClicked" AutoPostBack="false"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Appearance" Size="Medium">
                    <div class="col col-medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:Button runat="server" Text="Get Icon" ID="btnGetIcon" OnClientClicked="getIconClicked" AutoPostBack="false"></qsf:Button>
                                <qsf:Button runat="server" Text="Set Icon" ID="btnSetIcon" OnClientClicked="setIconClicked" AutoPostBack="false"></qsf:Button>
                                <qsf:TextBox runat="server" Text="gear" ID="tbIcon"></qsf:TextBox>
                            </li>
                            <li>
                                <qsf:Button runat="server" Text="Get Text" ID="btnGetText" OnClientClicked="getTextClicked" AutoPostBack="false"></qsf:Button>
                                <qsf:Button runat="server" Text="Set Text" ID="btnSetText" OnClientClicked="setTextClicked" AutoPostBack="false"></qsf:Button>
                                <qsf:TextBox runat="server" Text="Settings" ID="tbText"></qsf:TextBox>
                            </li>

                        </ul>
                    </div>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Shape" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ShapeOptions" runat="server" AutoPostBack="false" Size="Wide" OnClientSelectedIndexChanged="shapeSelectionChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Rectangle" Value="Rectangle" />
                                    <telerik:RadComboBoxItem Text="Square" Value="Square" />
                                    <telerik:RadComboBoxItem Text="Pill" Value="Pill" Selected="true"  />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                 <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Size" Size="Narrow">

                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="SizeOptions" runat="server" AutoPostBack="false" Size="Wide" OnClientSelectedIndexChanged="sizeSelectionChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium"  />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" Selected="true" />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance