How to capture the Double Click event in a DataGrid?
page 1 of 1
Published: 10 May 2002
Unedited - Community Contributed
Abstract
One of the rich in-built Webserver control is the DataGrid. We can do a lot with a DataGrid. There are several ways, in which we can customize the datagrid according to our need. Assume that we have a datagrid and we want to select any item (row) from the datagrid. How about allowing the user to Double Click on anywhere on the DataGrid? When the user clicks, we will retrieve the information of all columns of the selected row (double clicked row).
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 40227/ 35

How to capture the Double Click event in a DataGrid?

Written on: May, 10th 2002.
Introduction

One of the rich in-built Webserver control is the DataGrid. We can do a lot with a DataGrid. There are several ways, in which we can customize the datagrid according to our need. Assume that we have a datagrid and we want to select any item (row) from the datagrid. How about allowing the user to Double Click on anywhere on the DataGrid? When the user clicks, we will retrieve the information of all columns of the selected row (double clicked row).

I assume that, the reader knows to create a simple datagrid with TemplateColumn and ItemTemplate tags.

Things that we will be learning in this article
  1. How to work with the OnItemDataBound event?
  2. How to add the attribute OnDblClick to all the rows in the DataGrid?
  3. How to retrieve the values for the row in which the user Double clicked?
  4. How to display the information of a selected row?

Populating the DataGrid

For our example, we will take the table STORE in the PUBS Database. Since stored procedures are very much better than inline query, we use a stored procedure called, sp_stores_sel, which contains a single SQL statement. The SQL statement would be Select * pubs.dbo.from stores.

What is OnItemDataBound Event and how it is invoked?

The ItemDataBound event is raised after an item is data bound to the DataGrid control. This event provides you with the last opportunity to access the data item before it is displayed on the client. So, this is the best place to add any events or to retrieve any values that is being populated for the DataGrid. Inorder to invoke this event, we have to specify while declaring a DataGrid such as:

OnItemDataBound="myItems_ItemDataBound"

In the above statement, we specify that on each Item (row) created, the method, myItems_ItemDataBound should be invoked.

How to add an attribute OnDblClick to each row in the DataGrid?

The output of DataGrid web server control is nothing but a HTML table. So, inorder to capture the double click event for each row, what we have to do is, add a double click event to each <tr> element in the DataGrid. Once the event added the <tr> tag should look like, <tr OnDblClick=ShowDetails();>

How to retrieve the values for the row in which the user Double clicked?

Retrieving the values for each row is very simple. All we have to do is to invoke the method, FindControl. We need to pass the name of each control (column) that we need to retrieve the values. Now let us take a look at the method, myItems_ItemDataBound.

Code in the myItems_ItemDataBound method.
Sub myItems_ItemDataBound(ByVal Sender As Object, ByVal e As DataGridItemEventArgs)

    Dim lblSID As Label
    Dim tblStoreName As TableRow

    Select Case e.Item.ItemType
    Case ListItemType.Item
        lblSID = CType(e.Item.FindControl("hdnStoreID"), Label)

        tblStoreName = e.Item.FindControl("lblStoreName").Parent.Parent
        tblStoreName.Attributes.Add("OnDblClick", "ShowDetails(" & lblSID & ");")
    Case ListItemType.AlternatingItem
        lblSID = CType(e.Item.FindControl("hdnStoreID"), Label)

        tblStoreName = e.Item.FindControl("lblStoreName").Parent.Parent
        tblStoreName.Attributes.Add("OnDblClick", "ShowDetails(" & lblSID & ");")
    End Select

End Sub

How it works?

In the above code, we have two variables. An instance of TableRow, and a Label. Then we have a Select statement, since we need to create attributes for both ItemStyles and AlternatingItemStyles. The statement,

lblSID = CType(e.Item.FindControl("hdnStoreID"), Label)

is responsible for retrieving the value in the Label control "hdnStoreID". This is for retrieving the value for each row. The next two statements are the most important ones in this article.

tblStoreName = e.Item.FindControl("lblStoreName").Parent.Parent

One of the column is the StoreName. Each column will be inside a <td> element and each <td> will be inside a <tr> element. We know this for true. If we say, e.Item.FindControl("lblStoreName").Parent, then the control points to the <td>. But we need to get the <tr> element. That is why we have Parent of Parent, which is nothing but parent of each <td>.

Now, we have a TableRow control, which points to the current row in the datagrid. Then our next job is to add the attribute, "OnDblClick" to each row and this is done using

tblStoreName.Attributes.Add("OnDblClick", "ShowDetails(" & lblSID & ");")

We invoke a client side method called ShowDetails which will be invoked when we double click on any row in the DataGrid.

Sample output of our scenario

Capturing the Double Click event in a DataGrid - 38,720 bytes
Fig: DataGrid with Checkboxes.

Test this Script

Download the code

Click here to download the ASPX page
Click here to download the Stored Procedure

Conclusion

Thus we have discussed about how to capture the double click event in a datagrid.

Links

DataGrid and Checkboxes
How to Edit a DataGrid?
Checkbox Web Server Control
Retrieving Images from SqlServer in ASP .NET
Retrieving Images from SqlServer and displaying it in DataGrid

Send your comments to das@aspalliance.com



User Comments

Title: maidam query   
Name: maidam query
Date: 2010-11-25 1:51:35 AM
Comment:
good
Title: Excellent!   
Name: fabian
Date: 2009-05-05 1:46:09 PM
Comment:
Thank you very much! You're really save me! It's exactly that i need
See ya
Title: explain me details   
Name: saratha
Date: 2009-04-02 1:50:30 AM
Comment:
i am not understand this program please explain in detail
Title: Good Example   
Name: Anupam Sinha
Date: 2007-09-27 8:40:00 AM
Comment:
Extemely Useful , plz give more example like this. Code is running successfully.
Title: Datagrid/Gridview enhabncement   
Name: Puneet Sharma
Date: 2007-06-22 3:05:07 AM
Comment:
Really..I liked the article..
Some more concepts are cleared now...
Thanks & Cheers..!!!
Title: A Question ..   
Name: Francisco
Date: 2007-05-18 2:57:13 PM
Comment:
I have a question.. this script is excellent
but if i have a form with a textbox and a button, when i press the button its opens another form with my info in the datagrid, and when i press the double click, how can i do the selected option appears me in the texbox in the first form ??
Title: not working   
Name: madhuri
Date: 2007-02-22 6:09:41 AM
Comment:
it was not working
Title: Nice Work   
Name: muntasir
Date: 2007-02-08 3:50:49 AM
Comment:
Excellent Boss!!
Title: Thank you very much   
Name: Natalya
Date: 2006-09-06 8:57:55 AM
Comment:
It is very helpful.
Thank you.
Title: Need Help   
Name: kranthi
Date: 2006-08-02 1:47:33 AM
Comment:
I have gone thru ur sample n tried the same.but i couldnt fire the double click event.can u please tell me the reason.
iam not getting the alert aslo only ic an display the gird but the double click is not working
Title: query   
Name: ninad
Date: 2006-01-29 3:22:16 PM
Comment:
hey, i m having problem with the
lblSID = CType(e.Item.FindControl("hdnStoreID"), Label)
its returning nothing. and
tblStoreName = e.Item.FindControl("lblStoreName").Parent.Parent
is throwing a null exception.
just make it clear, whether the "hdnStoreID" is name of column in your table or in the datagrid.
Title: Feed Back   
Name: Ashok Kumar
Date: 2005-09-30 2:34:25 AM
Comment:
Hai,

Its working well
Title: Changing an image in a datagrid column in the ItemDataBound event?   
Name: Hans
Date: 2005-08-09 9:13:01 PM
Comment:
Can anyone help me on doing this? Any ideas are wellcome.
thanks
Title: Excelente   
Name: Claudio
Date: 2004-09-14 10:36:18 AM
Comment:
Muchas gracias por este ingenioso script
Many thanks for this ingenious script
Title: Feedback   
Name: dev
Date: 2004-08-16 4:59:16 AM
Comment:
Excellent example






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


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-12-18 4:07:11 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search