Skip to main content

AJAX Control Toolkit HoverMenu using C# ASP.NET

ASP.NET AJAX Controls Toolkit provides many useful controls to ASP.NET developers to build modern rich internet applications. One such control is HoverMenu control that enables you to attach popup menu with any ASP.NET control.

I have created a new page which has a ScriptManager control on the top. This control is required every time you want to use any ASP.NET AJAX feature or control on you website.

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

Register the AJAX Control tool kit

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

Add HoverMenu control with setting the basic properties, 

<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="popupImage" TargetControlID="Image1" OffsetX="10" OffsetY="15" PopupPosition="Right" PopDelay="100">
</ajaxToolkit:HoverMenuExtender>

TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.

PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links:

PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control.

OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target,

Finally I added a Panel control that will be used as a popup window by the HoverMenu control. This Panel can display any type of contents. Here it shows the Student details like it’s ID, Name, Address and images.

<asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7" BorderStyle="Solid"
    BorderWidth="1px" Width="250px" BackColor="White">
    <div style="float: left; width: 100%;">
        <div style="float: left; width: 100%; text-align: center; background-color: #CCCCCC">
            <b>Student Detailsb>div>
                <div style="float: left; width: 100%;">
                    <div style="float: left; width: 58%;">
                        <div style="float: left; width: 100%;">
                            <b>ID :b><%#Eval("Id") %>
                                <br />
                                <br />
                                <b>Name:b><%#Eval("Name") %>
                                    <br />
                                    <br />
                                    <b>Address:b><%#Eval("Address") %>
                        </div>
                    </div>
                    <div style="float: right; width: 38%;">
                        <asp:Image runat="server" ID="Image2" ImageUrl="~/images/Student.png" />
                        < /div>
                    </div>
                </div>
        </div>
    </div>
</asp:Panel>

Code behind 

We are creating a run time Dataset which contain the student table with column ID, Name, Address and Insert some record in it. 

private void LoadData()
        {
            DataSet ds = new DataSet();
            ds.Tables.Add("Student");
            ds.Tables[0].Columns.Add("ID");
            ds.Tables[0].Columns.Add("Name");
            ds.Tables[0].Columns.Add("Address");
            DataRow dr = ds.Tables[0].NewRow();
            dr["Id"] = "1";
            dr["Name"] = "Vinod Kapoor";
            dr["Address"] = "Mumbai";
            ds.Tables[0].Rows.Add(dr);
            DataRow dr1 = ds.Tables[0].NewRow();
            dr1["Id"] = "2";
            dr1["Name"] = "Shalini Shah";
            dr1["Address"] = "Delhi";
            _Objds.Tables[0].Rows.Add(dr1);
            DataRow dr2 = ds.Tables[0].NewRow();
            dr2["Id"] = "3";
            dr2["Name"] = "Prakash Khanna";
            dr2["Address"] = "Mumbai";
            ds.Tables[0].Rows.Add(dr2);
            DataRow dr3 = ds.Tables[0].NewRow();
            dr3["Id"] = "4";
            dr3["Name"] = "Priyanka Jha";
            dr3["Address"] = "Chennai";
            ds.Tables[0].Rows.Add(dr3);
            DataRow dr4 = ds.Tables[0].NewRow();
            dr4["Id"] = "5";
            dr4["Name"] = "Sunil Gaur";
            dr4["Address"] = "Kolkata";
            ds.Tables[0].Rows.Add(dr4);
            GridView1.DataSource = ds.Tables[0];
            GridView1.DataBind();
        }

Screen Shot: 

Take the mouse cursor on the edit image of the student table then It will show the Student details as below.

Download
Click Here
Labels:

Comments

Post a Comment

Popular posts from this blog

HTTPHandler and HTTPModule in ASP.NET

If you want to implement pre-processing logic before a request hits the IIS resources. For instance you would like to apply security mechanism, URL rewriting, filter something in the request, etc. ASP.NET has provided two types of interception HttpModule and HttpHandler .   The web server examines the file name extension of the requested file, and determines which ISAPI extension should handle the request. Then the request is passed to the appropriate ISAPI extension.  For Example When an .aspx page is requested it is passed to ASP.Net page handler. Then Application domain is created and after that different ASP.Net objects like Httpcontext, HttpRequest, HttpResponse. HTTPModule: -    It's just like a filter. The Modules are called before and after the handler executes . -    HTTP Modules are objects which also participate the pipeline but they work before and after the HTTP Handler does its job, and produce additional serv...
124 comments
Read more

Connected and disconnected architecture in ADO.Net with Example

Connected Architecture of ADO.NET The architecture of ADO.net, in which connection must be opened to access the data retrieved from database is called as connected architecture. Connected architecture was built on the classes connection, command, datareader and transaction.  Connected architecture is when you constantly make trips to the database for any CRUD (Create, Read, Update and Delete) operation you wish to do. This creates more traffic to the database but is normally much faster as you should be doing smaller transactions. Disconnected Architecture in ADO.NET The architecture of ADO.net in which data retrieved from database can be accessed even when connection to database was closed is called as disconnected architecture. Disconnected architecture of ADO.net was built on classes connection, dataadapter, commandbuilder and dataset and dataview. Disconnected architecture is a method of retrieving a r...
39 comments
Read more

Using SQL self join Find Upper level manager in Employee table

A self-join is a query in which a table is joined (compared) to itself. Self-joins are used to compare values in a column with other values in the same column in the same table . You can use a self-join to simplify nested SQL queries where the inner and outer queries reference the same table . These joins allow you to retrieve related records from the same table. The most common case where you'd use a self-join is when you have a table that references itself I have the employee detail table, In that i want to find the manager for each Employee . The employee nam e and manager column are present in same table Consider the following Employee table CREATE TABLE Employee (     Emp_Id INT IDENTITY ( 1 , 1 ) NOT NULL PRIMARY KEY ,     Emp_Name VARCHAR ( 100 ),     Manager_Id INT NULL ) INSERT INTO Employee ( Emp_Name , Manager_Id ) VALUES ( 'a' ,null) INSERT INTO Employee ( Emp_Name , Manager_Id ) ...
2 comments
Read more