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
- How to work with the OnItemDataBound event?
- How to add the attribute OnDblClick to all the rows in the DataGrid?
- How to retrieve the values for the row in which the user Double clicked?
- 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
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
