Gridview Row Mouseover Show Detail Data in Floating Div C# jQuery


[ads] Gridview mouseover show more data: This article explains how to show detail information ( data ) of the respected grid view row on mouseover. i.e In C# Web form when user hover mouse on Gridview row we display or show respected data in pop up div container to the user. You can also check my previous article on Gridview i.e Gridview row color change based on data c# , How to bind drop-down list inside grid view edit template , Reorder Gridview JQuery : Drag Drop reorder of GridView Rows.

Why On Gridview row mouseover show detail data? Gridview control displays the values of a data source in a table where each column represents a field and each row represents a record. While working on project as a developer we are often said to show some column of Gridview and not all .i.e. some client requirement where we have to show some specific column inside Gridview control and rest of details information will get display on mouseover inside a floating div whenever user moves mouse over Gridview rows. So showing more detail on row mouseover is basically a good idea and better user interface. Screenshot:   [caption id="attachment_2695" align="aligncenter" width="510"]Gridview row mouseover show detail data in floating div c# jQuery Gridview row mouseover show detail data in floating div c# [More data][/caption] 

# Html Markup:

First we add a Gridview control and a div content holder which will show detail data on row mouseover. Here we have 7 columns (Name, Department Name, PhoneNo, City, Country, Gender, Email Id). But in our Gridview control we will show only 3 columns (Name, DepartmentName, PhoneNo) on `page load`,  and the rest will show whenever user move  the mouse over Gridview rows.
    <asp:GridView ID="gv_MouseOverData" runat="server" RowStyle-CssClass="row_dd" HeaderStyle-CssClass="header_dd" AutoGenerateColumns="False">
            <asp:BoundField DataField="user_name" HeaderText="Name" />
            <asp:BoundField DataField="department_name" HeaderText="Department" />
            <asp:BoundField DataField="phone_no" HeaderText="Phone No" />
            <asp:TemplateField HeaderStyle-CssClass="hideIT">
                <HeaderStyle CssClass="hideIT"></HeaderStyle>
                <ItemStyle CssClass="hideIT" />
                    <div class="dataDiv" data-name="<%# Eval(" user_name ") %>" data-city="<%# Eval(" city ") %>" data-country="<%# Eval(" country ") %>" data-gender="<%# Eval(" gender ") %>" data-email="<%# Eval(" email_id ") %>"></div>
In the above code, you may notice their a div under template field which have `html5 data-*` attribute. What we are doing is we are assigning our data table column with respected data-* attribute, which used later to fetch data and show data on mouseover. Now we add our Div content holder where detailed data get append and displayed HTML markup as written below.
<div id="detailedData" style="display: none;">
        <dt>Name: </dt> <dd id="dd_name"></dd> 
        <dt>Country: </dt><dd id="dd_country">
        </dd> <dt>City: </dt><dd id="dd_city"></dd> 
        <dt>Gender: </dt> <dd id="dd_gender"></dd> 
        <dt>Email:</dt><dd id="dd_email"></dd>

# CSS:

 dl {
     margin: 0;
     padding: 0;
 #detailedData {
     background-color: #f1f1f1;
     border: 1px solid #d4d4d4;
     border-radius: 3px;
     position: absolute;
     width: 250px;
     box-shadow: 8px 8px 5px #888888;
 dl dt {
     color: #333;
     float: left;
     font-weight: bold;
     margin-left: 10px;
     margin-right: 2px;
     padding: 5px;
     width: 66px;
 dl dd {
     margin: 2px 0;
     padding: 5px 0;
 .hideIT {
     display: none;
 .row_dd:hover {
     background-color: #eee !important;
     color: #333;
 .header_dd {
     background-color: #6b696b;
     color: White;
     font-weight: bold;
 td, th {
     padding: 4px;
# Code Behind: Bind Gridview control with datatable  .i.e populate our Gridview control.
 protected void Page_Load(object sender, EventArgs e)
    if (!Page.IsPostBack)
    public void bindGridview_mouse_over_detailedData()
        // Created a new datatable
        DataTable dt = new DataTable();

        // Added columns to thedatatable
        dt.Columns.Add("user_name", typeof(string));
        dt.Columns.Add("department_name", typeof(string));
        dt.Columns.Add("phone_no", typeof(string));
        dt.Columns.Add("gender", typeof(string));
        dt.Columns.Add("email_id", typeof(string));
        dt.Columns.Add("city", typeof(string));
        dt.Columns.Add("country", typeof(string));

        // Add rows (data) to the datatable
        dt.Rows.Add("John", "Technical", "0099890XX", "Male", "", "New York", "USA");
        dt.Rows.Add("Leslie", "Management", "00447993XXX", "Female", "", "Qweenzland", "Australia");
        dt.Rows.Add("David", "Testing", "0782890XX", "Male", "", "Texas", "USA");
        dt.Rows.Add("Amit", "IT", "0562890XX", "Male", "", "Mumbai", "India");
        dt.Rows.Add("Satinder", "IT", "055720XX", "Male", "", "Mumbai", "India");
        dt.Rows.Add("Andrea", "Server", "0077993XXX", "Female", "", "Santa Paulo", "Brazil");

        gv_MouseOverData.DataSource = dt;
Now we are done with Gridview bind, which shows 3 column as shown in below fig. gridview row mouseover show detail data c#  

# Using jQuery to show detail data on Gridview row mouseover.

 $(".row_dd").on("mouseenter", function (e) {
     var self = $(this).find(".dataDiv");
     var name = self.attr("data-name");
     var city = self.attr("data-city");
     var country = self.attr("data-country");
     var email = self.attr("data-email");
     var gender = self.attr("data-gender");


     var x_value = e.pageX;
     var y_value = e.pageY;
         "top": y_value,
             "left": x_value

 $(".row_dd").on("mouseleave", function (e) {
Note: `row_dd` class is added to each tr on Gridview and `detailedData` is the id of our div content holder.   Bonus: We are going to change our content div’s position ( top, left ) which adds a floating effect to it.
$(".row_dd").on("mousemove", function (e) {
    var x_value = e.pageX;
    var y_value = e.pageY;
        "top": y_value,
            "left": x_value

OutPut :Gridview row mouseover show detail data in floating div c# jQuery   You can also check these articles:
  1. Import Excel Sheet Data to Gridview C#.
  2. How to Add / Update record using GridView control (c#).
  3. Gridview Sort: On header Click sort rows by asec/desc.
  4. Enable/ Disable Gridview checkbox based on condition  in
  5. Gridview row mouseover show more detail in floating div C# jQuery.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *


  1. jozo bubnjar 06/29/2015 18:11:09
    why using jquery at all, when all this can be done in pure javascript without loading jquery file of 20,30,40kB... many beginners see example for jquery, and then they use him just for some simple thing, it's so sad.
  2. Charles 11/23/2016 02:37:59
    I'm trying to follow this article but do not understand where to put the detailedData" div so could not get the sample to work. I tried putting it under under (not a child of) the div in the ItemTemplate. Where is the "detailedData" div supposed to go?"
  3. Satinder singh 12/18/2016 18:10:15
    Hello Charles, Here detailedData div is added outside the Gridview, and not inside gridview control .i.e( added below the Gridview closing tag). The purpose of adding div outside is we able to display gridview details in floatable manner.
  4. Ghulam Ali 05/16/2017 07:12:55
    I just want to know how we can put template field of gridview in detailedData and show it on hover??