Overview

 Customer IDCompany NameContact NameContact Title
Page size:
 91 items in 13 pages
ALFKIAlfreds FutterkisteMaria AndersSales Representative
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwner
ANTONAntonio Moreno TaqueríaAntonio MorenoOwner
AROUTAround the HornThomas HardySales Representative
BERGSBerglunds snabbköpChristina BerglundOrder Administrator
BLAUSBlauer See DelikatessenHanna MoosSales Representative
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager
telerik ninja image
New to Telerik UI for ASP.NET AJAX?

Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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
  • DefaultVB.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>
</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