Always Visible Extender Control of Ajax is used to show some control (a panel mostly) on the page always. By always, it means that if the page has been scrolled vertically or horizontally, the extender will be showing the target control in the view area always. It can display the control horizontally in the left, center or right side of the screen and can display it vertically on the top, middle and bottom side of the screen. These orientations can be set using its HorizontalSide and VerticalSide properties.
However, in some case we need to update these properties to make room and view area for our other controls or for any other purpose. For this, its always better to update/ set these properties on client-side. This sample shows how to do it.
<head runat="server">
<title></title>
<script type="text/javascript">
function SetPosition(value) {
if (value == 1) {
$find('pnlTestExtender').set_HorizontalSide(0);
}
else
if (value == 2) {
$find('pnlTestExtender').set_HorizontalSide(1);
}
else
if (value == 3) {
$find('pnlTestExtender').set_HorizontalSide(2);
}
else
if (value == 4) {
$find('pnlTestExtender').set_VerticalSide(0);
}
else
if (value == 5) {
$find('pnlTestExtender').set_VerticalSide(1);
}
else
if (value == 6) {
$find('pnlTestExtender').set_VerticalSide(2);
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" onchange="SetPosition(this.value);">
<asp:ListItem Text="Change Horizontal to Left" Value="1"></asp:ListItem>
<asp:ListItem Text="Change Horizontal to Center" Value="2"></asp:ListItem>
<asp:ListItem Text="Change Horizontal to Right" Value="3"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Top" Value="4"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Middle" Value="5"></asp:ListItem>
<asp:ListItem Text="Change Vertical to Bottom" Value="6"></asp:ListItem>
</asp:DropDownList>
<asp:Panel runat="server" ID="pnlTest" Width="100px" Height="100px" BackColor="Red">
</asp:Panel>
<cc1:AlwaysVisibleControlExtender ID="pnlTestExtender" runat="server" TargetControlID="pnlTest"
HorizontalSide="Center" VerticalSide=" Middle" BehaviorID="pnlTestExtender">
</cc1:AlwaysVisibleControlExtender>
</form>
</body>
Changing the item in the drop down list, makes the panel update its orientation (horizontal and vertical sides)
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
Submit an article or tip
