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
Comments
Post a Comment