• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Ajax HOVER Menu Extender

HOVER Menu Extender

HOVER Menu Extender is used to make a control visible only when mouse point is over another control. 

Properties

targercontrolID:

popupcontrolID : used to specify ID of the control to popup.

Offset x & Offset y: used tospecify psotion for the popup control relative to the target control.

PopDelay: Used to specify the time in milli-seconds at which the popup control has to be popup.

Example

The following example demonstrates how to use the HOVER MenuExtender.

Add a page to the website and then take a Toolkit Script manager on it and then a gridview control, for the gridview control set the ID ‘GVDept’, Autogenerate columns property to false and then create a layout of gridview control with in HTML source of the page as follows:

with in GV Control

<columns>

<asp:TemplateField Headertext=”Deptno”>

<Item Template >

<asp:Linkbutton ID =”LnkEdit” runat =”server” Text=”Edit” commandName=”Edit”/>

<asp: Label ID=”lblDno” runat=”Server” Text=’<%#Eval(“Deptno”)%>/>

<asp:HoverMenuExtender  ID=”HoverMenuExtender1” runat=”Server” TargetControlID=”LblDno” popupcontrolID=”LnkEdit” offset=”-40” popDelay=”50” >

</asp: HoverMenuExtender>

</ItemTemplate>

<EditItemTemplate>

<asp: Label ID =”lblDno” runat=”server” Text=<%#Eval(“Deptno”)%>/>

</EditItemTemplate>

</asp: Templatefield>

<asp:TemplateField HeaderText=”Dname”>

<ItemTemplate>

<asp:Labek ID=”LblDame” runat=”server” Text=<%#Eval(“Dname”%>/>

</ItemTemplate>

<EditItem Template>

<asp:TextBox Id=”TxtDname” runat=”server” Text=”<%#Bind(‘Dname’)%>/>

</EditItemTemplate>

</asp:TemplateFiled>

<asp: TemplateField HeaderText=”Location”>

<Item Template>

<asp:Label ID=”LblLoc” runat=”server” Text=’<%#Eval(“Loc”)%>/>

</ItemTemplate>

<EditItem Template>

<asp: TextBox ID=”TxtLoc” runat=”Server” Text=”<%#Bind(‘Loc’)%>/>

</EditItemTemplate>

</asp:TemplateField></columns>

<asp:Gridview>

Within the code of the page create a method with the name FillGrid() as follows and calling the method in the pagelaod event.

private void FillGrid()

{

sqlconnection Cn= new sqlconnection( “Server=Nikhil, Database=mydb; Uid=sa; pwd=123”);

SqlDataAdapter Da= new SqlDataAdapater(“Select * from dept”, Cn);

Dataset Ds=new Dataset();

Da.fill(Ds,”Dept”)

GVDept.DataSource=DS.Tables[“Dept”];

GVDept.DataBind();

}

Call the fillGrid() method.In page load event.

Write the following code with in the ‘RowEditing’ event of te GridView to convert the row into edit mode.

under GVDept-RowEditing –Event

{

GVDept.EditIndex=e.NewEditIndex;

FillGrid();

}

At runtime when you place mouse pointer over the Deptno then the edit LinkButton will display to the left of the Deptno and clicking on the Edit Button will convert the row to edit mode. Until mouse pointer is over when you place mouse pointer over the Deptno.

Summary
Review Date
Reviewed Item
Ajax HOVER Menu Extender
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Ajax HOVER Menu Extender"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.