GridView hover menu using jQuery
Introduction
This article is about how to show a menu in a grid on each row hover and specify the action in the menu.Background
This article is helpful when you have a large number of columns in the grid and you have no space to place the hyperlink columns in the grid.Sample image:
Using the code
Create a database with the name "test2" in MS SQL Server://Create the following Table in database "test2"
CREATE TABLE [dbo].[Employee]( [EmployeeID] [int] IDENTITY(1,1), [EmpName] [varchar](50) , [FName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [isResigned] [bit] NULL CONSTRAINT [DF_Employee_isResigned] DEFAULT ((0))
)
Add the following code to page.aspx: <head >
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<link href="css/custom-theme/jquery-ui-1.10.1.custom.min.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
#mymenu
{
background-color:#8bb8cf;
border-radius: 8px;
display:none; z-index:100; position:absolute;
margin-top:-5px;
}
#mymenu ul
{
list-style:none;
background:#8bb8cf;
text-align:right;
color:#636362;
padding:0;
margin:5px;
font-weight:bold;
}
#mymenu ul li
{
background:#8bb8cf;
text-align:left;
color:#636362;
font-size:12px;
text-decoration:none;
margin:5px;
font-weight:bold;
}
#mymenu ul li a
{
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
#mymenu ul li a:hover
{
text-decoration:underline;
}
</style>
<script language="javascript" >
$(document).ready(function () {
$('.lbl').hover(function () { $(this).next('.hmenu').show(); },
function () { $(this).next('.hmenu').hide(); });
$('.hmenu').mouseenter(function () { $(this).show(); });
$('.hmenu').mouseleave(function () { $(this).hide(); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:800px; margin:0 auto;">
<div class="ui-widget-header ui-corner-top"
style="height:30px; width:798px; text-align:center; line-height:2em;">
<asp:Label ID="Label2" runat="server"
Text="Employee Information" CssClass="ui-button-text"></asp:Label>
</div>
<asp:GridView ID="GridView1" Width="100%" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Employee ID">
<ItemTemplate>
<asp:Label ID="lblEmployeeID"
style="cursor:hand; text-decoration:underline; cursor:pointer;"
CssClass="lbl" runat="server"
Text='<%# Bind("EmployeeID") %>'></asp:Label>
<div id="mymenu" class="hmenu" >
<ul>
<li><a href='<%#String.Format("frmEditEmployee.aspx?EmployeeID={0}",
Eval("EmployeeID").ToString()) %>'>Edit Employee Info</a></li>
<li><a href="#">Promot</a></li>
<li><asp:HyperLink Enabled='<%#Eval("isResigned").ToString()==
"False"?true:false %>' NavigateUrl='<%#String.Format(
"frmDismiss.aspx?SchoolID={0}",Eval("EmployeeID").ToString()) %>'
ID="HyperLink2" ForeColor='<%#Eval("isResigned").ToString()==
"False"?System.Drawing.Color.White:System.Drawing.Color.Red%>' style="cursor:hand;
cursor:pointer" runat="server">Dismiss</asp:HyperLink></li>
</ul>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmpName" HeaderText="Employee Name" />
<asp:BoundField DataField="FName" HeaderText="Father Name" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
Add the following code to page.aspx.cs:
SqlConnection con = new SqlConnection( "Data Source=(local);Initial Catalog=test2;Integrated Security=SSPI"); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { SqlDataAdapter da = new SqlDataAdapter("select * from Employee", con); DataTable dt = new DataTable(); da.Fill(dt); GridView1.DataSource = dt; GridView1.DataBind(); } }
Post a Comment
Post a Comment