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; }
[ads_468_60]
# 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
});
});
You can also check these articles:
- Import Excel Sheet Data to Gridview Asp.net C#.
- How to Add / Update record using GridView control (c#).
- Gridview Sort: On header Click sort rows by asec/desc.
- Enable/ Disable Gridview checkbox based on condition in Asp.net.
- 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!
5 comments on “Gridview Row Mouseover Show Detail Data in Floating Div Asp.net C# jQuery”
I just want to know how we can put template field of gridview in detailedData and show it on hover??
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?
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.
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 🙂