Flexigrid: Grids estilizados no ASP.NET

Atualmente desenvolvedores web precisam ter em seus "cinturões de utilidades" boas ferramentas que agilizam algumas tarefas complicadas e ainda complementam com telas bonitas e com bastante performance. Os plugins em jQuery são, de fato, a melhor forma para que atingirmos essa necessidade. São diversas ferramentas que nos dão o poder de criar complexos elementos HTML, utilizando até mesmo requisições assíncronas com JSON de forma simplesmente declarativa.

Um plugin conceituado e bem sólido é o Flexigrid, puramente feito em jQuery. Possui diversas características como colunas autoajustáveis, cabeçalho com ordenação dos dados de forma alfabética ou numérica, entre outras características interessantes.

O flexigrid possuí diversos temas bastante elegantes e bem fáceis de utilizar. Além disso, vale ressaltar que a paginação é completamente assíncrona, não necessitando dar todo um postback na tela para renderizar novamente, apenas uma parte da tela, como é feito pelo gridview padrão do ASP.NET, evitando ainda aquela viewstate gigantesca.

Ele é compatível com todos os browsers do mercado e nas suas versões mais remotas, graças a contribuição de diversos desenvolvedores e pela comunidade que reportam bugs.

Um de seus defeitos ainda é a falta da possibilidade de tornar o gridview responsivo, uma necessidade corriqueira e atual, facilitando o acesso das páginas por clientes web, não sendo algo de todo ruim, mas é uma opção muito elegante para nossas telas.

O código fonte do plugin está disponível no github. Com isso, além de utilizarmos algo pronto, temos a possibilidade de editar conforme nossas vontades e necessidades.

Agora vamos criar nossa aplicação web e trabalhar com webforms num exemplo bem simples. Inicialmente, vamos baixar o projeto do Flexigrid direto do github. Para isso, faça um clone ou o download mesmo em Flexigrid

Feito isso copie as pastas CSS e JS e inclua no projeto conforme sua vontade.

Vamos iniciar criando nossa classe de domínio para dar identidade aos dados que irão retornar. Vamos chamá-la de Livro, conforme mostra a Listagem 1.

public class Livro
 {
      public int Codigo { get; set; }
      public string Titulo { get; set; }
      public string ISBN { get; set; }
      public int Paginas { get; set; }
      public string Editora { get; set; }
 }

Com o nosso domínio definido, vamos criar o nosso serviço para a busca dos dados. Para simplificar essa parte, vamos criar um método web dentro do aspx.cs.

Esta parte pode ser (deve ser) substituída por um webservice, web api , handler ou qualquer outra forma que você conheça e que retorne uma fonte Json, podendo ser uma página PHP, ASP (a decisão cabe dentro de qualquer cenário, mesmo estando programando uma página ASP.NET).

Segue implementação do método web na Listagem 2.

[WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public string FindAllBooks()
 {
  LivroService _service = new LivroService();
  JavaScriptSerializer _jss = new JavaScriptSerializer();
  var livros = _service.FindAll();
  return _jss.Serialize(livros);
 }

O método acima simplesmente chama o nosso service responsável por retornar todos os itens de livros em uma list. Em seguida, no retorno serializamos essa lista com a classe JavaScriptSerializer e retornamos apenas um string para o flexigrid.

Vamos declarar nosso repositório local, conforme a Listagem 3.

public class LivroRepository
 {
  protected IList<Livro> Livros
  {
    get
    {
     return new List<Livro>
     {
       new Livro {Codigo = 1,Editora = "Pearson",ISBN = 
       "978-85-7566-565-5",Paginas = 220,Titulo = "NOSQL"},
       new Livro {Codigo = 2,Editora = "Pearson",ISBN = 
       "978-85-7566-565-5",Paginas = 220,Titulo = "NOSQL"},
       new Livro {Codigo = 3,Editora = "Pearson",ISBN = 
       "978-85-7566-565-5",Paginas = 220,Titulo = "NOSQL"},
       new Livro {Codigo = 4,Editora = "Pearson",ISBN = 
       "978-85-7566-565-5",Paginas = 220,Titulo = "NOSQL"}
     };
    }
  }
  public IList<Livro> FindAll()
  {
   return Livros;
  }
}

Com o serviço pronto, o próximo passo é definir nosso front-end, porém, vamos primeiro aprender algumas características.

Para iniciar o flexigrid, além de chamar os objetos na tela, devemos chamar o comando da Listagem 4.

$(‘selector’).flexigrid();

Existem algumas opções dentro do plugin, como:

• Height: px
• Striped: true/false
• userpager: true/false
• title: text
• sortorder: ‘asc’/’desc’
• colModel: [{options: value}]

É possível inabilitar algumas colunas por padrão, aplicar filtro por padrão, entre outras necessidades, de forma fácil e declarativa, como podemos ver na Figura 1.

Entendido algumas particularidades deste plugin, definiremos o layout consumindo o serviço web definido anteriormente, conforme mostra a Listagem 5.

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Flex Demo</title>
   <script src="Scripts/jquery-1.8.2.min.js" 
   type="text/javascript"></script>
   <link rel="Stylesheet" href="css/flexigrid.css" />
   <link rel="Stylesheet" href="css/flexigrid.pack.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/
   jquery/1.8.3/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/
   jqueryui/1.9.2/jquery-ui.min.js"></script>
   <script type="text/javascript" src="js/flexigrid.js"></script>
   <script type="text/javascript" src="js/flexigrid.pack.js"></script>
   <link rel="stylesheet" 
   href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/
   themes/base/jquery-ui.css" />
</head>
<body>
   <form runat="server">
       <div>
           <table id="Table" runat="server"></table>
       </div>
   </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
        var obj;
        $.ajax({
           type: "post",
           contentType: "application/json; charset=utf-8",
           url: "Default.aspx/FindAllBooks",
           dataType: 'json',
           success: function (result) {
               obj = $.parseJSON(result.d);
               $("#Table").flexAddData(formatData(obj));
           },
           error: function (x, y, z) {alert(x); }
       });
        $("#Table").flexigrid({
           dataType: 'json',
           colModel: [
           { display: 'Codigo' },
           { display: 'Titulo' },
           { display: 'ISBN' },
           { display: 'Paginas' },
           { display: 'Editora' }
           ],
            searchitems: [{
               display: 'ID',
               name: 'Codigo'
           }, {
               display: 'First Name',
               name: 'Name',
               isdefault: true
           }],
           sortname: "Codigo",
           sortorder: "asc"
       });
       function formatData(books) {
           var rows = Array()
           for (i = 0; i < books.length; i++) {
               var item = books[i];
               rows.push({
                   cell: [item.Codigo,
                          item.Titulo,
                          item.ISBN,
                          item.Paginas,
                          item.Editora]
               });
           }
            return {
               total: books.length,
               page: 1,
               rows: rows
           };
       }
   });
</script>
</html>

Veja que já temos um gridview simples e com ótima aparência, com possibilidade para o usuário ocultar as colunas que ele deseja, assim como redimensionar as colunas, ordenar e tudo mais.

Detalhando as colunas do grid, conforme a Listagem 6 a seguir, podemos aperfeiçoar as colunas.

colModel: [
 { display: 'Codigo' },
 { display: 'Titulo' },
 { display: 'ISBN' },
 { display: 'Paginas' },
 { display: 'Editora' }
]

Vamos incluir outras opções nas colunas, deixando a declaração da mesma forma que na Listagem 7.

colModel: [
 {display: '#', name : 'Codigo', width : 40, sortable : true, align: 'center'},
 { display: 'Titulo' },
 { display: 'ISBN' },
 { display: 'Paginas' },
 { display: 'Editora' }
]

Assim melhora ainda mais a experiência com as possibilidade desse plugin. Existe a opção para limitar a largura, altura e habilitar a paginação do gridview, tudo isso facilmente incluído com poucas linhas de comando. Veja que incluímos também opção de botão para adicionar ou remover informações do grid, ficando elegante e totalmente “client-side”, evitando o famigerado postback, conforme mostra a Listagem 8.

buttons: [
  { name: 'Adicionar', bclass: 'add', onpress: function () { } },
  { name: 'Editar', bclass: 'edit', onpress: function () { } },
  { name: 'Deletar', bclass: 'delete', onpress: function () { } },
  { separator: true }
],
sortname: "Codigo",
sortorder: "asc",
usepager: true,
title: 'Livros',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200

Por ser um plugin que gera todo o HTML para o cliente, nós podemos editar cores, fontes, sizes conforme desejamos utilizando CSS.

Por exemplo, podemos incluir ícones nos botões de adicionar, editar e excluir, trazendo maior elegância. Para isso segue o código da Listagem 9.

.flexigrid div.fbutton .add {
     background: url(images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete {
     background: url(images/close.png) no-repeat center left;
}
.flexigrid div.fbutton .edit {
     background: url(images/alterarb.gif) no-repeat center left;
}

O flexigrid é uma grande ferramenta, uma ótima opção para se livrar do gridview e melhorar a performance na apresentação dos dados em gridview.

Espero que todos aproveitem as informações e sigam os estudos sobre a ferramenta, qualquer dúvida ou problema está à disposição.