[Parte 3] Capítulo 6: Como formatar colunas específicas e exibir com o helper WebGrid

Por padrão, o helper WebGrid exibe todas as colunas de dados que são retornadas pela consulta SQL. É possível personalizar a exibição desses dados das seguintes maneiras:

- Especificar quais colunas que serão exibidas pelo helper e em qual ordem. Muito útil para quanod desejamos exibir somente um subconjunto de colunas retornadas pela consulta SQL.
- Especificar as instruções de formatação dos dados a serem exibidos como, por exemplo, adicionar o simbolo de moeda (R$) para dados que representem dinheiro.

Este procedimento mostrará como utilizar as opções do helper WebGrid para formatar colunas individualmente.

1 - No site, crie uma nova página chamada FormatarColunaWebGrid.cshtml.
2 - Substitua a marcação pela seguinte:

Este exemplo é como o exemplo do post anterior (Como exibir dados utilizando o helper WebGrid), exceto pela tabela ser renderizada chamando o método grid.GetHtml onde são especificadas as coluans a serem exibidas e como serão exibidas.

O código a seguir mostra como especificar as colunas e a ordem em que serão exibidas:


@grid.GetHtml(
                columns: grid.Columns(
                    grid.Column("Nome", "Produto", style: "produto"),
                    grid.Column("Descrição", format:@<i>@item.Descrição</i>),
                    grid.Column("Preço", format:@<text>R$@item.Preço</text>)
                )
 )



Para dizer ao helper quais colunas devem ser exibidas, devemos incluir um parametro de colunas para o método GetHtml e passar para ele uma coleção de colunas. É possível especificar individualmente uma coluna para ser exibida incluindo um objeto Grid.Column e passar o nome da coluna de dados desejada.

Neste exemplo, o código faz com que o objeto WebGrid exiba apenas tres colunas: Nome, Descrição e Preço. Essas colunas devem ser incluídas na consulta SQL, caso contrário, o helper não será capaz de exibí-las.

Note que junto ao nome da coluna, podem ser passadas outras instruções de formatação. No exemplo, o código exibe a coluna Nome utilizando o codigo a seguir:


grid.Column("Nome", "Produto", style: "produto"),

Esse código diz ao helper para:

- Exibir os valores da coluna Nome
- Utilizar a string "Produto" como título da coluna, ao invés do nome padrão da coluna
- Aplicar a classe CSS chamada "produto". Na marcação da página, essa classe CSS define a largura da coluna como 200px e a fonte em negrito.

O exemplo para a coluna Descrição utiliza o seguinte código:

grid.Column("Descrição", format:@<i>@item.Descrição</i>),

O trecho acima solicita ao helper que exiba a coluna Descrição. Também especifica uma formatação utilizando uma expressão que envolve o valor da coluna em uma marcação HTML:

@<i>@item.Descrição</i>

O exemplo para a coluna Preço mostra uma outra variação para especificar as propriedades de formatação:

grid.Column("Preço", format:@<text>R$@item.Preço</text>)

3 - Execute a página e observe as alterações: