Assim como nas versões anteriores, o ASP.NET 2.0 fornece ao desenvolvedor alguns estilos para definirmos no controle GridView. Utilizando esses estilos evitam-se escrever códigos CSS para tal finalidade mas, claro, desde que os estilos pré-definidos pelo Visual Studio .NET sejam compatíveis com o layout da aplicação.

Para acessar esses estilos no controle GridView basta simplesmente clicar em sua Smart Tag e, posteriormente no link Auto Fomart. Uma janela semelhante a mostrada abaixo é exibida para você escolher o estilo que desejar.

Como vemos, existem vários estilos/formatações que podemos escolher para se aplicar no controle GridView. Apesar do controle GridView dar suporte à uma nova funcionalidade chamada “Temas e Skins” (através da propriedade SkinID), que são arquivos que definem a aparência visual de um determinado controle, o Auto Format não tem a ver com isso.

De qualquer forma, não será abordado nesta série de artigos Temas e Skins por ser um assunto extenso, que requer um artigo específico, mas fica registro aqui um artigo diretamente do portal MSDN que explica detalhadamente tal funcionalidade.

Além disso, podemos definir para cada coluna um estilo diferente, podendo inclusive informar através da propriedade CssClass uma classe em nosso arquivo de estilos (*.css) que corresponderá a formatação de uma coluna ou uma seção dela. A figura abaixo exibe como ter acesso à essas propriedades de formatação.

Como já vimos anteriormente, clica-se na Smart Tag do controle GridView e em seguida no link Edit Columns. A janela acima é exibada e, assim, podemos clicar em cima da coluna que desejamos alterar, e suas respectivas propriedades são apresentadas no painel da direita. Em vermelho vemos as propriedades de estilos para a coluna e percebemos a flexibilidade, onde podemos definir um estilo completamente diferente para cada seção (Control, Footer, Header e Item) do controle GridView.

Formatando Valores

Freqüentemente quando utilizamos um controle do tipo GridView e inserimos valores do tipo Data, Dinheiro, Inteiros ou Decimais, precisamos formatar esse valor de acordo com a finalidade desse Campo. Para tal necessidade as colunas nos fornecem uma propriedade chamada DataFormatString, que veremos a sua utilidade abaixo.

Existem dois tipos de formatação: Standard Formats e Custom Formats. O objetivo é mostrar as formatações mais utilizadas em aplicativos para serem executados nos padrões brasileiros, então deixemos claro o seguinte: o padrão para valores numéricos será o Stardand Format. Já a formatação para datas, será utilizado o Custom Format.

A propriedade DataFormatString fornece uma formatação customizada para o valor inserido na BoundColumn. Esta propriedade consiste em duas partes separadas por dois pontos estando dentro de um par de chaves da seguinte forma: {:}. Isso é válido apenas quando estiver inserindo na BoundColumn valores numéricos ou do tipo data.

A sintaxe é a seguinte: {0:[Formato][Qtde. Casas Decimais]}. O caracter que vem após os dois pontos é o formato em que o valor será exibido. Você também poderá optar por definir a quantidade de casas decimais da seguinte forma: {0:C2}. A seguir uma lista com os valores possíveis:

Observação: Os caracteres acima que especificam o formato a ser exibido não são case-sensitive, exceto para o X, pois se ele for minúsculo os valores serão apresentados em minúsculo, do contrário, serão exibidos em maiúsculo.

Observação 1: Devemos nos atentar para o MM e para o mm, pois o maiúsculo significa Mês, já o minúsculo significa Minutos.

Observação 2: Você poderia também ao invés de barras “/” utilizar o hífen “-” como separador para as Datas, ficando a String de formatação da seguinte forma: {0:dd-MM-yyyy hh:mm:ss}.

Para configurar os valores no controle GridView clique na Smart Tag do mesmo e selecione Edit Columns. Em seguida, clique em cima da coluna que deseja formatar e a propriedade DataFormatString será exibida no painel do lado direito, como é exibido na figura abaixo:

Há ainda vários outros padrões para a formatação de datas os quais optei por não colocar aqui pois utilizamos na maioria das vezes o formato brasileiro. Mas para quem se interessar pode encontrar maiores informações no link direto da fonte da Microsoft: Standard DateTime Format Strings.

Customização em runtime

Há casos em que necessitamos customizar alguns desses estilos em runtime, como por exemplo: se um valor exceder um X, a cor da linha em questão do controle GridView deve ser vermelha. No controle DataGrid utilizávamos o evento ItemDataBound para fazer essa consistência. Já no controle GridView temos ainda este evento, mas com um outro nome: RowDataBound. O exemplo abaixo ilustra esse processo:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) {
        DbDataRecord data = (DbDataRecord)e.Row.DataItem;
        if (data.GetDecimal(0) > 2)
            e.Row.BackColor = Color.Red;
        }
}

Através do enumerador DataControlRowType verificamos qual o tipo da linha, pois esse evento é disparado a cada linha criada no controle GridView. Se a linha for do tipo DataRow, aí iremos verificar se o valor da coluna “Valor” é ou não maior que 2 (essa será a consistência para o exemplo).

Devemos agora nos atentar para qual o tipo de fonte de dados está sendo passado para a propriedade DataSource do controle. Isso varia quando utilizamos DataSets e DataReaders, pois devemos fazer o Cast para o tipo de objeto correto. Finalmente, se a condição for atendida, mudamos a cor da linha em questão para vermelho.

O código abaixo mostra os tipos de casts para as diferentes fonte de dados:

//Datasets
((DataRowView)e.Row.DataItem)["NomeColuna"]
((DataRowView)e.Row.DataItem)[0]

//DataReaders
((DbDataRecord)e.Row.DataItem)["NomeColuna"]
((DbDataRecord)e.Row.DataItem)[0]

//Objetos
((TipoObjeto)e.Row.DataItem).Propriedade

Lembrando que no caso do uso dos DataReaders, devemos importar o Namespace System.Data.Common para poder utilizar a Classe DbDataRecord.

Observação: O objeto GridViewRowEventArgs que vem como parâmetro no evento RowDataBound contém as informações completas da linha em questão, ou seja, como este evento é disparado a cada linha que é criada dentro do controle GridView, ele nos fornece informações como o tipo da linha, os valores provenientes da fonte de dados que serão exibidos, os controles filhos de cada linha, entre diversas outras propriedades.

GridView.zip (674.49 kb)