Code Snip: Populating GridView Control Using ASP.NET and C# with Mouse-Over Effect
page 2 of 2
by ERIC ARTHER
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 34939/ 29

Step 2: Establishing a Database Connection Using SQL Server2005 Express Edition

[Download Sample]

You will have to set up a database connection using Server Explorer; it is located at the left side of the IDE above the ToolBox panel or can be accessed using Viewà Server Explorer menu.

6) Click on the Server Explorer panel, right-click on the Data Connections, and select Add Connection option.

7) A window pops up, and you have to select Microsoft SQL Server Database file and create a new database file called DB_MouseOver.mdf. Follow the instructions shown on the screen.

8) At this stage, you can select the default setting, and a SQL Database will be created for you by  VS2005.

9) Once it is created, you will notice the database and tables in the Server Explorer.

10) Right click on the table and create a new table called Table1 with the column names "id" and "name." Add some data to the table.

11) Add a stored procedure called dbo.StoredProcedure1 by right-clicking on the Stored Procedures tree on the Server Explorer.

11) Create the connection string as shown below in the web.config file.

<connectionStrings>
            <add
name="mouse_dbConnectionString" connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=C:\Inetpub\wwwroot\Mouse\mouse_db.mdf;Integrated
Security=True;Connect Timeout=30;User Instance=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>

Note: You should modify the path of the database file accordingly.

12) Drag and drop the GridView control from the toolbar.

13) The main mouse over effect takes place in the OnRowDataBound. See the ASP.NET code given below.

14) Run the application and move the mouse over the GridView control. You will notice the color change.

Code

Stored Procedure

Create PROCEDURE dbo.StoredProcedure1

AS

      select * from Table1

      RETURN

ASP.NET Code

<asp:GridView ID="GridView1"
runat="server"   
  OnRowDataBound="ItemDataBoundEventHandler1">
  <Columns>
    <asp:BoundField DataField="id"
HeaderText="id" SortExpression="id" />
    <asp:BoundField DataField="Name"
HeaderText="Name" SortExpression="Name"/>
  </Columns>
</asp:GridView>

C# Code Behind

protected void Page_Load(object sender, EventArgs
e)
{
  PopulateGrid();
}
 
public void PopulateGrid()
{
  DataSet objDs = new DataSet();
  System.Data.SqlClient.SqlConnection
myConnection = new
System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["mouse_dbConnectionString
"].ConnectionString);
  System.Data.SqlClient.SqlDataAdapter
myCommand;
  myCommand = new
System.Data.SqlClient.SqlDataAdapter("StoredProcedure1",
myConnection);
  myCommand.SelectCommand.CommandType =
CommandType.StoredProcedure;
  myConnection.Open();
  myCommand.Fill(objDs);
 
  GridView1.DataSource = objDs;
  GridView1.DataBind();
}
 
public void ItemDataBoundEventHandler1(object
sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    e.Row.Attributes.Add("onmouseover",
"this.style.backgroundColor='Silver'");
    e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor='#FFFBD6'");
  }
}

The final output will look like the figure shown below.

 


View Entire Article

User Comments

Title: asp.net with c#   
Name: Akin.v
Date: 2011-06-17 6:47:52 AM
Comment:
how to display particular column in gridview..
Title: gridview in asp.net with c#   
Name: saanj
Date: 2011-04-03 6:43:07 AM
Comment:
how to work with gridview
like edit, delete, update , select
Title: gridview in asp.net with c#   
Name: sandeep
Date: 2011-04-01 7:03:50 AM
Comment:
i want to know about gridview
Title: gridView   
Name: yalon
Date: 2011-03-28 10:47:45 AM
Comment:
thanks alot
how to add AlternativeRowStyle in runtime ?
Title: doubt   
Name: sravan
Date: 2010-12-10 4:30:56 AM
Comment:
how to refresh the parentpage with the values of childpage.. could u please help me. how to write the code for this..
Title: ttt   
Name: nnn
Date: 2010-11-25 9:36:30 AM
Comment:
good
Title: gridview   
Name: Manzur
Date: 2010-11-20 6:39:38 AM
Comment:
how to add the rows in the grid view on run time using asp.net with vb code and if in previous row data has enter that should not be blank when new row added
Title: gridview   
Name: priya
Date: 2010-10-06 10:41:38 AM
Comment:
i want to type query in textbox.. based on the query
i want to generate values in the gridview..

whether it is possible.. help me
Title: GridView   
Name: Trie
Date: 2010-08-30 12:59:20 AM
Comment:
i have a grid in which i am binding some rows of information.Before every row..i am putting check box.
When i check the check box for a particular row.and click the Button .That particular checked row from Grid-1 should be copied to another grid with in the Same page.
Title: Gridview   
Name: ramesh
Date: 2010-03-17 3:35:26 AM
Comment:
how to work with gridview like edit,delete,update,select
Title: Gridview   
Name: ramesh
Date: 2009-12-27 11:48:34 PM
Comment:
how to work with gridview
like edit, delete, update , select
Title: Gridview   
Name: Satyam
Date: 2009-11-30 12:38:51 AM
Comment:
Hi it is nice but how i can edit delete insert in gridview
Title: gridview   
Name: jit patel
Date: 2009-08-29 5:17:31 AM
Comment:
which way i can use gridview control with the use of C# code in .cs file in ASP.NET?
Title: grid view   
Name: sapna tiwari
Date: 2009-08-12 5:13:46 AM
Comment:
it is very nice , i will hep me a lot
Title: gridview   
Name: manindersingh
Date: 2009-08-09 7:52:54 AM
Comment:
how i can edit delete insert in gridview
Title: gridview   
Name: rampal
Date: 2009-07-19 5:22:45 AM
Comment:
gridview help show any data and like edit delte update
Title: Gridview   
Name: jayesh
Date: 2009-07-10 7:38:49 AM
Comment:
how to work with gridview
like edit, delete, update , select
Title: GridView Row Color Change On MouseOver   
Name: Shiv Ratan Kumar
Date: 2009-05-13 9:31:39 AM
Comment:
protected void gvNews_OnRowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Alternate)
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Black;");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='Brown;");
}
else
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Red';");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue;");
}
}
}
Title: help   
Name: jay
Date: 2009-05-01 5:36:48 AM
Comment:
great code thanks
Title: help   
Name: HK
Date: 2009-04-23 3:15:00 PM
Comment:
great code. thx
Title: help   
Name: Md jawaid
Date: 2009-03-26 8:51:18 AM
Comment:
This is very good way of guide
Title: Help   
Name: Pranjal Talele
Date: 2009-03-16 9:20:37 AM
Comment:
I want to make a help file in html. Please send me a step by step creation of help file.
Title: help   
Name: melbin
Date: 2009-03-02 12:03:56 AM
Comment:
c# code for gridview control
Title: USE GRIEDVIEW WITH USER CODING   
Name: YOGESH KATRE
Date: 2009-02-22 9:02:41 AM
Comment:
please tell me how we acess gridview data in some variable.supose any row data i want to store all field in some variable how it is possible to acess data of griedview.
Title: DatabaseConnectivity Doubt   
Name: Jay Trivedi
Date: 2009-02-17 5:53:42 AM
Comment:
Get Me Out of this hell, I m very new to this asp.net and more over i m using vb 2005 i dont know how to connect database with the controls in the application, can u please help me. the database backend is m.s.sql 2005 and Xp sp2 is my config. Plz Plz help meeeeee.
Title: Mouse over   
Name: Sandip
Date: 2009-02-14 2:25:48 AM
Comment:
How to Use mouse over in VB.Net???
Plz Send With Code
Title: Gridview   
Name: Jeeva.C
Date: 2009-01-27 12:43:02 AM
Comment:
I need code to change the color of grideview's particilar column text......
Is it possible to change the column color.....???
Title: gridview   
Name: Haritha
Date: 2008-12-18 2:37:25 AM
Comment:
how to work with gridview
like edit, delete, update , select
Title: gridview   
Name: ramesh
Date: 2008-12-15 5:51:41 AM
Comment:
pls help, how add the two values in gridviews...
Title: Doubt   
Name: shanthi
Date: 2008-10-06 9:26:20 AM
Comment:
Using Asp.Net with C#..
I'm Having GridView Control in which I'm getting Data from Database Table..
I'm having 4 columns in Gridview control.. (ie emp_ID,emp_name, designation,Active).. for [ emp_ID,emp_name, designation,Active ] i'm getting Data from database table.. &
now i am using CommandField ShowEditButton ="true" SelectText="Edit" UpdateText="Save" CancelText="Cancel Employee"

i am getting the databindig from datasource successfully but when i click on the edit button it let me edit the employee name but it is not updating on database as well as on browser.

thank u,

Now I want the ButtonClick Event for this LinkButtons inside GridView.. If I Click the LinkButton, then I want to Change the Text as START for LinkButton(By Default it is 'STOP') & also Update the Column Check_Status for 'C'-Table in Database Table as '1' for that Particular C_ID..

If I Click the LinkButton once Again, then I want to Change the Text as 'STOP' for LinkButton & also Update the Column Check_Status for 'C'-Table in Database Table as '0' for that Particular C_ID.. ( whether I have to Use Two Seperate LinkButtons for this in the Same Column..?)

How to do this..

Thank You
Title: Help   
Name: Gezim
Date: 2008-09-25 9:34:09 AM
Comment:
Cen sombady tell me how to solve this problem:
Ihave two form the form1 is to crate and the second form is to list the master/details records .
when i insert one record it insertet suksesfully and teh grid view let me to move in next cell with enter .
But when i open one record from Form2 i have this problem:
When i go in the last cell i can not move more it doesent go in the new row and why i need to go in last call and to go in booton row is to calculate info about calculation.
Plese halp me .
My Regards
Gezim S
Title: hallo   
Name: Gezim
Date: 2008-09-25 9:26:43 AM
Comment:
How to move with enter in Grid View Rows
Title: gud start   
Name: fatima
Date: 2008-09-06 8:47:20 AM
Comment:
now dis is kool stuff fr beginners:)
Title: gud but .......?????   
Name: gopi
Date: 2008-08-18 3:19:23 AM
Comment:
hi
this is very helpfull but plz tellme
how to work with gridview
like edit, delete, update , select....
Title: thanks   
Name: wim
Date: 2008-08-11 4:04:39 PM
Comment:
this was very helpfull
Title: image uploading in gridview   
Name: anand
Date: 2008-08-06 2:34:05 AM
Comment:
good day,
i need how to upload a image in gridview using c#.net
Title: gridview in asp.net   
Name: rani
Date: 2008-07-15 6:31:18 AM
Comment:
how to use gridview in asp.net with c#
Title: data repeatation ingridview   
Name: deivamala
Date: 2008-05-14 11:36:54 AM
Comment:
hi

i am in trouble sorting out the problem related gridview.i want to control the data repeaation in the column.eg:-if i have 5 state name and it repeats more than once i want ot show only once only...

plzeeeee help
Title: gridview   
Name: chaitanya
Date: 2008-03-31 5:22:24 AM
Comment:
System.Data.SqlClient.SqlConnection
myConnection = new
System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["mouse_dbConnectionString"].ConnectionString);
System.Data.SqlClient.SqlDataAdapter



i am getting error in the above line
Title: Alternaitng row   
Name: phantom199
Date: 2008-02-05 3:41:41 PM
Comment:
Thanks Lwrence and renegade for the code abt alternating row
Title: thanks!   
Name: Vitor
Date: 2008-01-12 12:05:01 PM
Comment:
Hello, i was looking for info on working with gridviews and this article helped me, thanks
Title: bnbvn   
Name: gayn
Date: 2007-12-30 2:16:03 AM
Comment:
hi ,
how read grid view data?
Title: ASP.NET   
Name: Anu
Date: 2007-12-22 3:14:59 AM
Comment:
Thank u for giving me this information and it will be very useful.
Title: images   
Name: kaila
Date: 2007-12-06 3:50:10 AM
Comment:
is there any way to use the mouse over event on a asp-button so that on mouse over the backgroud image will switch to a different image?
Title: gridview   
Name: prince
Date: 2007-10-29 10:06:50 PM
Comment:
Manage pictures in gridview
Title: gridview   
Name: kathir
Date: 2007-10-29 10:04:19 PM
Comment:
I need one help for u
Grid view using Asp.Net With C#
To set the columns Edit Select delete..
Regards.
S.kathir
Title: hp   
Name: heena patel
Date: 2007-07-31 11:50:48 AM
Comment:
Awesome, Thank you
Title: to select a row   
Name: Bivin
Date: 2007-07-11 12:52:04 AM
Comment:
this helped me a lot
Title: To handle alternate colours   
Name: Lawrence
Date: 2007-05-26 6:54:32 PM
Comment:
protected void GridView_Databound(object sender, GridViewRowEventArgs e) {
if(e.Row.RowType==DataControlRowType.DataRow) {
e.Row.Attributes.Add("onmouseover", "this.className='hover'");
if (e.Row.RowIndex % 2 == 0)
e.Row.Attributes.Add("onmouseout", "this.className=''");
else
e.Row.Attributes.Add("onmouseout", "this.className='alternate'");
}
}

You need to ensure that you specify the normal settings in
css using the CSSClass property of the datagrid or the initial style of the datagrid takes presidence over the css class.
Title: Thanx   
Name: anis
Date: 2007-04-02 4:35:28 AM
Comment:
drop you a thanx note =)
Title: Gridview woes   
Name: Peter
Date: 2007-03-28 11:26:11 PM
Comment:
Thanks for listing this as I was looking for a wa to highlight rows with the mouse over event on a gridview for ages!
Title: Gridview doubt(Asp.Net using c#)   
Name: George
Date: 2007-03-27 8:53:04 AM
Comment:
I need one help to you,

when i enter the numbers into the text boxes,that will be displayed with %(percentage)in gridview but that percentage should not add with numbers in to the database

with
kindly regards
George
Title: Alternating row colors   
Name: renegade
Date: 2007-01-30 10:28:09 AM
Comment:
This can handle the alternating row color. It's in vb.net, but you get it, right?

If e.Row.RowState = DataControlRowState.Alternate Then
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='red'")
Else
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='blue'")
End If
Title: Great   
Name: Krish
Date: 2007-01-21 12:26:10 PM
Comment:
This article is great to start ASP.NET with.

-Krish
-www.kris.com.np
Title: kumar   
Name: kumarraj
Date: 2007-01-12 2:29:50 AM
Comment:
this is the very good guidance for me and i appreciated to
this site developped persongs
Title: this is great, except...   
Name: Paul Kahl
Date: 2006-10-02 3:52:19 PM
Comment:
... if you happen to have your gridview built with alternating row colors. GridViewRowEventArgs doesn't have a RowIndex attribute, so you can't do a modulus on the row ID to determine WHICH style to return to onMouseOut.
Title: Its Great to know the store procedure   
Name: Manuel Manceli
Date: 2006-08-17 7:13:18 AM
Comment:
now i know how to use store procedure bec. of this sample.. :) thanks you
Title: what if using alternating row style   
Name: fwsteal
Date: 2006-07-31 10:52:46 AM
Comment:
what is the gridview has the following?

gridview BackColor is white

AlternatingRowStyle BackColor is silver
Title: study ofasp net in c#   
Name: rakhi
Date: 2006-03-22 6:37:58 AM
Comment:
want to more information about asp.net c# sql server connection.
Title: Apun & Jalu   
Name: John
Date: 2006-02-23 6:36:28 AM
Comment:
hi, its vary nice product for learner of asp.net programmer
Title: Thanks a lot   
Name: Sandeep
Date: 2006-02-16 5:22:21 AM
Comment:
HI great code. I was struggling for it thanks a lot.
Title: Thanks For the Help   
Name: Steven
Date: 2006-02-07 2:28:44 PM
Comment:
VB Version


Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim sqlcon As String = System.Configuration.ConfigurationManager.ConnectionStrings("mouse_dbConnectionString").ToString()
Dim myConnection As Data.SqlClient.SqlConnection = New Data.SqlClient.SqlConnection(sqlcon)
Dim sql As String


sql = "Select userid,lname,fname from cabadmin.icsEmployees where lname = 'Wagers' "
Dim myCommand As Data.SqlClient.SqlDataAdapter = New Data.SqlClient.SqlDataAdapter(sql, myConnection)

'TextBox1.Text() = "Hello World"
'Dim myCommand As Data.SqlClient.SqlCommand = New Data.SqlClient.SqlCommand(sql, myConnection)

'myCommand = new System.Data.SqlClient.SqlDataAdapter("StoredProcedure1",myConnection);

'myCommand.
Dim objDs As New Data.DataSet
myCommand.Fill(objDs)
'myCommand.CommandType = Data.CommandType.Text


myConnection.Open()
'Dim a As String
'a = myCommand.ExecuteScalar()
'If a <> "" Then

'TextBox1.Text() = a



GridView1.DataSource = objDs
GridView1.DataBind()

'End If
myConnection.Close()
End Sub
Protected Sub ItemDataBoundEventHandler1(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If (e.Row.RowType = DataControlRowType.DataRow) Then

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'")
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue'")
End If


End Sub
Title: Thank you   
Name: adann
Date: 2006-01-26 5:59:28 AM
Comment:
very Good
Title: Awesome!!!   
Name: Triumphlad
Date: 2006-01-21 4:34:41 PM
Comment:
Awesome article for those beginning with accessing database information in .NET. The transition from classic ASP to ASP.NET is harder than I thought, but this article has helped get me started! Great work! Thanks for helping a newbie!
Title: me and u   
Name: shetty
Date: 2006-01-17 2:01:03 PM
Comment:
very good my first program.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 3:14:07 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search