Binaryworld - Showing a graphical checkmark on DataGrid's boolean columns ... [ ASP.net -> Controls ]

While working with template-based controls such as the Repeater, DataList or DataGrid, it often happens that you don't want to show just plain text as it is retrieved from the data source, but want to interpret the data and represent it in other ways. For example, you may want to show a graphical checkmark to indicate whether a boolean field of the data source has a true or false value. You can render this simply with a disabled checkbox (so that it's read-only) and by binding its Checked property to the boolean data field. Here's an example with a template column for a DataGrid:




                    '<%# Container.DataItem("State") = "CA" %>'/>




This works fine, but it's not very nice, graphically speaking. It would be better to show different images to render the True/False (or On/Off) state, right? All you have to do is using an Image control instead of the checkbox, and binding its ImageUrl property to a protected/public function declared in the code-behind, that takes in input the True/False value, and returns the Url of the image to show. The image control is declared as follows:

And here's the code-behind function:

Click here to copy the following block

Protected Function GetBooleanImage(ByVal value As Object) As String
  If CType(value, Boolean) = True Then
    Return "/images/checked.gif"
  Else
    Return "/images/unchecked.gif"
  End If
End Function

Of course, you can pass to the function the value taken directly from the data source, if it's a boolean field as in the example above, but also the result of a boolean expression. For example, here's how to show a checkmark that indicates whether the State field is equal to "CA":