Working With Hover Menu Extender in ASP.NET

Introduction

In this article we will learn how to use the ASP.Net Ajax Hover Menu Extender control. In this article we will show the various uses of this hover menu extender control. Normally all of you are aware of the concept of a hover menu in which we can show some extended values of the short form. E.g. we have one linkbutton and when the user moves the mouse over the linkbutton we need to show some description about it on our web page.

Consider one more case e.g. we have our GridView in which we are showing Articles but in GridView we can not show the description of an article because in GridView so long text showing is not good; instead of that in a GridView we can show the title and author names only but whenever the user moves the mouse over the title we need to show the description of the article so we can do that very easily. In this article we will see this example only how to show hover menu when the mouse moves over titles in a GridView. So let's get started from the basics of the hover menu extender.

Hover Menu Extender

The Hover Menu Extender is an Ajax control which popups when the mouse moves over the control. This popup is nothing some another container control with visibility as hidden and contains some another controls to display in popups. So first we will create one simple Hover Menu on LinkButton on mouse over we will show one hyperlink in popup.

First start your website and add the reference to AjaxControlToolkit and register the tagprefix to ajaxcontroltoolkit like below.

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

Now keep one scriptManager on the page, one linkbutton, one HoverMenuExtender and one Panel containing hyperlink like below.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div id="contents">
This <asp:LinkButton ID="article" runat="server" Text="Article" PostBackUrl="http://www.c-sharpcorner.com"></asp:LinkButton> Will explain How to use
<asp:Panel ID="Panel1" runat="server" style="visibility:hidden">
<a href="http://www.c-sharpcorner.com">Click Here</a>
</asp:Panel>
</div>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="article" PopupControlID="Panel1" PopupPosition="Top">
</cc1:HoverMenuExtender>
</div>

In the above code there is nothing special to discuss except the HoverMenuExtender. The Hover Menu has some properties which we can set like:

TargetControlId="The Id Of Control on which we have to show Hover Menu when mouse over on it".

PopupControlId="The control id which we want show as a popup".

PopupPosition="Position where you want to show the popup on Target Control".

By setting these simple properties we can use the Hover Menu Extender Control in our ASP.Net web page. Next we will see how to use this Hover Menu extender in GridView. So let's start it step by step.

Step 1:

Keep one GridView on your ASP.Net page and create your own columns instead of autogenerated columns like below. In this case we are using the article title and description to show in the hover menu popup control.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<asp:Label ID="lbltitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label>
<cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" TargetControlID="lbltitle" PopupControlID="Panel2" PopupPosition="Right">
</cc1:HoverMenuExtender>
<asp:Panel ID="Panel2" runat="server" style="visibility:hidden">
<asp:Label ID="lbldesc" runat="server" Text='<%#Eval("Desc") %>' BackColor="HotPink" ForeColor="White" Font-Bold="true" BorderStyle="Outset" BorderColor="Black" BorderWidth="2px"></asp:Label>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Author" DataField="Author" />
</Columns>
</asp:GridView>

In the above code we have created a GridView containing the two columns as article title and name of the author. For showing the title we used a label control and when the user moves the mouse over this title we have to show the description of the article so we keep one HoverMenuextender with TargetControlId to title label and popucontrolid to the panel in which we have one label to show the description text. You can set your own style to the panel which we used here inside the GridView to display the description.

Step 2:

Now in code behind bind your GridView from the database. Here I'm binding it by creating only a datatable object like below.

DataTable dt = new DataTable("Articles");
DataColumn dc1 = new DataColumn("Title", typeof(string));
DataColumn dc2 = new DataColumn("Author", typeof(string));
DataColumn dc3 = new DataColumn("Desc", typeof(string));
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
dt.Columns.Add(dc3);
DataRow dr1 = dt.NewRow();
dr1[0] = "Hover Menu Extender";
dr1[1] = "Krishna Garad";
dr1[2] = "In This article we will learn how to use Hoever Menu Extender control of ajax to desplay the description in asp.net.";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2[0] = "Tab Container in Asp.Net Ajax";
dr2[1] = "Krishna Garad";
dr2[2] = "In this article we will see how to use Ajax TabContainer in ASP.NET? As you all knows for creating tab in asp.net web application is something critical. For creating control like tab in our asp.net we can do it with using muliview control with various view but again same keeping some buttons to change the ActiveViewIndex of multiview control. This cause happens postback to server and for changing view only we have wait until page got load. ";
dt.Rows.Add(dr2);
GridView1.DataSource = dt;
GridView1.DataBind();

In gridview the code gridview we just bound the GridView. You can use your database table data also.

Step 3:

It's ready now you can run your application and see the result by moving your mouse over the title in the GridView. When you do that it will display the description of the article in a popup.

Conclusion

In this way for displaying large content we can use a hover menu extender of Ajax on ASP.Net web page.