» » » » Gridview Entire Row Hover in ASP.NET by using Custom CSS

Gridview Entire Row Hover in ASP.NET by using Custom CSS

Posted By : Sri Kanth

Asp.net Gridview Entire Row Hover in ASP.NET by using Custom CSS

Create Database 

 USE [master]
GO
/****** Object:  Table [dbo].[Book]    Script Date: 05/11/2015 15:04:27 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Book](
 [Book_Id] [nvarchar](5) NULL,
 [Book_name] [nvarchar](50) NULL,
 [Book_author] [nvarchar](30) NULL,
 [Book_Publisher_name] [nvarchar](50) NULL,
 [Book_Published_date] [nvarchar](30) NULL
) ON [PRIMARY]
GO
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'bk', N'sfjskj', N'jfdskfj', N'fjdksjfk', N'4/4/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'bk8', N'kk', N'kk', N'kk', N'4/8/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk1', N'ASP.NET', N'Krishna', N'MyHome Publisher', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk2', N'C#.NET', N'Arvind', N'James Street Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk3', N'SQL SERVER', N'James', N'Hi-Tech Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk4', N'JAVA', N'JAVA RAM', N'MyHome Publisher', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk5', N'HTML', N'HTML Raghu', N'James Street Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk6', N'CSS', N'CSS Chandra', N'Hi-Tech Publishers', N'3/30/2015 12:00:00 AM')
INSERT [dbo].[Book] ([Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]) VALUES (N'Bk7', N'JAVASCRIPT', N'JAVA RAM', N'MyHome Publishers', N'3/30/2015 12:00:00 AM')

CSS Code 

 <style type="text/css">
     #GridView1
      {
         background:#fafafa;               
      }
     #GridView1 .HeaderStyle
      {
        background:#0066cc;   
        color:#ffffff;
        padding:7px 10px 7px 10px;
      }
     #GridView1 th
      {
         padding:10px 15px 10px 15px;
      }
     #GridView1 td
      {
         padding:5px 10px 5px 10px;
         text-align:left;
      }    
     #GridView1 td:hover
     {
         background:#6699cc;
         color:#ffffff;         
         padding:5px 10px 5px 10px;
         text-align:left;
     }  
    </style>

HTML Markup : Add Gridview to ASP.NET Page

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.Gridviews.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<!--- ADD CSS Code Here ---->

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" HeaderStyle-CssClass="HeaderStyle"
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="Book_Id" HeaderText="Book ID" 
                    SortExpression="Book_Id" />
                <asp:BoundField DataField="Book_name" HeaderText="Book Name" 
                    SortExpression="Book_name" />
                <asp:BoundField DataField="Book_author" HeaderText="Book Author" 
                    SortExpression="Book_author" />
                <asp:BoundField DataField="Book_Publisher_name" 
                    HeaderText="Book Publisher Name" SortExpression="Book_Publisher_name" />
                <asp:BoundField DataField="Book_Published_date" 
                    HeaderText="Book Published Date" SortExpression="Book_Published_date" />
            </Columns> 
                     
        </asp:GridView>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"         
        SelectCommand="SELECT [Book_Id], [Book_name], [Book_author], [Book_Publisher_name], [Book_Published_date]  FROM [Book]"></asp:SqlDataSource>
    </form>
</body>
</html>
0 Komentar untuk "Gridview Entire Row Hover in ASP.NET by using Custom CSS"

Back To Top