AlwaysVisibleExtender Control in ASP.net AJAX
In this article I'm trying to explain how to display the data default into visible to the page. Using this article we can able to pin the position of the control by default. But need to download the AJAX toolkit dll's after download add reference to the project.
AlwaysVisibleExtender Control in ASP.net AJAX:
In this article I'm trying to explain how to display the data default into visible to the page. Using this article we can able to pin the position of the control by default. But need to download the AJAX toolkit dll's after download add reference to the project.Description:
The AlwaysVisibleControl is a simple extender allowing you to pin controls to the page so that it will appear to float over the background body content when it is scrolled or resized. It targets any ASP.NET control and always keeps the position a specified distance from the desired horizontal and vertical sides. Properties:
• TargetControlID - ID of control for this extender to always make visible
• HorizontalOffset – distance to the Horizontal edge of the browser in the form of pixels, by default is 0 pixels.
• HorizontalSide – Horizontal edge of the browser either it will be top, middle, bottom. Default is Top.
• VerticalOffset - distance to the vertical edge of the browser in the form of pixels, by default is 0 pixels.
• VerticalSide - Horizontal edge of the browser either it will be top, middle, bottom. Default is Top.Article Description:
In this Article I'm trying to explain that to display the current time by default browser using AlwaysVisibleExtender control. If we are not used this when we scrolling it's obviously disappear. Here I'm using one dropdownlist for fixing the position of the control.
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="pnl"
VerticalSide="Top" HorizontalSide="Right" VerticalOffset="5" HorizontalOffset="5"
></ajaxToolkit:AlwaysVisibleControlExtender>Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AlwaysVisibleControl.aspx.cs" Inherits="AlwaysVisibleControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="width:297px; height:120px">
<script type="text/javascript" language="javascript">
function updateTime() {
var label = document.getElementById('spn');
if (label) {
var time = (new Date()).localeFormat("T");
label.innerHTML = time;
}
}
updateTime();
window.setInterval(updateTime, 1000);
</script>
<ajaxToolkit:ToolkitScriptManager runat="server" EnablePartialRendering="true" ID="ScriptManager1" />
<asp:Panel ID="pnl" runat="server" Width="250px" BackColor="White" ForeColor="Red" Height="50px" Font-Size="XX-Large"
BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
<span id="spn" runat="server"></span>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="pnl"
VerticalSide="Top" HorizontalSide="Right" VerticalOffset="5" HorizontalOffset="5"
></ajaxToolkit:AlwaysVisibleControlExtender>
</div>
<p>
Position: <asp:DropDownList ID="ddlPosition" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="ddlPosition_OnSelectedIndexChanged">
<asp:ListItem Text="Default" Selected="true" Value="None" />
<asp:ListItem Text="Top Left" Value="TL" />
<asp:ListItem Text="Top Center" Value="TC" />
<asp:ListItem Text="Top Right" Value="TR" />
<asp:ListItem Text="Middle Left" Value="ML" />
<asp:ListItem Text="Middle Center" Value="MC" />
<asp:ListItem Text="Middle Right" Value="MR" />
<asp:ListItem Text="Bottom Left" Value="BL" />
<asp:ListItem Text="Bottom Center" Value="BC" />
<asp:ListItem Text="Bottom Right" Value="BR" />
</asp:DropDownList>
</p>
</form>
</body>
</html>Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System;
using AjaxControlToolkit;
public partial class AlwaysVisibleControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
spn.InnerText = DateTime.Now.ToString("T");
}
protected void ddlPosition_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (ddlPosition.SelectedValue == "TL")
{
//set vertical position
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Top;
//set horizontal position
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Left;
}
else if (ddlPosition.SelectedValue == "TC")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Top;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Center;
}
else if (ddlPosition.SelectedValue == "TR")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Top;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Right;
}
else if (ddlPosition.SelectedValue == "ML")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Middle;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Left ;
}
else if (ddlPosition.SelectedValue == "MC")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Middle;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Center;
}
else if (ddlPosition.SelectedValue == "MR")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Middle;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Right;
}
else if (ddlPosition.SelectedValue == "BL")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Bottom;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Left ;
}
else if (ddlPosition.SelectedValue == "BC")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Bottom;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Center;
}
else if (ddlPosition.SelectedValue == "BR")
{
AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Bottom;
AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Right;
}
}
}OutPut:
The position of the controll should be changed based on DropDown selection.
This is default position
This is Middle Center position
This is Top Left position
ScriptManager:
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
Without wrote this line in source code it's throws the server error to overcome this issue we just add above lines of code under div tag.
Conclusion:
Using this we can allowing you to pin controls to the page so that it will appear to float over the background body content when it is scrolled or resized . This article will help you those who are looking for the same.
Follow