 |
MouseOver Coloring and Click on DataGrid |
|
 |
Coloring in DataGrid is not any news... As from my previous article, we can use a Helper
Function to mark some data as different color/highlighted based on certain criteria.
Now, I'd like to share how to make a datagrid that can changing the color of the data and mouse cursor when Mouse Over/Out!
As we all know that we can build a Data-Driven application easily in ASP.NET, while displaying the data on screen can be accompanished in several mouse click/typing, it is because
all of the job are passed to DataGrid. DataGrid is a rich and powerful control, which will be render as a < TABLE/> in fact. Yes, it's a Table with < TR/> and < TD/> ~
In order to make a colorful row of data, we're actually manipulating the backgroundColor of a TableRow. From the DataGrid point of view, these TableRows are belongs to type of
ListItemType.Item or ListItemType.AlternatingItem. So we have to write a pair of OnMouseOver and OnMouseOut Javascript method target for these types of Items in order to toggle the
color of a TableCell dynamically.
E.g.
If e.Item.ItemType = ListItemType.Item Or _
e.Item.ItemType = ListItemType.AlternatingItem Then
e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor=
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=
End If
We put these lines of code in the DataGrid.ItemDataBound event handler because this event will be fired
after data is bounded to the DataGrid, but just before it's actually display on screen.
Moreover, how about if we just want to show a mouseOver/Out effect for a particular "column" instead of a complete Row? Yes, we work in the whole ListItem before,
and we can now work with the "cell" on a "ListItem"!
E.g.
e.Item.Cells(3).Style("cursor") = "hand"
Apart from changing the color, we can do what we want for a DataGrid, as we can do in the classic ASP or < TABLE/> control.
E.g. We can change the MouseOver Cursor to a little hand instead of the boring Arrow as stated in above.
Moreover, we can also add an Javascript alert method to the Attributes of a TableCell!
E.g.
Dim AlertMessage As String = e.Item.Cells(1).Text
e.Item.Cells(3).Attributes.Add("onclick", "alert('You click at ID: " & e.Item.Cells(0).Text & "!');")
Ok, let's see this little trick in action!
| |
 |
|
|
 |
|