Gridview Row Mouseover Show Detail Data in Floating Div 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 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.



Gridview row mouseover show detail data in floating div c# jQuery
Gridview row mouseover show detail data in floating div 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 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.

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.

# CSS:

# Code Behind: Bind Gridview control with datatable  .i.e populate our Gridview control.

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.

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.

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!


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

    • 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 🙂