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

Positions

Invite Attendees

The RadFloatingActionButton exposes the Align and PositionMode properties and the AlignOffsetSettings inner tag as configuration options. These three options work together and allow you to position the FloatingActionButton component precisely as per the application requirements.

  • Align—Specifies the position of the FloatingActionButton relative to its container. When using this option it is important to ensure that the FloatingActionButton container has a CSS position other than static and allows overflow content.
  • PositionMode—Specifies the CSS position of the FloatingActionButton in the document. You can position the RadFloatingActionButton relative to the closest ancestor or position it relative to the viewport. The PositionMode can be set to "Absolute" or "Fixed".
  • AlignOffsetSettings—Specifies the horizontal and vertical offset of the RadFloatingActionButton relative to the Align configuration defined
  • DefaultVB.aspx
    • DefaultVB.aspx
    • PositionsIframe.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.Overview.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>
    <style>
        .demo-container label {
            display: block;
            margin: 15px 0 5px 0;
        }      
        .btn-send-invite {
            float: right;
            margin: 25px auto 0;
        }
    </style>
</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-narrow" runat="server">
        <h2>Invite Attendees</h2>

        <asp:Label Text="Required" ID="Label1" AssociatedControlID="requiredMultiSelect" runat="server" />
        <telerik:RadMultiSelect runat="server" DataValueField="text" Filter="Contains" EnforceMinLength="false" Placeholder="Select attendees..."
            DataTextField="text" Width="500px" ID="requiredMultiSelect">
            <Items>
                <telerik:MultiSelectItem Text="Steven White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Callahan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Peacock"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Janet White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Margaret Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nige Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Fuller"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>

        <asp:Label Text="Optional" ID="Label2" AssociatedControlID="optionalMultiSelect" runat="server" />
        <telerik:RadMultiSelect runat="server" Filter="Contains" EnforceMinLength="false" AutoClose="false" Placeholder="Select attendees..."
            DataTextField="text" Width="500px" ID="optionalMultiSelect">
            <Items>
                <telerik:MultiSelectItem Text="Steven White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Callahan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Peacock"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Janet White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Margaret Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nige Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Fuller"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>
        
        <telerik:RadButton runat="server" ID="RadButton1" Text="Send Invitation" AutoPostBack="false" OnClientClicked="OnClientClicked" CssClass="btn-send-invite " />

        <script>
            function OnClientClicked(sender, args) {
                var required = $find("<%= requiredMultiSelect.ClientID %>");
                var optional = $find("<%= optionalMultiSelect.ClientID %>");

                alert("Attendees:\n\nRequired: " + required.get_value() + "\nOptional: " + optional.get_value());
            }
        </script>
    </div>

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

Support & Learning Resources

Find Assistance