AJAX Control ToolKit HoverMenu Tutorial using ASP.NET C#
See more tutorials in Controls. This post has No Comments.
Looking for a Tutorial Based on the AJAX control HoverMenu?
In today’s tutorial we will show you how to use the HoverMenu and property set it up.
You are going to have a Database where we will be able to access it and edit it without having to send information to the server.
The HoverMenu is extender that can be combined with any WebControl, and it will identify that control with a popup panel to demonstrate additional content. When the user moves the mouse cursor over the main control two events will occur:
1. The popup panel is displayed at a position designated by the page developer (at the left, right, top, or bottom of the main control)
2. Optionally, a CSS style is utilized to the control to specify it as “hot”
Before we begin, we strongly urge you to follow carefully by downloading the source file. This Project is data specific and can get very confusing.
1. First we will add a new WebForm to this project and name it HoverMenu.aspx
2. Before we can do anything, we have to add a ToolScriptManager to the page.
3. Next up is we can add a Hovermenu extender,
4. Next up let’s add a GridView to the Page and configure it.
5. Add 2 link Buttons to the page in the Gridview, Name them Edit & Delete. Set the Properties of each Link Button as follows
<asp:LinkButton ID="LinkButton1" runat=" CausesValidation="True" CommandName="Update" Text="Update" />
<asp:LinkButton ID="LinkButton2" runat="server"
7. Add however many columns as you want to the Gridview to edit the columns.
8. Then lets add an Object dataSource
9. Configure the object datasource with your information. Or you can download our Source Code use the Data we used.
The markup of the page will look like:
<asp:HoverMenuExtender ID="hme2" runat="Server"
<asp:Panel ID="Panel9" runat="server" Width="80%">
<td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server"
Text='<%# Bind("Title") %>' Width="100" /></td>
<td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server"
Text='<%# Bind("Description") %>' Width="150" /></td>
<td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server"
Text='<%# Bind("Priority") %>' Width="40" /></td>
<asp:HoverMenuExtender ID="hme1" runat="Server"
In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row.
Mouse over the GridView to see this behavior. Upon choosing “Edit”, the row will go into edit mode, and you’ll notice the menu will appear to the right of the content, demonstrating the ability to choose the popup position.
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.