<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.FloatingActionButton.Templates.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>
<link href="styles.css" rel="stylesheet" />
<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" />
<div class="demo-container" runat="server">
<div style="position: relative; display: inline-block; width: 100%">
<div id="page-overlay" class="k-overlay"></div>
<telerik:RadEditor runat="server" Width="100%">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Cut"></telerik:EditorTool>
<telerik:EditorTool Name="Copy"></telerik:EditorTool>
<telerik:EditorTool Name="Paste"></telerik:EditorTool>
</telerik:EditorToolGroup>
</Tools>
<Content>
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: 12px; text-align: center;"><span style="font-size: large;"><strong>One of the Most Beautiful Islands on Earth - Tenerife</strong></span></p>
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: 12px;"><span style="font-size: medium;"><strong>Overview</strong></span></p>
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: small;"><strong>Tenerife </strong>is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank" style="color: #0000aa;">Canary Islands</a>. It is also the most populated island of <strong>Spain</strong>, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the <strong>Canary Islands</strong>. The archipelago's beaches, climate, and important natural attractions make it a major tourist destination with over 12 million visitors per year.</p>
<br style="font-family: Verdana, Geneva, sans-serif; font-size: 12px;" />
<img alt="" src="https://demos.telerik.com/kendo-ui/content/web/editor/tenerife.png" width="350" height="206" style="margin-left: 15px; margin-right: 0px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; float: right;" />
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: 12px;"><span style="font-size: medium;"><strong>Trip Highlights in Tenerife</strong></span></p>
<span style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; white-space: pre;"></span><span style="font-family: Verdana, Geneva, sans-serif; font-size: 12px;"></span>
<ul style="padding-left: 2.5em; font-family: Verdana, Geneva, sans-serif; font-size: 12px;">
<li><strong style="color: #005005;">Trip to Loro Parque</strong><br />
Our top tip is to visit the famous <em>Loro Parque</em> or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz in Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species.<br />
<br />
</li>
<li><strong><span style="color: #2e7d32;">Whale and Dolphin Watching Tour <br />
</span></strong>Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.<br />
<br />
</li>
<li><strong><span style="color: #60ad5e;">Teide National Park Stargazing</span></strong><br />
Last, but not least you can take a stargazing trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.</li>
</ul>
<br style="font-family: Verdana, Geneva, sans-serif; font-size: 12px;" />
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: 12px;"><span style="font-size: medium;"><strong>Climate</strong></span></p>
<table class="k-table" style="width: 1140px; border-spacing: 0px; margin: 0px 0px 1em; outline: 0px; border-top: 1px dotted #cccccc; border-left: 1px dotted #cccccc; border-right-style: dotted; border-bottom-style: dotted; border-right-color: #cccccc; border-bottom-color: #cccccc; border-image: initial; font-family: Verdana, Geneva, sans-serif; font-size: 12px; height: 225px; text-align: center;">
<tbody>
<tr data-role="resizable" style="height: 45.1125px; background-color: #60ad5e;">
<td colspan="14" style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial; width: 473px; font-size: medium; color: #ffffff;"><strong>Climate Data for <a href="https://en.wikipedia.org/wiki/Santa_Cruz_de_Tenerife" target="_blank" style="color: #0000aa;">Santa Cruz de Tenerife</a></strong></td>
</tr>
<tr data-role="resizable" style="height: 22.25px;">
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial; width: 230px;"><span style="font-size: small; color: #2e7d32;"><strong>Month</strong></span></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Jan</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Feb</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Mar</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Apr</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">May</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Jun</span></strong></td>
<td data-role="resizable" style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Jul</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Aug</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Sep</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Oct</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Nov</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Dec</span></strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;"><strong><span style="color: #005005;">Year</span></strong></td>
</tr>
<tr data-role="resizable" style="height: 51.875px;">
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial; width: 230px; color: #2e7d32;"><strong>Daily mean °C (°F)</strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">18.2<br />
(64.8)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">18.3<br />
(64.9)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">19.0<br />
(66.2)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">19.7<br />
(67.5)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">21.0<br />
(69.8)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">22.9<br />
(73.2)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">25.0<br />
(77.0)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">25.5<br />
(77.9)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">24.9<br />
(76.8)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">23.4<br />
(74.1)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">21.3<br />
(70.3)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">19.4<br />
(66.9)<br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">21.5<br />
(70.7)<br />
</td>
</tr>
<tr data-role="resizable" style="height: 51.875px;">
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial; width: 230px; color: #2e7d32;"><strong>Average rainy days (≥ 1.0 mm)</strong></td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">8.0</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">7.2</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">6.9</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">5.5</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">2.9</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">0.9</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">0.2</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">0.8</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">2.7</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">6.1</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">8.8</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">9.4</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">59.4</td>
</tr>
<tr style="height: 51.8875px;">
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial; width: 230px; color: #2e7d32;"><strong>Mean monthly <a href="https://en.wikipedia.org/wiki/Sunshine_duration" target="_blank" style="color: #0000aa;">sunshine hours</a></strong><br />
</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">178</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">186</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">221</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">237</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">282</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">306</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">337</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">319</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">253</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">222</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">178</td>
<td data-role="resizable" style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">168</td>
<td style="min-width: 1px; padding: 0.2em 0.3em; outline: 0px; border-right: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; border-top-style: dotted; border-left-style: dotted; border-top-color: #cccccc; border-left-color: #cccccc; border-image: initial;">2,887</td>
</tr>
</tbody>
</table>
<p style="margin: 0px 0px 1em; font-family: Verdana, Geneva, sans-serif; font-size: 12px;"><em>* The data used in this demo is taken from <a href="https://wikipedia.com/" target="_blank" style="color: #0000aa;">wikipedia.com</a>.</em><br />
<em>** The displayed photos are sourced from <a href="https://pixabay.com/" target="_blank" style="color: #0000aa;">pixabay.com</a></em></p>
<style>
body > img {
margin-left: 15px;
margin-right: 0px;
}
</style>
</Content>
</telerik:RadEditor>
<telerik:RadFloatingActionButton runat="server" Icon="share" PositionMode="Absolute" Align="BottomEnd" Size="Medium" ThemeColor="primary">
<AlignOffsetSettings X="50" Y="50" />
<ClientEvents OnExpand="OnExpand" OnCollapse="OnCollapse" />
<Items>
<telerik:FloatingActionButtonItem OnClientClicked="onItemClicked" Label="Darrel Sollis">
<ClientTemplate>javascript:getTemplate({text: 'Share with Darrel Sollis',image: 'AROUT.jpg'})</ClientTemplate>
</telerik:FloatingActionButtonItem>
<telerik:FloatingActionButtonItem OnClientClicked="onItemClicked" Label="Mia Caldwell">
<ClientTemplate>javascript:getTemplate({text: 'Share with Mia Caldwell',image: 'BSBEV.jpg'})</ClientTemplate>
</telerik:FloatingActionButtonItem>
<telerik:FloatingActionButtonItem OnClientClicked="onItemClicked" Label="Mallory Gillian">
<ClientTemplate>javascript:getTemplate({text: 'Share with Mallory Gillian',image: 'FISSA.jpg'})</ClientTemplate>
</telerik:FloatingActionButtonItem>
</Items>
</telerik:RadFloatingActionButton>
<telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
</div>
<script id="fabItemTemplate" type="text/x-kendo-template">
<span class="k-fab-item-text">#:text#</span>
<span class="k-avatar k-avatar-solid-primary k-avatar-solid k-rounded-full k-avatar-md">
<span class="avatar-image">
<img src="https://demos.telerik.com/kendo-ui/content/web/Customers/#:image#" />
</span>
</span>
</script>
</div>
</form>
</body>
</html>