Monday, September 05, 2011

AJAX Control Toolkit HoverMenu using C# ASP.NET

Posted by Rahul Kharde at 2:38 AM
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


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

YOUR ADSENSE CODE GOES HERE

0 comments:

Have any question? Feel Free To Post Below:

 

Popular Posts

Recent Comments

© 2011. All Rights Reserved | Help to understand .Net | Template by Blogger Widgets

Home | About | Top