GridView hover menu using jQuery

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