Reader Level:

How to use AJAX HoverMenuExtender control using Grid View

By Raj Kumar Beniwal on Oct 28, 2009
This article will show how to use Ajax HoveMenuExtender control with 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.

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


To know more about SQLDataSource control read this article.

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: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: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 >>">




                     <td id="nameTD" runat="server"><asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>' />, <asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LastName") %>' />


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

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

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


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

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

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


                       <td><b>City: </b>

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

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


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

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

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



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

                            TargetControlID="nameTD" PopupControlID="panelPopUp"

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


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

                        <table width="100%" cellpadding="2" cellspacing="2">


                                <td><asp:ImageButton ID="imageButtonDelete" AlternateText="Delete record?" runat="server" CommandName="Delete" ImageUrl="~/maildelete.gif" />




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



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



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











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.

Raj Kumar Beniwal
Raj Kumar Beniwal

Raj Kumar Beniwal is two time Microsoft MVP(Client App Dev) and four time C# Corner MVP,  working as project manager with lots of hands on experience using ASP.NET 2.0/3.5, AJAX, MVC, C#, Visual Basic .NET, SQL Serv... Read more



Spire.Doc - Free .NET Word API
Use Spire.Doc to create, read, write, print, and convert word documents to OpenXML, RTF, TXT, XPS, EPUB, EMF, HTML, Image and PDF.

Trending up

Infragistics jQuery Controls