Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Category > ASP.NET || Published on : Monday, February 15, 2016 || Views: 12653 || Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Introduction

Here Pawan Kumar will explain how to Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Description

In previous post I have explained Add TextBox Dynamically ASP.Net on Click ASP.Net Button, Mask UnMask Input Text jQuery Html, JavaScript Alert Message Dialog Box, Save data to database without postback using jQuery ajax in ASP.NET, How to set focus on first textbox of the page, Assign datepicker to runtime/dynamic textboxes in ASP.NET using jQuery, and many more articles.

Now I will explain How to Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

So follow the steps to learn Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Definations:-
1. GridView: Displays the values of a data source in a table where each column represents a field and each row represents a record. The GridView control enables you to select, sort, and edit these items.

Source: MicroSoft MSDN Website

The GridView control is the successor to the DataGrid and extends it in a number of ways. With this GridView control, you could display an entire collection of data, easily add sorting and paging, and perform inline editing. In addition to just displaying data, the GridView can be used to edit and delete the displayed data as well.

The GridView comes with a pair of complementary view controls: DetailsView and FormView. By combining these controls, you can easily set up master-detail views using very little code and sometimes no code at all. From the following chapters you can see some important operations in ASP.NET GridView control.

Source: http://asp.net-informations.com/gridview/asp-gridview.htm

2. Bootstrap Tooltip:-

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.

Source: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Step 1: Create a new website using Visual Studio 2010.

Step 2: Add a new webform and name it default.aspx.

Step 3: Add the following code to the aspx webpage

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<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 class="container">
            <div class="row">
                <div class="col-md-12">
                    <div style="width: 400px; margin-left: 200px;margin-top:20px;">
                        <asp:GridView ID="grdStudentDetails" runat="server" Width="100%" AutoGenerateColumns="False" CellPadding="2" ForeColor="Black" GridLines="None" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px">
                            <AlternatingRowStyle BackColor="PaleGoldenrod" />
                            <Columns>
                                <asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="50px">
                                    <ItemTemplate>
                                        <span style="margin-left: 5px"></span><%# Container.DataItemIndex + 1 %>
                                    </ItemTemplate>
 
<HeaderStyle Width="50px"></HeaderStyle>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Student Name">
                                    <ItemTemplate>
                                        <asp:Label ID="lblEmpName" runat="server" Text='<%#Eval("StudentName") %>' CssClass="tooltips" data-placement="right" data-html="true" title='<%# string.Format("Student Code:<i>{0}</i> </br> Gender: <i>{1}</i>", Eval("StudentCode"), Eval("Gender")) %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
 
                                <asp:TemplateField HeaderText="Age">
                                    <ItemTemplate>
                                        <%#Eval("Age") %>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <FooterStyle BackColor="Tan" />
                            <HeaderStyle BackColor="Tan" Font-Bold="True" />
                            <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                            <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                            <SortedAscendingCellStyle BackColor="#FAFAE7" />
                            <SortedAscendingHeaderStyle BackColor="#DAC09E" />
                            <SortedDescendingCellStyle BackColor="#E1DB9C" />
                            <SortedDescendingHeaderStyle BackColor="#C2A47B" />
                        </asp:GridView>
                    </div>
                </div>
 
            </div>
 
        </div>
 
    </form>
</body>
</html>

Step 4: Add the below code in Code Behind file.

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
 
    private void BindGridview()
    {
        DataTable dt = new DataTable();
 
        dt.Columns.Add("StudentId", typeof(Int32));
        dt.Columns.Add("StudentName", typeof(string));
        dt.Columns.Add("StudentCode", typeof(string));
        dt.Columns.Add("Gender", typeof(char));
        dt.Columns.Add("Age", typeof(int));
 
        dt.Rows.Add(1, "Rahul", "Stdu0001", 'M', 12);
        dt.Rows.Add(1, "Sanjay", "Stdu0001", 'M', 12);
        dt.Rows.Add(1, "Raja", "Stdu0001", 'M', 12);
        dt.Rows.Add(1, "Pawan", "Stdu0001", 'M', 12);
        dt.Rows.Add(1, "Suman", "Stdu0001", 'M', 12);
 
        grdStudentDetails.DataSource = dt;
        grdStudentDetails.DataBind();
    }
}

Output:-

Conclusion:

So, In this tutorial we have learned, Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Download Source Codes

.Net Articles/Snippets

Web Development Articles/Snippets

Database Articles/Snippets

Languages Articles/Snippets

Mobile Development Articles/Snippets

Others Articles/Snippets

Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell

Introduction

Description

Conclusion:

You might also like