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:

 

Gridview row mouseover show detail data in floating div Asp.net c# jQuery

Gridview row mouseover show detail data in floating div Asp.net c# [More data]

 


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

gridview row mouseover show detail data asp.net 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");

     $("#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 :Gridview row mouseover show detail data in floating div Asp.net c# jQuery

 

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!

Sharing is Sexy:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }


4 comments on “Gridview Row Mouseover Show Detail Data in Floating Div Asp.net C# jQuery”

  1. Charles

    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?

    • Satinder singh

      Hello Charles,
      Here detailedData div is added outside the Gridview, and not inside asp.net 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.

  2. jozo bubnjar

    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.

    • Satinder singh

      why using jQuery? Good question and the answer is jQuery means “Write Less, Do More”. In javascript you can do same, but for that you have to write more lines of code (which I always avoid ). Secondly jQuery library is so popular and as far as I concerned in every web application jQuery library is added already so there is nothing to be sad if one uses jQuery 🙂


Post Comment


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