Introduction: In this article I
am going to explain how to show GridView row details from database in tooltip
on mouse over the GridView cell/column using twitter bootstrap in Asp.Net using
both C#, VB. Similar to GridView, it can be used on other databound controls like
Repeater, DataList etc.
In previous artcles i explained How to Show animated bootstrap alert messages in asp.net and Maintain bootstrap selected tab on postback in asp.net inside ajax updatepanel and Show tool tip message using CSS in asp.net and CSS to change background and border color of textbox on mouse hover
Note: Please read the Basics of bootstrap tooltip for Asp.Net to better understand the concept.
Here in this example I have displayed employee
name and age in GridView columns and Employee code and gender in tooltip on
mouse over the employee name. So tooltip
helps to describe something or to show more details on mouse over the text.
Implementation: Let’s create a web page from demonstration purpose:
HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script
type="text/javascript">
//Initialize tooltip
with jQuery
$(document).ready(function
() {
$('.tooltips').tooltip();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:
100px">
<asp:GridView
ID="grdEmployeeDetails" runat="server" Width="100%" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="50px">
<ItemTemplate>
<span style="margin-left:5px"></span><%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmployeeName">
<ItemTemplate>
<asp:Label ID="lblEmpName" runat="server" Text='<%#Eval("EmployeeName") %>' CssClass="tooltips" data-placement="right" data-html="true" title='<%# string.Format("Employee
Code:<i>{0}</i> </br> Gender: <i>{1}</i>", Eval("EmployeeCode"), Eval("Gender")) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<ItemTemplate>
<%#Eval("Age") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle
BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle
BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle
BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle
BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
</form>
</body>
</html>
Asp.Net C# Code to bind data in gridview using datatable
using System.Data;
Protected Sub Page_Load(sender As Object,
e As EventArgs)
Handles
Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
Protected Sub BindGridview()
Dim dt As New DataTable()
'Add Columns to
datatable
dt.Columns.Add("EmployeeId", GetType(Int32))
dt.Columns.Add("EmployeeName", GetType(String))
dt.Columns.Add("EmployeeCode", GetType(String))
dt.Columns.Add("Gender", GetType(Char))
dt.Columns.Add("Age", GetType(Integer))
'Adding rows and
data
dt.Rows.Add(1, "Ajay", "EMP0001", 'M', 22)
dt.Rows.Add(2, "Irfan", "
EMP0002", 'M', 25)
dt.Rows.Add(3, "Sonia", "
EMP0003", 'F', 23)
dt.Rows.Add(4, "Ranbir", "
EMP0004", 'M', 22)
dt.Rows.Add(5, "Sonam", "
EMP0005", 'F', 28)
dt.Rows.Add(6, "Harleen", " EMP0006", 'F', 26)
dt.Rows.Add(7, "Akshay", "
EMP0007", 'M', 28)
'Bind datatable to
gridview
grdEmployeeDetails.DataSource = dt
grdEmployeeDetails.DataBind()
End Sub
Note: I have generated datatable at runtime with the columns and rows
with sample data. In actual case data will come from database.
Asp.Net VB Code to bind data in gridview using datatable
Imports System.Data
Protected Sub Page_Load(sender As Object,
e As EventArgs)
Handles
Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
Protected Sub BindGridview()
Dim dt As New DataTable()
'Add Columns to
datatable
dt.Columns.Add("EmployeeId", GetType(Int32))
dt.Columns.Add("EmployeeName", GetType(String))
dt.Columns.Add("EmployeeCode", GetType(String))
dt.Columns.Add("Gender", GetType(Char))
dt.Columns.Add("Age", GetType(Integer))
'Adding rows and
data
dt.Rows.Add(1, "Ajay", "EMP0001", 'M', 22)
dt.Rows.Add(2, "Irfan", "
EMP0002", 'M', 25)
dt.Rows.Add(3, "Sonia", "
EMP0003", 'F', 23)
dt.Rows.Add(4, "Ranbir", "
EMP0004", 'M', 22)
dt.Rows.Add(5, "Sonam", "
EMP0005", 'F', 28)
dt.Rows.Add(6, "Harleen", "
EMP0006", 'F', 26)
dt.Rows.Add(7, "Akshay", "
EMP0007", 'M', 28)
'Bind datatable to
gridview
grdEmployeeDetails.DataSource = dt
grdEmployeeDetails.DataBind()
End Sub
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..