Changing the Row's Background Color in DataGrid When Hovering

Binding data source to the DataGrid data control is simple, but adding the visual-effect on the DataGrid isn't hard too. Here, I show you the code that changing background color of the particular row when the users move the mouse pointer over the row. Since the DataGrid data control does not have the properties to let us specify the rows' backgroundcolor, thus, we have add the onmouseover and onmouseout attributes when it (DataGrid) is created (OnItemCreated event) or its data are bound to the rows.(OnDataBound). First, add the onItemCreated attribute to the DataGrid data control.

<asp:datagrid id="dgrdAuthors" onItemCreated="dgrdAuthors_ItemCreated" ........ />

then, in the <script> tag or in the code-behind, add this event (I put it in the script tag in my example). As what I have said, it can be done by putting the code in the ItemDataBound event, so just change the event name instead.

<script>
private void dgrdAuthors_ItemCreated(Object sender, DataGridItemEventArgs e)
{
     if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
     {
          e.Item.Attributes.Add("onmouseover",
                              "this.style.backgroundColor='#f7f7f7';this.style.cursor='hand'");
          e.Item.Attributes.Add("onmouseout","this.style.backgroundColor='#ffffff'");
     }
}
</script>

How does this code work? The ItemCreated event is fired when each row is created in the datagrid, just before the data is bound to the row. Therefore, it is commonly used to set the appearance of the datagrid's rows here. Whereas, the ItemDataBound event is fired when each data from the data source bound to the row.

The e.Item simply represents the current data row of the datagrid. And, a datagrid consists of header, data items and footer, which are under the ListItemType enumerations. The Item ItemType represents the odd-number rows in the datagrid, and the AlternatingItem ItemType represents the even-number rows.

In the code above, the ItemCreated event will be fired when each row is created. Since we do not want add the visual effect on the header and footer, we check the ItemType whether it is Item or AlternatingItem. If it is, then we add the current row with the onmouseover and onmouseout attributes, which will apply the specified styles to it.


Definitions : OnItemCreated event | OnItemDataBound event | DataGrid's ItemTypes



Alternative way :

Apart from the doing it in the ItemCreated and ItemDataBound events, there is another way to accomplish the job above. In the Page_Load() event, add this

protected void Page_Load()
{
     if(!IsPostBack)
     {
          foreach(DataGridItem item in dgrdAuthors.Items)
          {
               item.Attributes["onmouseover"] = "this.style.backgroundColor='#f7f7f7'";
               item.Attributes["onmouseout"] = "this.style.backgroundColor='#ffffff'";
          }
     }
}

Simple, The DataGridItem represents the data items in the datagrid. Therefore, I add the onmouseover and onmouseout attributes to every data item in the grid.


Definition: DataGridItem


Okay, I have done my first article regarding to the DataGrid Data Control. And soon, I will write more articles, basically more on the data controls in asp.net. :)