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

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 Asp.net 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 asp.net c# , How to bind drop-down list inside grid view edit template , Reorder Gridview Asp.net JQuery : Drag Drop reorder of GridView Rows.

---

Why On Gridview row mouseover show detail data?

Asp.net 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:

 

 

---

# 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 Asp.net 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.

<div>
    <asp:GridView ID="gv_MouseOverData" runat="server" RowStyle-CssClass="row_dd" HeaderStyle-CssClass="header_dd" AutoGenerateColumns="False">
        <Columns>
            <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" />
                <ItemTemplate>
                    <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>
                </ItemTemplate>
            </asp:TemplateField>

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;">
    <dl> 
        <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>
    </dl>
</div>

---

# 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)
     {
        bindGridview_mouse_over_detailedData();
     }
  }
    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", "john@abc.com", "New York", "USA");
        dt.Rows.Add("Leslie", "Management", "00447993XXX", "Female", "leslie@abc.com", "Qweenzland", "Australia");
        dt.Rows.Add("David", "Testing", "0782890XX", "Male", "david@abc.com", "Texas", "USA");
        dt.Rows.Add("Amit", "IT", "0562890XX", "Male", "amit@abc.com", "Mumbai", "India");
        dt.Rows.Add("Satinder", "IT", "055720XX", "Male", "satinder@abc.com", "Mumbai", "India");
        dt.Rows.Add("Andrea", "Server", "0077993XXX", "Female", "andrea@abc.com", "Santa Paulo", "Brazil");

        gv_MouseOverData.DataSource = dt;
        gv_MouseOverData.DataBind();
    }

Now we are done with Gridview bind, which shows 3 column as shown in below fig.

 

---

# 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");

     $("#dd_name").html(name)
     $("#dd_country").html(country);
     $("#dd_city").html(city);
     $("#dd_gender").html(gender);
     $("#dd_email").html(email);

     var x_value = e.pageX;
     var y_value = e.pageY;
     $("#detailedData").css({
         "top": y_value,
             "left": x_value
     }).show();
 });

 $(".row_dd").on("mouseleave", function (e) {
     $("#detailedData").hide();
 });

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;
    $("#detailedData").css({
        "top": y_value,
            "left": x_value
    });
});

---

OutPut :

 

You can also check these articles:

1. Import Excel Sheet Data to Gridview Asp.net 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 Asp.net.
5. Gridview row mouseover show more detail in floating div Asp.net 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!