Home > DeveloperSection > Articles > Ajax Toolkit HoverMenuExtender Control in ASP.Net

Ajax Toolkit HoverMenuExtender Control in ASP.Net

Posted by  Pushpendra Singh
on    December-07-2010 14:08 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 8761  View(s)
Rate this:

Ajax Toolkit HoverMenuExtender Control in ASP.Net

The ASP.NET AJAX HoverMenuExtender can be attached to any ASP.NET WebControl. The extender associates the ASP.NET control with a panel that is popped up to display additional content, whenever the user moves the mouse cursor over the ASP.NET control.

HoverMenu Properties

·         TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.

·         PopupControlID - The ID of the control to display when mouse is over the target control.

·         PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.

·         OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by PopupPostion.

·         HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. Default is 0.

·         PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.

Code:

<%-- Add the ScriptManger control,HoverMenuExtender and Listbox--%>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

 

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="ListBox1" PopupPosition="Right">

</cc1:HoverMenuExtender>

 

<asp:Label ID="Label1" runat="server" Text="which language you want to learn " ForeColor="#CC3300"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:ListBox ID="ListBox1" runat="server">

 <asp:ListItem>Choose from these language only</asp:ListItem>

  <%--  Here we are adding Item in ListBox  --%>

  <asp:ListItem>C#</asp:ListItem>

  <asp:ListItem>J#</asp:ListItem>

  <asp:ListItem>VB</asp:ListItem>

  <asp:ListItem>Java</asp:ListItem>

 </asp:ListBox>

 

Description

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID=" TextBox1" PopupControlID=" ListBox1" PopupPosition="Right">

</cc1:HoverMenuExtender>

 

HereHoverMenuExtender is targeting control Panel1 TargetControlID="TextBox1" and popped up control is Panel2 PopupControlID="ListBox1".Here PopupPosition is declared “Right” so that popup window display in Right side.

Run the project

 

AjaxControl Toolkit HoverMenuExtender Control in ASP.Net

 

When Mouse over in the TextBox l then popped up control will display in specified position. Here PopupPosition="Right" so popup control will display in right postion.

 

AjaxControl Toolkit HoverMenuExtender Control in ASP.Net

 

 
















Recent Activities


Barbara Jones added new Question What is ANR?   3 days ago

Kamlakar Singh added new Blog Convert Text Document to PDF File   17 days ago

Kamlakar Singh added new Article Introduction to Backbone.js   17 days ago

Don't want to miss updates? Please click the below button!