DClick

Filtros Customizados para o DataGrid


O comprometimento da DClick com a comunidade Flex é cada vez maior. Muitas pessoas que fazem parte do time estão participando ativamente da lista FlexDev e o blog da DClick têm apresentado artigos sobre Flex e RIA com boa freqüência. Neste novo post a DClick disponibiliza mais um componente.

O DataGrid Filter, como o próprio nome diz, permite aplicar filtros para o DataGrid pela coluna. Veja um exemplo do DataGrid filter usando os filtros padrão.

Botão Direito -> View Source, para ver e baixar o código dos exemplos.



Mas o interessante deste componente é a sua flexibilidade ao permitir a criação de filtros customizados, afinal de contas os Filtros Padrão como você pode observar são limitados. No exemplo abaixo um “FilterRenderer” customizado é usado para filtrar os dados de uma forma diferente.

Botão Direito -> View Source, para ver e baixar o código dos exemplos.



O filtro da primeira coluna deste exemplo filtra os itens que começam com um determinado texto informado pelo usuário. É fácil ver que se trata de um filtro totalmente diferente dos filtros padrão do exemplo anterior. Agora, vamos analisar o código para ver como este filtro customizado foi criado.

PLAIN TEXT
CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FilterRendererBase xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="br.com.dclick.controls.*"
  3.     creationComplete="creationCompleteHandler()"
  4.     paddingTop="0" paddingBottom="0" paddingLeft="0"
  5.     paddingRight="0" direction="vertical">
  6.    
  7.     <mx:Script>
  8.         <![CDATA[
  9.        
  10.             private function creationCompleteHandler():void
  11.             {
  12.                 tiContem.setFocus();
  13.             }
  14.        
  15.             override public function onFilter(item:Object, itemLabelField:String):Boolean
  16.             {
  17.                 var displayItem:Boolean = false;
  18.                
  19.                 var textToDisplay:String = tiContem.text;
  20.                
  21.                 if (caseSensitive.selected)
  22.                 {
  23.                     displayItem = itemLabelField.substr(0, textToDisplay.length) == textToDisplay;
  24.                 }
  25.                 else
  26.                 {
  27.                     displayItem = itemLabelField.substr(0, textToDisplay.length).toLowerCase() == textToDisplay.toLowerCase();
  28.                 }
  29.                
  30.                 return displayItem;
  31.             }
  32.            
  33.         ]]>
  34.     </mx:Script>
  35.  
  36.     <mx:Form>
  37.         <mx:FormItem>
  38.             <mx:CheckBox id="caseSensitive" label="Case Sensitive" selected="false"/>
  39.         </mx:FormItem>
  40.         <mx:FormItem label="Começa com:">
  41.             <mx:TextInput id="tiContem" enter="filter()"/> 
  42.         </mx:FormItem>
  43.         <mx:FormItem>
  44.             <mx:Button label="OK" click="filter()" enabled="{tiContem.text != ''}"/>
  45.         </mx:FormItem>
  46.     </mx:Form>
  47.    
  48. </FilterRendererBase>

BeginWithFilterRenderer.mxml

A classe “FilterRendererBase” é a tag raiz do componente, o que quer dizer que os filtros customizados devem herdar desta classe. Observe que o método “filter()” é chamado no evento “click” do botão “ok” e no evento “enter” do “textInput”. Este método está implementado na classe “FilterRendererBase” e sua responsabilidade é instruir o DataGridFilter a filtrar os itens. Por ultimo, observe que o método “onFilter” é redefinido. Este método é responsável por definir como cada linha do DataGrid deverá ser filtrada. Ou seja, para cada linha do DataGrid o método “onFilter” será chamado passando o item da linha corrente como parâmetro. Se este método retornar “true” a linha será mostrada; senão a linha será oculta.

Depois de criado o componente é utilizado como um "filterRenderer" pela "DataGridColumnFilter" como mostra o trecho de código abaixo:

PLAIN TEXT
CODE:
  1. <dc:DataGridFilter width="280" height="250" dataProvider="{myData}">
  2.     <dc:columns>
  3.         <dc:DataGridColumnFilter headerText="Name" dataField="name" filterRenderer="BeginWithFilterRenderer"/>
  4.         <mx:DataGridColumn headerText="Birth" dataField="birth" labelFunction="birthLabelFunction" width="90"/>
  5.         <dc:DataGridColumnFilter headerText="Age" dataField="age" filterRenderer="RelacionalFilterRenderer" width="70"/>
  6.     </dc:columns>
  7. </dc:DataGridFilter>

Em resumo, para criar um filtro customizado basta o programador seguir os seguintes passos:

1. Criar um "filter renderer" customizado que herda da classe “FilterRendererBase”
2. Invocar o método “filter” no momento desejado de acordo com a interação do usuário
3. Implementar o método “onFilter”
4. Usar o "filter renderer" na coluna que deseja

Por Beck Novaes em 18/June/2007 | Comentar | Trackback


No Translations

19 comentários para “Filtros Customizados para o DataGrid”


Prezados Senhores,

Estou estudando sobre o flex e vi o artigo no blog sobre “FILTROS CUSTOMIZADOS PARA O DATAGRID.

Baixei em computador mais so que não rodou. Não aparece nenhuma mensagem.

Mais so quando eu clico em filtrar (icone) não aparece nada.

Voce poderia me ajudar nessa agradeço.

Por Pedro Alexandre em 26/June/2007 às 18:05.


Olá Pedro,

Se você criar um novo projeto Flex Básico, importar estes arquivos para dentro do projeto e executar o “CustomFilters.mxml” deverá funcinonar. Acabei de fazer isto e funcionou.

[]’s

Por Beck Novaes em 27/June/2007 às 22:02.


Ola valew pela dica.
Como seria a configuração do “viewSourceURL”;
O projeto esta criado no c:/web/filtros/…

Por Pedro Alexandre em 28/June/2007 às 22:19.


Beck, a partir deste blog, tive uma idéia muito legal. Podemos adptar esta idéia de desfazer busca no componente do CRUD que você desenvolveu. Funcionaria da seguinte forma, ao realizar a busca, ao lado do botão fechar aparece aquele botão de desfazer busca (com ícone de seta de retorno) sinalizando para o usuário que ele pode desfazer a busca, e essa ação (undoFilterAction) estaria mapeada de forma que poderíamos colocar um método para informamos o que seria feito caso o evento de click do botão desfazer fosse ouvido pelo sistema, assim como acontece com os outras ações mapeadas pelo CRUD, como createAction, deleteAction, updateAction etc.
O que você acha da sugestão?
Grande abraço.

Por Karlos Gustavo em 12/July/2007 às 10:12.


Olá Karlos,

Creio que você esteja sugerindo usar, basicamente, o ícone “de seta de retorno” para limpar os filtros assim como eu limpo no caso deste exemplo. Se é isso mesmo eu achei a idéia bem interessante.

[]’s

Por Beck Novaes em 12/July/2007 às 15:00.


Alguem pode me informar como posso uasr isso tentei ak mas sem sucesso.

Grato.

Por Marcelo em 6/November/2007 às 13:54.


Muito bom e fácil de usar… criei rapidinho + um tipo de filtro:

Por Ricardo Ramires em 29/January/2008 às 12:37.


[...] Filtros Customizados para o DataGrid Por que ele é relevante: Disponibiliza um componente útil para a comunidade A quem se destina: [...]

Por DClick Blog em 10/March/2008 às 1:35.


Muito bom!
Baixei, configurei e em 5min corri pro abraço \o/
Mão na roda!!
Abraço!

Por Daniel Pedrinha Georgii em 11/March/2008 às 12:06.


Gostaria de saber se alguem já conseguiu fazer um filtro que não estivesse no datagrid, ou seja, um TextInput abaixo do datagrid utilizando o evento “enter” ou “change” para filtrar.

Por Anderson em 14/March/2008 às 19:53.


Olá Anderson,

Infelizmente essa implementação não contempla tal funcionalidade. Embora eu ecredite que seja possível usar o mesmo código e adaptá-lo para conseguir isto. Se você quer um ponto de partida para a sua implementação dê uma pesquisada na propriedade filterFunction do ArrayCollection na documentação do Flex.

Por Beck Novaes em 15/March/2008 às 10:14.


Ótimo componente! Funcionou blz no meu projeto, porém quando migrei para o flex 3 não rolou!
Gostaria de saber se mais alguém teve problemas com esse componente no flex 3 e, se sim, existe uma possibilidade dele ser atualizado para funcionar nesta versão tb?

Abraços,

Por Wesley em 19/March/2008 às 11:42.


Beck, testei o filtro para mostra os dados que vem do cfc que funciona e que também filtra mas só depois que aparece esse erro ai:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Main/populateFormHandler()[C:\CFusionMX7\wwwroot\Test2\src\Main.mxml:127]
at Main/__dgListagem_click()[C:\CFusionMX7\wwwroot\Test2\src\Main.mxml:219]

obs: O erro só ocorre quando o datagrid usa click=”populateFormHandler()” para serem atualizados em um form.

Parabéns pelo conhecimento e se puder me ajudar eu agradeço.

/* função utilizada para preencher o form de atualização conforme o registro selecionado no datagrid */
private function populateFormHandler():void
{
updID.text=dgListagem.selectedItem.cod_user;
updName.text=dgListagem.selectedItem.name_user;
updLogin.text=dgListagem.selectedItem.login_user;
updPass.text=dgListagem.selectedItem.pass_user;
updEmail.text=dgListagem.selectedItem.email_user;
updText.text=dgListagem.selectedItem.text_user;
updRole.text = dgListagem.selectedItem.role_user;
}

————————————————————————————————————————–

Por Marcel Pereira em 31/March/2008 às 15:47.


Beck, testei o filtro para mostra os dados que vem do cfc que funciona e que também filtra mas só depois que aparece esse erro ai:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Main/populateFormHandler()[C:\CFusionMX7\wwwroot\Test2\src\Main.mxml:127]
at Main/__dgListagem_click()[C:\CFusionMX7\wwwroot\Test2\src\Main.mxml:219]

obs: O erro só ocorre quando o datagrid usa click=”populateFormHandler()” para serem atualizados em um form.

Parabéns pelo conhecimento e se puder me ajudar eu agradeço.

/* função utilizada para preencher o form de atualização conforme o registro selecionado no datagrid */
private function populateFormHandler():void
{
updID.text=dgListagem.selectedItem.cod_user;
updName.text=dgListagem.selectedItem.name_user;
updLogin.text=dgListagem.selectedItem.login_user;
updPass.text=dgListagem.selectedItem.pass_user;
updEmail.text=dgListagem.selectedItem.email_user;
updText.text=dgListagem.selectedItem.text_user;
updRole.text = dgListagem.selectedItem.role_user;
}

————————————————————————————————————————–

Por Marcel R. Pereira em 31/March/2008 às 15:50.


Bem… o problema foi resolvido com if null…

[]’s
Beck Novaes

Por Beck Novaes em 16/April/2008 às 10:25.


cara naum funcina disponibiliza os fonte.. sem sucessoo

Por Naum funciona em 2/July/2008 às 20:33.


O fonte já está disponibilizado. Botão Direito -> View Source.

Por Beck Novaes em 7/July/2008 às 8:56.


queria saber como faço para utilizar este componente no Flex3

Por thianolima em 29/July/2008 às 17:23.


Olá, estou utilizando este componente, porém tive problemas na seguinte situação: criei um AdvancedDataGridFilter, que é criado por ActionScript. Setei em mxml

Desta maneira corrigi o problema de qndo movesse a ScrollBar deste DataGrid ele piscava o HeaderText. Porém gerou outro problema, que é o popUp do filtro não abre em posições corretas. Alguem poderia me dar uma dica??

Por Romulo em 13/August/2008 às 17:11.

Adicionar comentário

(requerido)
(requerido, não será publicado)