<%@ Page %>
Highlighted Hovering and Anywhere Selecting A DataGrid Row
Recently while working for one of my client I came across a requirement such that:
- DataGrid should not have select button to select a row. This was necessary to save some screen space.
- Still when the user clicks on any of the DataGrid row (on any column), that row should be selected and post back should happen. This also should cause SelectedIndexChanged event to fire.
- When user hovers mouse over the row the row should be highlighted.
This article explains how I provided the required functionality.
Designing the web form
In order to work with the example you need to create a web form containing a DataGrid. Follow these steps to create your web form:
- Drag and drop a DatGrid on the form
- Add a select button column to the DataGrid using DataGrid - Property Builder
- Set Visible property of the select button to false. This button column with CommandName property set to "Select" is responsible for firing the SelectedIndexChanged event of the DataGrid.
The Page_Load event handler
As usual you should data bind your grid in the page_load event. The Page_Load event handler looks like this:
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
Here, BindGrid() is a user defined sub routine that binds your DataGrid with some DataSource.
Client Script Block
<input type="hidden" name="__EVENTTARGET">
<input type="hidden" name="__EVENTARGUMENT">
function __doPostBack(eventTarget, eventArgument)
var theform = document.Form1;
theform.__EVENTTARGET.value = eventTarget;
theform.__EVENTARGUMENT.value = eventArgument;
We will use the same function (__doPostBack) in our code so that when a user clicks on any column of the DataGrid (not the select button) this function will be called. In above script eventTarget will be the row which we select and eventArgument will be empty string. If you see the HTML source of your page, you will notice two things:
- DataGrid control renders itself as HTML table.
- Each DataGrid column has a unique naming convention of the form DataGridID:_ctl<table_row_no>:_ctl0;. For example for select button from row 1, column 2 we get DataGrid1:_ctl1:_ctl0.
The Select button uses these ids and passes them to __doPostBack() function. We also should some how generate these ids correctly for each row of the table so that clicking on the row will call __doPostBack() function with correct column id.
ItemCreated Event handler
When the Select button is rendered in the browser, it comes as a link button that calls __doPostBack() function when clicked. We will now add some DHTML event handlers to each of the DataGrid row (DataGrid item). The place to do that is ItemCreated event. This event is fired every time a DataGrid item is being created. The code in this event handler looks like this:
Private Sub DataGrid1_ItemCreated
(ByVal sender As Object,
ByVal e As DataGridItemEventArgs)
If e.Item.ItemType = ListItemType.Item
Or e.Item.ItemType = ListItemType.AlternatingItem
Or e.Item.ItemType = ListItemType.SelectedItem Then
('" & "DataGrid1:" & "ctrl" &
e.Item.ItemIndex & ":ctrl0','')")
In this event handler we add DHTML event handlers for OnMouseOver,OnMouseOut and OnClick events of all the items, alternating items and selected items. The OnMouseOver handler changes background color of DataGrid row so that it apears highlighted. OnMouseOut event handler removes this highlight and OnClick event handler calls the __doPostBack() function with appropriate row id. Note how we generate the item ids.
SelectedIndexChanged event is fired when user selects an item by clicking the Select button. In ItemCreated event handler we put OnMouseOver and OnMouseOut event handlers for all items because we wanted "hand cursor" to every item. However, once an item gets selected we would not like its back color to change again. Hence, in the SelectedIndexChanged event we simply remove the OnMouseOver and OnMouseOut functionality so that the selected item will not loose its background color.
Private Sub DataGrid1_SelectedIndexChanged
(ByVal sender As System.Object,
ByVal e As System.EventArgs)
That's it. Here is how a sample run looks like: