ASP.NET MVC 3 – Customizando o WebGrid

Introdução

No artigo anterior, mostrei como podemos de forma simples e fácil, implementar a tabulação de dados com o novo recurso do ASP.NET MVC 3, o WebGrid. Este recurso está disponível tanto para as Views em ASP.NET quanto para as Views em Razor.

A medida que utilizamos o WebGrid, a formatação (Customização) das colunas se faz cada vez mais necessária, e neste artigo veremos como podemos formatar estas colunas.

Propriedades do WebGrid

O webGrid possui uma ampla gama de propriedades para sua customização, porém necessitamos apenas de algumas para iniciar o uso do WebGrid:

Source – Fonte de dados.
DefaultSort – Campo a ser ordenado quando a tabela for gerada.
RowsPerPage – Linhas por página. Esta propriedade só funcionará se a paginação estiver ativa.
CanPage – Paginar ou não os dados.
CanSort – Ordenar ou não os dados. Posteriormente podemos dizer que uma coluna não poderá ser ordenada.

Sendo assim, um exemplo inicial da customização de uma WebGrid seria este:

   1: var gridItens = new WebGrid(source: Model,

   2:     defaultSort: "Title",

   3:     rowsPerPage: 15,

   4:     canPage: true,

   5:     canSort: true);

Até então nada de novo, porém, vamos começar pela propriedade “fieldNamePrefix”, que tem por finalidade adicionar um prefixo ao cabeçalho da WebGrid para ordenação e paginação.

FieldNamePrefix

A principio pode parecer sem muita utilidade, mas se pensarmos num contexto onde podemos ter UserControls com WebGrids, é importante definir um prefixo para os campos, já que a URL irá mudar (Ele usa método GET) e sendo assim os parâmetros podem ser confundidos.

Primeiro vamos ver como fica a URL quando ordenamos a WebGrid:

Note que ele utilizou o nome da coluna como parâmetro. No caso, seria interessante ter um prefixo informando pelo menos qual WebGrid está sendo ordenada, e é aí que entra o “fieldNamePrefix”, como demonstrado abaixo:

   1: var gridItens = new WebGrid(source: Model,

   2:     defaultSort: "Title",

   3:     rowsPerPage: 15,

   4:     canPage: true,

   5:     canSort: true,

   6:     fieldNamePrefix: "gridItens_");

Agora podemos notar que a URL não é mais a mesma na ordenação, e se olharmos o HTML, o mesmo também tem o prefixo “gridItens_” adicionado.

Se olharmos o código fonte, poderemos ver que o mesmo prefixo está presente lá:

PageFieldName

A propriedade PageFieldName serve para customizar o parâmetro do nome da página ao paginar os dados. É importante pelo mesmo motivo do FieldNamePrefix.

Se notarmos uma URL onde não temos o “pageFieldName” e uma que temos, podemos claramente ver a diferença.

   1: var gridItens = new WebGrid(source: Model,

   2:     defaultSort: "Title",

   3:     rowsPerPage: 5,

   4:     canPage: true,

   5:     canSort: true,

   6:     fieldNamePrefix: "gridItens_",

   7:     pageFieldName: "inside");

Sem PageFieldName

Com PageFieldName

Podemos ver que com PageFieldName identificamos de qual grid é a paginação.

SelectionFieldName

A propriedade selectionFieldName permite customizar o nome dado ao parâmetro referente a linha selecionada da WebGrid. Deste modo temos:

   1: var gridItens = new WebGrid(source: Model,

   2:     defaultSort: "Title",

   3:     rowsPerPage: 5,

   4:     canPage: true,

   5:     canSort: true,

   6:     fieldNamePrefix: "gridItens_",

   7:     pageFieldName: "inside",

   8:     selectionFieldName: "selectedRow");

Sem SelectionFieldName

Com SelectionFieldName

Note que ele combina o fieldNamePrefix com o selectionFieldName que customizamos.

Nota: O mesmo se aplica para os parâmetros SortFieldName e SortDirectionFieldName e sendo assim não abordarei os mesmos aqui.

Estilizando a Grid

Outro ponto forte do WebGrid é o poder de customização que ele tem, e tudo via CSS. Podemos atribuir estilos para a grid no geral, como cabeçalho e rodapé, ou posteriormente estilizar as células de cada linha da tabela.

Dentro do método GetHtml, podemos especificar então quais estilos o cabeçalho, rodapé e outros itens da grid vão utilizar. Veja o exemplo abaixo:

   1: gridItens.GetHtml(

   2:     tableStyle: "webgrid",

   3:     headerStyle: "webgrid-header",

   4:     footerStyle: "webgrid-footer",

   5:     alternatingRowStyle: "webgrid-alternating-row",

   6:     selectedRowStyle: "webgrid-selected-row",

   7:     rowStyle: "webgrid-row-style")

Desta forma, sem definir nenhum CSS ainda, temos a seguinte grid:

Porém, aplicando simples estilos (Somente CSS, sem imagens nem nada) podemos ter visuais mais ricos, como este:

O CSS utilizado para customizar esta WebGrid está abaixo.

   1: .webgrid

   2: {

   3:     width: 50%;

   4:     border: 0px;

   5:     border-collapse: collapse;

   6: }

7:

   8: .webgrid a

   9: {

  10:     color: #000;

  11: }

12:

  13: .webgrid-header

  14: {

  15:   padding: 6px 5px;

  16:   text-align: center;

  17:   background-color: #e8eef4;

  18:   border-bottom: 2px solid #3966A2;

  19:   height: 40px;

20:

  21:   border-top: 2px solid #D6E8FF;

  22:   border-left: 2px solid #D6E8FF;

  23:   border-right: 2px solid #D6E8FF;

  24: }

25:

  26: .webgrid-footer

  27: {

  28:   padding: 6px 5px;

  29:   text-align: center;

  30:   background-color: #e8eef4;

  31:   border-top: 2px solid #3966A2;

  32:   height: 30px;

33:

  34:   border-bottom: 2px solid #D6E8FF;

  35:   border-left: 2px solid #D6E8FF;

  36:   border-right: 2px solid #D6E8FF;

  37: }

38:

  39: .webgrid-alternating-row

  40: {

  41:     height: 30px;

  42:     background-color: #f2f2f2;

  43:     border-bottom: 1px solid #d2d2d2;

44:

  45:     border-left: 2px solid #D6E8FF;

  46:     border-right: 2px solid #D6E8FF;

  47: }

48:

  49: .webgrid-row-style

  50: {

  51:     height: 30px;

  52:     border-bottom: 1px solid #d2d2d2;

53:

  54:     border-left: 2px solid #D6E8FF;

  55:     border-right: 2px solid #D6E8FF;

  56: }

57:

  58: .webgrid-selected-row

  59: {

  60:     font-weight: bold;

  61:     background-color: #E3DFFF;

  62: }

Customizando as Colunas

Além de poder customizar a WebGrid de uma forma geral, podemos customizar o modo como as colunas serão visualizadas, incluindo seu conteúdo. O código abaixo mostra a criação de colunas no WebGrid.

   1: columns: gridItens.Columns(

2:

   3:     gridItens.Column(

   4:         columnName: "Title",

   5:         header: "Título",

   6:         style: "text-align-left"),

7:

   8:     gridItens.Column(

   9:         columnName: "Price",

  10:         header: "Preço",

  11:         style: "text-align-center",

  12:         format: (item) => string.Format("{0:C}", item.Price)),

13:

  14:     gridItens.Column(

  15:         columnName: "Quantity",

  16:         header: "Qtd em Estoque",

  17:         style: "text-align-center")

  18: )

Podemos notar que temos o nome da coluna, que se refere a propriedade do Model carregado (Neste exemplo utilizei uma lista de Product, sendo assim, o ColumnName se refere a propriedade do produto que queremos exibir, como Title, Price e Quantity).

O header identifica o cabeçalho e o style o estilo (Ligado ao CSS) da célula. Ainda temos a propriedade CanSort que permite ou não que uma coluna seja ordenada.

Por fim, temos a propriedade Format, que nos dá a flexibilidade de customizar o valor da coluna. No código acima por exemplo, formatamos o preço para o mesmo ser exibido com moeda.

O Format utiliza uma lambda expression para dinamicamente poder acessar as propriedades do item em questão. Show de bola =D.

Nas colunas onde o texto deve ser alinhado ao centro, temos a estilização via CSS (Pelo estilo “text-align-center”) para fazer isto.

Selecionando Registros

Ainda falando sobre o Format, algo que vim buscando esses dias foi a questão da seleção de uma linha da WebGrid, para assim poder manipular seus dados. Após várias buscas, descobri que pelo Format conseguimos criar uma coluna especial para seleção.

   1: gridItens.Column(

   2:     header:"",

   3:     style: "text-align-center",

   4:     format:(item) => item.GetSelectLink()),

Podemos notar que novamente temos uma lambda, só que desta vez chamamos o método GetSelectLink(), que está presente por padrão nos itens da WebGrid. Simples assim. E o resultado é este:

Com a linha selecionada, um novo leque de opções se abre, e podemos manipular os dados da WebGrid de forma fácil e tipada, pois o retorno da linha selecionada é um objeto do tipo do item (Que veio do Model – Neste caso um Product).

Abaixo o código para ler o produto selecionado:

   1: CustomWebGrid.Models.Product product = new CustomWebGrid.Models.Product();

2:

   3: if (gridItens.HasSelection)

   4: {

   5:     product = (CustomWebGrid.Models.Product)gridItens.Rows[gridItens.SelectedIndex].Value;

   6: }

   7: else

   8: {

   9:     product = (CustomWebGrid.Models.Product)gridItens.Rows[0].Value;

  10: }

Depois podemos exibir os dados na tela, já que temos um produto.

   1: <b>Título:</b> <%: product.Title %><br />

   2: <b>Preço:</b> <%: product.Price %><br />

   3: <b>Quantidade:</b> <%: product.Quantity %><br />

   4: <br />

E o resultado é este:

Bônus: Para exibir o total de registros, utilize a propriedade “gridItens.TotalRowCount”.

Conclusão

Neste artigos vimos como é fácil customizar uma WebGrid, e como ela dá uma cara nova às nossas aplicações. Temos propriedades para customizar praticamente toda a grid e ainda propriedades para interagir com ela.

Podemos esperar ainda mais melhorias nas próximas versões.

Até o próximo artigo!

Desenvolvimento - ASP. NET