In this article I will explain how to show GridView
row details on mouseover with jQuery using asp.net in C#.NET.
Or
Or
In my previous article I explained how
to show confirmation message box in GridView RowDataBound event ,how
to insert EmptyDataRow data in GridView , how
to insert a record in GridView, how
to Update a record in GridView, how
to Delete a record in GridView, , how
to insert, update, Delete in gridview , Upload
Images in gridview , Upload
files & Download in gridview and highlight
gridview rows.
Output: On mouseover on 3rd record
In this scenario we write code for on mouseover
event code in JQuery. Below is the sample code of JQuery on mouseover event.
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
InitializeToolTip();
})
function
InitializeToolTip() {
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return
$($(this).next().html());
},
showURL: false
});
}
</script>
Total code:
First we need to
establish a connection in Web.config file.
<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial
Catalog=practice"/>
</connectionStrings>
Below is the page
design.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show GridView row details on mouseover with jQuery using asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
InitializeToolTip();
})
function
InitializeToolTip() {
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return
$($(this).next().html());
},
showURL: false
});
}
</script>
<style type="text/css">
#tooltip {
position: absolute;
z-index: 4000;
border: 1px solid #111;
background-color: maroon;
padding: 5px;
opacity: 1;
}
#tooltip h3, #tooltip div {
margin: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<td style="color: maroon; font-size: large;">
<b><u>Show GridView row details on mouseover
with jQuery using asp.net</u></b>
</td>
</tr>
<tr>
<td height="20px"></td>
</tr>
<tr>
<td>
<asp:GridView runat="server" ID="gvOnMouseOver" AutoGenerateColumns="false" ShowHeader="true">
<Columns>
<asp:TemplateField HeaderText="SL NO.">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip"><%# Eval("ID")%></a>
<div id="tooltip" style="display: none;">
<table style="color:white;">
<tr>
<td style="white-space: nowrap;"><b>CountryName:</b> </td>
<td><%# Eval("CountryName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>StateName:</b> </td>
<td><%# Eval("StateName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>CityName:</b> </td>
<td><%# Eval("CityName")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country Name">
<ItemTemplate>
<asp:Label ID='lblCountryName' runat="Server" Text='<%# Eval("CountryName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="State Name">
<ItemTemplate>
<asp:Label ID='lblStateName' runat="Server" Text='<%# Eval("StateName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City Name">
<ItemTemplate>
<asp:Label ID='lblCityName' runat="Server" Text='<%# Eval("CityName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>
</html>
We need to added jQuery plugin and tooltip plugin by using those files we can display GridView
row details in tooltip using JQuery plugin. Click the below download link for
plugin.
Below is the code
for Bind data to GridView.
using
System;
using
System.Configuration;
using
System.Data;
using
System.Data.SqlClient;
public partial class OnMouseOverEventInGridView : System.Web.UI.Page
{
SqlConnection conCascading = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
}
}
protected void BindGridView()
{
conCascading.Open();
SqlCommand
cmdCountry = new SqlCommand("select * from tblCascading", conCascading);
SqlDataAdapter daCountry = new SqlDataAdapter(cmdCountry);
DataSet
dsCountry = new DataSet();
daCountry.Fill(dsCountry);
conCascading.Close();
gvOnMouseOver.DataSource = dsCountry;
gvOnMouseOver.DataBind();
}
}
No comments:
Post a Comment