There are times when you will need to highlight or otherwise modify
the contents of a particular DataGrid row-column value based upon the
value in the column. In this example we will select the CompanyName,
ContactName, and ContactTitle columns from the Customers table in the
Northwind database. Whenever the value of ContactTitle equals "Owner"
we will change the font color to red.
We can do this by using an ItemTemplate where we have complete control
over the presentation of the data. We use BoundColumns for the first
two columns and an ItemTemplate for the ContactTitle column. Within
the ItemTemplate we call a function named "ChangeColo rs" and pass it
the value of the column. This is what the line <%#
ChangeColor(Con tainer.DataItem ("ContactTitle" )) %> does. We are
getting the value of ContactTitle and passing it to the ChangeColor
function which appears in our code-behind page.
<%@ Page Language="vb"
Src="/Portals/57ad7180-c5e7-49f5-b282-c6475cdb7ee7/CondDataGrid.as px.vb"
Codebehind="Con dDataGrid.aspx. vb" Inherits="CondD ataGrid"
AutoEventWireup ="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CondData Grid</title>
<meta content="Micros oft Visual Studio.NET 7.0" name=GENERATOR>
<meta content="Visual Basic 7.0" name=CODE_LANGU AGE>
<meta content=JavaScr ipt name=vs_default ClientScript>
<meta content=http://schemas.microso ft.com/intellisense/ie5
name=vs_targetS chema>
</head>
<body MS_POSITIONING= "GridLayout ">
<form id=Form1 method=post runat="server">
<asp:DataGrid ID="dataGrid"
AutoGenerateCol umns = "False"
Runat="server">
<Columns>
<asp:BoundColum n HeaderText="Com pany Name" DataField="Comp anyName"
/>
<asp:BoundColum n HeaderText="Con tact Name" DataField="Cont actName"
/>
<asp:TemplateCo lumn HeaderText="Con tact Title">
<ItemTemplate >
<%# ChangeColor(Con tainer.DataItem ("ContactTitle" )) %>
</ItemTemplate>
</asp:TemplateCol umn>
</Columns>
</asp:DataGrid>
</form>
</body>
</html>
Most of the code-behind file is the usual data access code to get our
resultset. At the bottom of the file, color-coded in blue, is the
ChangeColor function. As you can see, all it is doing is checking for
"Owner" in the value passed in. If the value is "Owner" then we put
font tags around the value and send it back. Otherwise, if it was not
"owner", we just send the value back to the caller to be rendered as
is.
Imports System
Imports System.Data
Imports System.Data.Sql Client
Imports System.Configur ation
Public Class CondDataGrid
Inherits System.Web.UI.P age
Protected WithEvents dataGrid As System.Web.UI.W ebControls.Data Grid
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArg s) Handles MyBase.Load
Dim sqlConn As SqlConnection
Dim sqlCmd As SqlCommand
Try
sqlConn = New SqlConnection(C onfigurationSet tings.AppSettin gs("ConnectionS tring"))
sqlCmd = New SqlCommand("SEL ECT TOP 10 * FROM Customers",
sqlConn)
sqlConn.Open()
dataGrid.DataSo urce = sqlCmd.ExecuteR eader()
dataGrid.DataBi nd()
Catch ex As Exception
Response.Write( ex.ToString() & "<br>")
Finally
sqlConn.Close()
sqlConn.Dispose ()
End Try
End Sub
Function ChangeColor(val ue)
If value = "Owner" Then
ChangeColor="<f ont color='red'>" & value & "</font>"
Else
ChangeColor = value
End If
End Function
End Class
I hope you have seen how easy it is to modify the appearance of a
DataGrid colum based upon its value. You can, of course, base your
modifications on the value of any column you want.
AMBER [MCSD.NET MCAD.NET] http://www.dedicatedsolutions.co.uk
