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.