Online courses in ASP.NET MVC / Core, jQuery, Angular, and Design Patterns conducted by Bipin Joshi. Read more...
Learn ASP.NET MVC / Core, jQuery, Angular, and Design Patterns through our online training programs. Courses conducted by Bipin Joshi on weekends. Read more details here.

<%@ Page %>

Highlighted Hovering and Anywhere Selecting A DataGrid Row

Introduction

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
   BindGrid()
End If
end Sub
Here, BindGrid() is a user defined sub routine that binds your DataGrid with some DataSource.

Client Script Block

When you add a Select button column to your DataGrid, ASP.NET automatically emits following client side javascript in your page.
<input type="hidden" name="__EVENTTARGET">
<input type="hidden" name="__EVENTARGUMENT">
<script language="javascript">
function __doPostBack(eventTarget, eventArgument) 
{
	var theform = document.Form1;
	theform.__EVENTTARGET.value = eventTarget;
	theform.__EVENTARGUMENT.value = eventArgument;
	theform.submit();
}
</script>
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) 
Handles DataGrid1.ItemCreated
If e.Item.ItemType = ListItemType.Item 
Or e.Item.ItemType = ListItemType.AlternatingItem 
Or e.Item.ItemType = ListItemType.SelectedItem Then
e.Item.Attributes.Add
("onmouseover", "this.style.backgroundColor=
'beige';this.style.cursor='hand'")
e.Item.Attributes.Add
("onmouseout", "this.style.backgroundColor='white';")
e.Item.Attributes.Add
("onclick", 
"javascript:__doPostBack
('" & "DataGrid1:" & "ctrl" & 
e.Item.ItemIndex & ":ctrl0','')")
End If
End Sub
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

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) 
Handles DataGrid1.SelectedIndexChanged
DataGrid1.SelectedItem.Attributes.Item("onmouseover") = 
"this.style.cursor='hand'"
DataGrid1.SelectedItem.Attributes.Remove("onmouseout")
End sub
That's it. Here is how a sample run looks like:




Bipin Joshi is a software consultant, trainer, author and a yogi having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, AngularJS, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Ajapa Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 13 Jul 2003



Tags : ASP.NET Server Controls JavaScript Data Controls