connectseekers.com

Tuesday, 17 June 2014

Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net

6/17/2014 - By Pranav Singh 1

It looks really cool to highlight the gridview row on mouse over. This help users to know he is on which row. So in this article I will show you how you can highlight gridview Row on mouseover using css\css3 in asp.net using c#.Net.


So for this article first we will create a new asp.net application. In this article there are two things which responsible for highlighting he row are css and c# code for assigning the style sheet to rows.

Style Sheet
<style type="text/css">
        .normalrow
        {
            background-color: white;
        }
        .onmouseoverrow
        {
            background-color: gray;
        }
    </style>

C#.Net
/// <summary>
        /// For hilighted and normal row
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'");
                e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
            }
        }

VB.Net
''' <summary>
''' For hilighted and normal row
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'")
        e.Row.Attributes.Add("onmouseout", "this.className='normalrow'")
    End If
End Sub

In above code e have assign the class onmouseover and onmouseout event. Now here is the completer code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default" %>

<!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">
    <title>Highlight GridView Row on Mouseover Using CSS in Asp.Net</title>
    <style type="text/css">
        .normalrow
        {
            background-color: white;
        }
        .onmouseoverrow
        {
            background-color: gray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server"> 
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
                BorderStyle="Solid" onrowcreated="GridView1_RowCreated">
                <Columns>
                    <asp:BoundField DataField="author_name" HeaderText="NAME" />
                    <asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME" />
                    <asp:BoundField DataField="publication_year" HeaderText="PUBLISH YEAR" />
                    <asp:BoundField DataField="retail_price" HeaderText="PRICE" />
                </Columns>
                <HeaderStyle BackColor="#66CCFF" />
            </asp:GridView>
    </form>
</body>
</html>

C#.Net code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
namespace ProjectDemo_Asp.et
{
    public partial class Default : System.Web.UI.Page
    {
        public string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable _objdt = new DataTable();
            _objdt = GetDataFromDataBase();
            if (_objdt.Rows.Count > 0)
            {
                GridView1.DataSource = _objdt;
                GridView1.DataBind();
            }
        }

        /// <summary>
        /// Function for binding retrieving the data from database
        /// </summary>
        /// <returns></returns>
        public DataTable GetDataFromDataBase()
        {
            DataTable _objdt = new DataTable();
            string querystring = "select * from Books;";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            return _objdt;
        }
        /// <summary>
        /// For hilighted and normal row
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.className='onmouseoverrow'");
                e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
            }
        }
    }
}

Now we will run the page to see the output.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

1 comment:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top