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