Ajax HOVER Menu Extender

Blog Author


Published Date

20th September, 2018




  • Share this blog :

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.

About Author


Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .

Related Blogs

Write For Us