ASP.NET 2.0 - Colorindo as células do GridView condicionalmente

O controle GridView oferece diversos recursos que podemos usar para exibir e manter dados em páginas ASP.NET, muitos deles configuráveis em tempo de desenvolvimento. Além disto, podemos usar os diversos eventos disponíveis para estender seus recursos e efetuar uma personalização mais afinada.

Para saber mais sobre o GridView acompanhe os artigos:

Vou mostrar como podemos colorir as células de um controle GridView sob uma determinada condição usando o evento RowDataBound.

Antes do controle GridView ser renderizado, cada linha no controle precisa ser vinculada a um registro na fonte de dados. O evento RowDataBound é disparado quando um linha de dados (representado pelo objeto GridViewRow) é vinculado aos dados em um controle GridView.  Isto permite implementar um tratamento de evento para realizar operações que alterem as propriedades dos dados vinculados a linha sempre que o evento ocorrer.

É exatamente isto que vamos fazer neste exemplo. Iremos alterar a cor da linha do GridView verificando uma determinada condição. Para realizar tal tarefa lançaremos mão do evento RowDataBound efetuando um tratamento do evento e implementando a alteração da cor da linha do grid.

Vamos exibir em uma página web através do controle GridView os dados relacionados das tabelas Categories e Products do banco de dados Northwind.mdb.

Para acompanhar este artigo você deve possuir os seguintes aplicativos instalados:

Usando o bom e velho Access vemos abaixo o relacionamento entre as tabelas e a consulta SQL que iremos construir para exibir os 50 primeiros registros da tabela Products por categoria:

SELECT TOP 50 Categories.CategoryName, Products.ProductName, Products.UnitsInStock
FROM Categories INNER JOIN Products ON Products.CategoryID=Categories.CategoryID
ORDER BY Categories.CategoryID;

Eu vou usar o Visual Web Developer Express Edition(VWD) mas você obterá o  mesmo resultado se usar o Visual Studio 2005.

Abra o VWD e crie um novo web site através do menu File opção New Web Site usando a linguagem Visual Basic com o nome GridViewCorCondicional.

A seguir selecione a página Default.aspx, e, no modo Design, inclua um controle : SqlDataSource e um controle GridView;

Selecione o controle GridView e em GridView Tasks defina o DataSource para SqlDataSource1 em Choose Data Source.

Selecione o controle SqlDataSource e, em Configure DataSource, defina a conexão com o banco de dados Northwind.mdb para que a string de conexão seja gravada no arquivo web.config.

Nota: Podemos usar (e é mesmo aconselhável) um controle AccessDataSource. Neste caso o caminho do banco de será definido em DataFile:

 <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="c:\dados\Northwind.mdb"

Após isso altere para o modo Source e verifique o código que foi criado pelo Editor:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">
 

<asp:SqlDataSource ID="SqlDataSource1" runat="server"  ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %> ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>" ></asp:SqlDataSource>

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"></asp:GridView>


</form>

</body>

</html>

 

Vamos agora incluir a nossa consulta SQL criada anteriormente para o SqlDataSource e incluir uma rotina vinculada ao evento RowDataBound.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"

SelectCommand="SELECT TOP 50 Categories.CategoryName, Products.ProductName, Products.UnitsInStock _
                          From Categories INNER JOIN Products ON Products.CategoryID=Categories.CategoryID Order BY Categories.CategoryID">

</asp:SqlDataSource>

<br />

<br />

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="aplicaCor" DataSourceID="SqlDataSource1" AllowPaging="True">

</asp:GridView>

&nbsp;</div>

</form>

</body>

</html>

 

Perceba que usamos o comando SelectCommand do SqlDataSource e a propriedade OnRowDataBound na definição do GridView de forma que a cada ocorrência do evento será chamada a rotina aplicaCor.

Só falta mostrar então a tal rotina aplicaCor que foi colocada no arquivo Default.aspx.vb (code-behind)

Sub aplicaCor(ByVal sender As Object, ByVal e As GridViewRowEventArgs)


If e.Row.RowType = DataControlRowType.DataRow Then


  Select Case e.Row.Cells(0).Text

    Case "Beverages"

               If CType(e.Row.Cells(2).Text, Integer) > 20 Then

                e.Row.BackColor = Drawing.Color.LightSalmon

               Else

                e.Row.BackColor = Drawing.Color.Aqua

               End If

     Case "Condiments"

              If e.Row.Cells(1).Text.Substring(0, 1) = "G" Then

               e.Row.BackColor = Drawing.Color.Yellow

              Else

              e.Row.BackColor = Drawing.Color.LightPink

              End If

       Case "Confections"

            e.Row.BackColor = Drawing.Color.LightBlue

         Case "Dairy Products"

            e.Row.BackColor = Drawing.Color.LightGreen

   End Select

End If

End Sub

 

No código acima , para cada categoria de produto estou definindo um cor diferente e, em algumas categorias estou colorindo as linhas conforme um critério , assim temos:

- Para a Categoria "Beverages"

     If CType(e.Row.Cells(2).Text, Integer) > 20 Then

                e.Row.BackColor = Drawing.Color.LightSalmon

               Else

                e.Row.BackColor = Drawing.Color.Aqua

      End If

    que verifica se o valor da unidade em estoque(UnitsInStock) é maior que 20 atribuindo neste caso a cor : LightSalmon

- Para a Categoria "Condiments"

      If e.Row.Cells(1).Text.Substring(0, 1) = "G" Then

               e.Row.BackColor = Drawing.Color.Yellow

       Else

              e.Row.BackColor = Drawing.Color.LightPink

     End If

    que verifica se o primeiro caractere do nome do Produto(ProductName) iniciar pela letra "G" atribuindo neste caso a cor : Yellow

A categoria  "Grains/Cereals"  será exibida com o valor padrão definido para o GridView.

Executando o projeto no servidor embutido do ASP.NET 2.0 temos:

Eu usei um SqlDataSource para acessar um banco de dados Access. Tudo bem, funciona, mas é recomendável usar o controle AccessDataSource. Ok.  

Pegue o código completo do projeto aqui: gridViewCorCondicional.zip

 

Até o próximo artigo ASP.NET ...

José Carlos Macoratti