How to use AJAX HoverMenuExtender control using Grid View

This article will show how to use Ajax HoveMenuExtender control with Grid View. You can download ajaxcontrolttoolkit you will get sample web site ,there we will have working examples. HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl, and will associate that control with a popup panel do display additional content. You can fix displayed popup panel position at the let, right, top,bottom of the main control.

First of all make a new Ajax Enables website and drag and drop GridView, HoverMenuExtender control on the page. In this sample I am using SQLDataSource control for accessing database it save connection string in web.config file like this.

<connectionStrings>
<add name="NORTHWNDConnectionString" connectionString="Data Source=MCNRAJ\SQLSERVER2005;Initial Catalog=NORTHWND;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

To know more about SQLDataSource control read this article.

http://www.c-sharpcorner.com/UploadFile/raj1979/SqlDataSource10032008142537PM/SqlDataSource.aspx?ArticleID=f139b31d-71a9-4df2-a1da-4fa569e3ec6b

Here we go...

When you drag and drop a ajax control on page it adds a namespace on top of page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

This is SQLDataSource

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
SelectCommand="SELECT DISTINCT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [City], [Country],[Address],[HomePhone], [PhotoPath] FROM [Employees]"
DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID]=@EmployeeID">
</asp:SqlDataSource>

-----

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"

EmptyDataText="There are no items available for lookup at this time!"

DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">

<asp:TemplateField HeaderText="<< Employees List >>">

<table>

<tr>

</td>

<td><b>Title: </b>

<asp:Label ID="lblTitle" runat="server"

Text='<%# Eval("Title") %>' />

</td>

<td><b>BirthDate: </b>

<asp:Label ID="lblBirthDate" runat="server"

Text='<%# Eval("BirthDate") %>' />

</td>

<asp:Label ID="lblCity" runat="server"

Text='<%# Eval("City") %>' />

</td>

<td><b>Country: </b>

<asp:Label ID="lblCountry" runat="server"

Text='<%# Eval("Country") %>' />

</td>

<td>

<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server"

TargetControlID="nameTD" PopupControlID="panelPopUp"

PopDelay="20" OffsetX="-100" OffsetY="-5">

</ajaxToolkit:HoverMenuExtender>

<asp:Panel ID="panelPopUp" runat="server" BackColor="AliceBlue" BorderStyle="Dotted" BorderColor="Gray" BorderWidth="1px">

<tr>

</td>

</tr>

<tr>

<td>Address: <asp:Label ID="Label1" runat="server" Text='<%# Eval("Address") %>' /></td>

</tr>

<tr>

<td>Phone: <asp:Label ID="Label2" runat="server" Text='<%# Eval("HomePhone") %>' /></td>

</tr>

<tr>

<td>Photo URL: <asp:Label ID="Label3" runat="server" Text='<%# Eval("PhotoPath") %>' /></td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Now buid your application, Output will look like this.

Figure 1.

When cursor moves on name then one popup panel will open with some content and delete image.

Figure 2.