A Velha história da DataGrid, ItemRenderer e RadioButton...

[HideLine]

Olá,

Sempre que uso ItemRender em uma DataGrid com componentes de ação,
tenho problemas em manter o estado, deste componente dentro da
DataGrid.

Ex:

http://forum.flexbrasil.com.br/viewtopic.php?f=3&t=187

Se alguém já achou uma solução, por favor post aki e lá para o
rdaraujo!

Obrigado.

[Beck Novaes]

Problemas com Item Renderers ou Item Editors? O seu Item Renderer/
Editor não mantêm o estado? O seu Item Renderer/Editor não muda o
valor do item da linha correspondente?

SEUS PROBLEMAS ACABARAM!
Ligue 011 1406 e peça já o "editorDataField".

O "editorDataField " é testado e aprovado pelos Laboratórios Adobe e
nós garantimos: Ele funciona!

Caso Real (exemplo que não funciona):
============================

<mx:DataGrid>
<mx:dataProvider>
<mx:Object col1="Col 1.1 Data" col2="Col 1.2 Data" selected="false"/
>
<mx:Object col1="Col 2.1 Data" col2="Col 2.2 Data" selected="true"/>
<mx:Object col1="Col 3.1 Data" col2="Col 3.2 Data" selected="false"/
>
<mx:Object col1="Col 4.1 Data" col2="Col 4.2 Data" selected="false"/
>
<mx:Object col1="Col 5.1 Data" col2="Col 5.2 Data" selected="false"/
>
<mx:Object col1="Col 6.1 Data" col2="Col 6.2 Data" selected="false"/
>
<mx:Object col1="Col 7.1 Data" col2="Col 7.2 Data" selected="false"/
>
<mx:Object col1="Col 8.1 Data" col2="Col 8.2 Data" selected="false"/
>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="col1" headerText="Col 1"/>
<mx:DataGridColumn dataField="col2" headerText="Col 2"/>
<mx:DataGridColumn dataField="selected" headerText="Selected">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.selected}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>


Depoimento de um programador Flex:
===========================
"Eu desenvolvi o código acima, mas ao executá-lo, toda vez que eu
marco um CheckBox na ultima linha do DataGrid e faço scroll ele perde
o estado."

Outro programador:
==============
"Eu também já vi algo parecido, e ao ver o valor dos objetos eu
percebi que eles não estavam sendo atualizados conforme eu marcava o
CheckBox."


Não se preocupem. Estes são casos comuns. Mas veja como o super
"editorDataField" pode resolver o seu problema:


Caso Real (exemplo que funciona):
=========================
<mx:DataGrid editable="true">
<mx:dataProvider>
<mx:Object col1="Col 1.1 Data" col2="Col 1.2 Data" selected="false"/
>
<mx:Object col1="Col 2.1 Data" col2="Col 2.2 Data" selected="true"/>
<mx:Object col1="Col 3.1 Data" col2="Col 3.2 Data" selected="false"/
>
<mx:Object col1="Col 4.1 Data" col2="Col 4.2 Data" selected="false"/
>
<mx:Object col1="Col 5.1 Data" col2="Col 5.2 Data" selected="false"/
>
<mx:Object col1="Col 6.1 Data" col2="Col 6.2 Data" selected="false"/
>
<mx:Object col1="Col 7.1 Data" col2="Col 7.2 Data" selected="false"/
>
<mx:Object col1="Col 8.1 Data" col2="Col 8.2 Data" selected="false"/
>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="col1" headerText="Col 1"
editable="false"/>
<mx:DataGridColumn dataField="col2" headerText="Col 2"
editable="false"/>
<mx:DataGridColumn dataField="selected" headerText="Selected"
rendererIsEditor="true" editorDataField="selected">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.selected}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

Depoimento de um programador Flex:
===========================
"Incrível! Depois de usar o super ultra plus 'editorDataField' os meus
problemas acabaram. Agora eu posso fazer scroll a vontade e tudo
funciona perfeitamente".

Outro programador:
==============
"Depois de usar o 'editorDataField' a minha vida mudou completamente.
Agora os objetos são atualizados corretamente e eu não preciso ficar
trabalhando até mais tarde para resolver o meu problema. A minha
esposa ficou bastante feliz com isso".


O "editorDataField" age diretamente no problema porque ele permite
informar qual propriedade do "itemRenderer/editor" será usada para
atualizar o item (linha do DataGrid). Sem isso, a propriedade default
será usada e uma vez que a propriedade default é "text", se você
estiver usando um ComboBox, RadioButton ou CheckBox isso não vai
funcionar. Por isso, quando você usa um CheckBox, por exemplo, e diz
que o "editorDataField" é "selectedItem" o DataGrid pegará o valor
desta propriedade para atualizar a propriedade descrita pelo
"dataField" do seu DataGridColumn.

MAS NÃO É SÓ ISSO. Para usar o "editorDataField" com um "itemRenderer"
você deve usar também a propriedade "rendererIsEditor" do seu
"DataGridColumn".

MAS NÃO É SÓ ISSO. Para usar o "editorDataField" você precisa usar
também a propriedade "editable" do seu DataGrid.

MAS NÃO É SÓ ISSO. Uma vez que você provavelmente não vai querer que
todas as colunas sejam editáveis você deve usar também a propriedade
"editable" de cada DataGridColumn.


"editorDataField". Ligue para 011 1406 e peça já o seu!

ATENÇÃO: Consulte também o manual do fabricante:
http://livedocs.adobe.com/labs/flex3/html/help.html?content=cellrenderer_1.html


P.S.: Pessoal, desculpem a brincadeira, mas essa foi uma maneira que
eu encontrei (adicionando um toque de humor) de deixar isto na
"memória" das pessoas uma vez que este é um dos problemas mais
recorrentes do Flex que eu já vi até hoje.

[Marcelo Savioli]

Hahahahaha... muito bom Beck.. muito bom!

--
Marcelo Curi Savioli
D-Click Web & Mobile Solutions
marcelo...@dclick.com.br
www.dclick.com.br/blog
www.dclick.com.br

[Rafael D. Araujo]

Hehe, gostei da resposta.
Cheguei a usar o editorDataField, mas descartei-o porque (acho) ele procurava a propriedade informada no editorDataField dentro do componente filho logo abaixo do mx:component, no meu caso dentro do VBox (e com isso dava um null por não achar a propriedade nele).
Segunda-feira vou analisar melhor meu caso pra ver o que posso fazer.

--
Atenciosamente,
Rafael D. Araujo

[Beck Novaes]

Muito obrigado Rafael por ter entendido o espírito da brincadeira.
Sinceramente eu gostaria que as pessoas, além de aproveitar a
informação, dessem boas risadas com a explicação (se é que fui bem
sucedido no que diz respeito à didática). Quem disse que não podemos
nos divertir enquanto aprendemos?

[]'s
Beck Novaes

On 22 fev, 20:44, "Rafael D. Araujo" <rdara...@gmail.com> wrote:
> Hehe, gostei da resposta.
> Cheguei a usar o editorDataField, mas descartei-o porque (acho) ele
> procurava a propriedade informada no editorDataField dentro do componente
> filho logo abaixo do mx:component, no meu caso dentro do VBox (e com isso
> dava um null por não achar a propriedade nele).
> Segunda-feira vou analisar melhor meu caso pra ver o que posso fazer.
>

> On 22/02/2008, Marcelo Savioli <marcelo.savi...@dclick.com.br> wrote:
>
>
>
>
>
> > Hahahahaha... muito bom Beck.. muito bom!
>

> > >http://livedocs.adobe.com/labs/flex3/html/help.html?content=cellrende...

>
> > > P.S.: Pessoal, desculpem a brincadeira, mas essa foi uma maneira que
> > > eu encontrei (adicionando um toque de humor) de deixar isto na
> > > "memória" das pessoas uma vez que este é um dos problemas mais
> > > recorrentes do Flex que eu já vi até hoje.
>
> > > On Feb 22, 4:40 pm, HideLine <IPra...@gmail.com> wrote:
> > > > Olá,
>
> > > > Sempre que uso ItemRender em uma DataGrid com componentes de ação,
> > > > tenho problemas em manter o estado, deste componente dentro da
> > > > DataGrid.
>
> > > > Ex:
>
> > > >http://forum.flexbrasil.com.br/viewtopic.php?f=3&t=187
>
> > > > Se alguém já achou uma solução, por favor post aki e lá para o
> > > > rdaraujo!
>
> > > > Obrigado.
>
> > > --
> > > Marcelo Curi Savioli
> > > D-Click Web & Mobile Solutions

> > > marcelo.savi...@dclick.com.br

[Elvis Fernandes]

Olá, pessoal!

Aproveitando a carona neste tópico, gostaria de pedir uma ajuda:

Usando as dicas do Beck (editorDataField, editable p/ o DG, etc)
consegui criar meu itemEditor do jeito que eu precisava (valeu,
Beck!). Só que o problema é que, depois de atualizar o valor do objeto
"data", ele não é mostrado no DataGrid até que ele perca o foco...

Eu pensei em mudar o foco para outro componente em uma função externa
ao itemRenderer que é chamada na minha aplicação (tenho um botão no
meu itemRenderer), mas gostaria de saber se não existe uma solução
menos "POG" pra isso ...

Tentei usar dg.invalidateDisplayList e outras coisas do tipo, mas não
deu (sem dúvida tentei fazer qquer besteira ...).

Valeu!!!!!

Elvis Fernandes

[Beck Novaes]

Olá Elvis,

Será que você conseguiria isolar este comportamente num exemplinho
simples?

[]'s
Beck Novaes

[Elvis Fernandes]

Imaginei que não ia conseguir explicar o problema sem o exemplo ... rs ...

Logo abaixo está um exemplo simplificado. Percebi que sempre que usamos um itemEditor num DataGrid, após a modificação do valor, ele só é "efetivado" no objeto "data" quando o foco sai da linha do DataGrid ... esse é o meu problema ... após clicar no botão, ele precisa automagicamente mudar o valor de uma propriedade do objeto "data", que é o que define o status desse próprio botão ...

Pra resolver isso, eu mudo o foco para o próprio DG, aí ele atualiza o "data" ... mas se eu clicar em um botão e logo em seguida clicar em outro botão de outra linha, ele não atualiza o status do segundo botão clicado ...

Se vocês puderem me indicar uma solução menos "POG", ficarei muito agradecido! =)

Valeu!!!!!!!!!!!!

<mx:Canvas .............>

    <mx:Script>
        <![CDATA[
            public function _ligar():void {
                //Alguma ação
                meuDG.setFocus();
            }
           
            public function _desligar():void {
                //Alguma ação
            }
        ]]>
    </mx:Script>

    <mx:Component id="botoesOpcoes">
        <mx:HBox>
            <mx:Script>
                <![CDATA[
                    [Bindable]
                    public var status:Boolean;
                   
                    private function ligar():void {
                        status = true;
                        outerDocument._ligar();
                    }
                   
                    private function desligar():void {
                        outerDocument._desligar();
                    }
                ]]>
            </mx:Script>
            <mx:Button id="btnLigar" enabled="{!data.mostrar}" label="Ligar" click="{ligar()}"/>
            <mx:Button id="btnDesligar" enabled="{!data.mostrar}" label="Desligar" click="{desligar()}"/>
        </mx:HBox>
    </mx:Component>

    <mx:Canvas width="100%" height="100%">
        <mx:DataGrid id="meuDG"
            dataProvider="{dataProvider}"
            editable="true">
            <mx:columns>
                <mx:AlgumasColunas ...... />
                <mx:DataGridColumn headerText="Opções" dataField="mostrar" itemRenderer="{botoesOpcoes}" editorDataField="status" rendererIsEditor="true" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>
</mx:Canvas>

2008/2/25 Beck Novaes <beck....@gmail.com>:

[Fabio Goll]

POG??

 

Tirar o editorDataField e troca isso:

 

status = true;

por:

 

super.data.mostrar = true;

 

super.data é o seu dataProvider, então você força a atualização do dataProvider e não

fica dependendo de editor, etc.

 

[]s

Fábio

---

De: fle...@googlegroups.com [mailto:fle...@googlegroups.com] Em nome de Elvis Fernandes
Enviada em: segunda-feira, 25 de fevereiro de 2008 11:22
Para: fle...@googlegroups.com
Assunto: [QUAR][flexdev] Re: A Velha história da DataGrid, ItemRenderer e RadioButton...
Prioridade: Baixa

[Beck Novaes]

Este é realmente um comportamente estranho. Mas nada que um Work
Around com bons nomes de métodos não resolva:

<mx:Component>

<mx:HBox>
<mx:Script>
<![CDATA[
[Bindable]
public var status:Boolean;

private function onClickHandler(event:MouseEvent):void
{
turnOn();
}

private function offClickHandler(event:MouseEvent):void
{
turnOff();
}

private function turnOn():void
{
status = data.show = true;
updateButtonState();
}

private function turnOff():void
{
status = data.show = false;
updateButtonState();
}

private function updateButtonState():void
{
data = data;
}
]]>
</mx:Script>
<mx:Button label="On" enabled="{data.show}"
click="onClickHandler(event)"/>
<mx:Button label="Off" enabled="{data.show}"
click="offClickHandler(event)"/>
</mx:HBox>
</mx:Component>

[]'s
Beck Novaes



On Feb 25, 9:21 am, "Elvis Fernandes" <elvisfernan...@gmail.com>
wrote:

> 2008/2/25 Beck Novaes <beck.nov...@gmail.com>:

> ...
>
> read more »

[Elvis Fernandes]

Fábio,

Eu fiz o q vc falou, não deu certo não ... aparecia uma msg de erro dizendo que não havia encontrado a propriedade text e que não havia um valor padrão ... eu criei a propriedade, mas não deu ... mas foi muito bom saber desse super.data ... vai me ajudar em outra parte do projeto! Valeu!

Beck,

Por incresça que parível ... funcionou! E o pior foi que só funcionou por causa do "data = data" ...
Desculpe a amolação, mas vc poderia indicar algum link que explique isso? Ou se vc puder dar uma explicaçãozinha rápida ...
Eu nunca iria imaginar uma coisa dessas ... não sei pq, mas funcionou ...

Valeu, turma, e desculpem o incômodo!

Abraço!

Elvis Fernandes

2008/2/25 Beck Novaes <beck....@gmail.com>:

[Beck Novaes]

Que incômodo que nada.Você tinha um problema real e é sempre um prazer
ajudar.

Bem, como eu sei que quando você seleciona um item no DataGrid ele
atualiza a propriedade "data" do "itemRenderer" eu imaginei que se eu
forçasse isso eu não precisaria fazer mais nada, como forçar a mudança
do item selecionado ou fazer o negócio do foco como você fez - e
calhou da minha hipotese estar certa. De qualquer forma todas as
soluções são Work Around. Nem sempre é possível fugir disso. O mais
importante nestes casos é deixarmos claro o que estamos fazendo e eu
creio que isso é feito no meu exemplo pelo nome dos métodos.

[]'s
Beck Novaes



On Feb 25, 8:25 pm, "Elvis Fernandes" <elvisfernan...@gmail.com>
wrote:

> Fábio,
>
> Eu fiz o q vc falou, não deu certo não ... aparecia uma msg de erro dizendo
> que não havia encontrado a propriedade text e que não havia um valor padrão
> ... eu criei a propriedade, mas não deu ... mas foi muito bom saber desse
> super.data ... vai me ajudar em outra parte do projeto! Valeu!
>
> Beck,
>
> Por incresça que parível ... funcionou! E o pior foi que só funcionou por
> causa do "data = data" ...
> Desculpe a amolação, mas vc poderia indicar algum link que explique isso? Ou
> se vc puder dar uma explicaçãozinha rápida ...
> Eu nunca iria imaginar uma coisa dessas ... não sei pq, mas funcionou ...
>
> Valeu, turma, e desculpem o incômodo!
>
> Abraço!
>
> Elvis Fernandes
>

> 2008/2/25 Beck Novaes <beck.nov...@gmail.com>:

> ...
>
> read more »

[Elvis Fernandes]

Muito boa, cara ... vivendo e aprendendo ... hehehe  ...

Obrigado!!!

Elvis

2008/2/26 Beck Novaes <beck....@gmail.com>:

[Beck Novaes]

Só para ficar registrado. O meu post foi publicado no blog da DClick:
http://blog.dclick.com.br/2008/02/24/problemas-com-item-renderers-ou-item-editors/

Lá eu pude formatar melhor o texto e usar algumas imagens para
facilitar o entendimento.

[]'s
Beck Novaes

On Feb 26, 4:59 am, "Elvis Fernandes" <elvisfernan...@gmail.com>
wrote:

> Muito boa, cara ... vivendo e aprendendo ... hehehe ...
>
> Obrigado!!!
>
> Elvis
>

> 2008/2/26 Beck Novaes <beck.nov...@gmail.com>:

> ...
>
> read more »

[Andre Caetano]

Legal isso, estou me batento, ja pesquisei sem sucesso,
inves de colocar um check box to querendo colocar
um combo.


esse combo esta populado com as letras de A - Z

só que não altera o valor quando seleciono o valor do combo.
######################################################
#######################codigo##########################
######################################################

<mx:DataGrid left="0" right="0" bottom="57" top="40"
dataProvider="{dados}" id="grid">
<mx:columns>
<mx:DataGridColumn dataField="selected" headerText="Descrição"
editorDataField="selected"
rendererIsEditor="true">

<mx:itemRenderer>
<mx:Component>
<mx:CheckBox

selected="{data.selected}" label="{data.descricao}"/>

</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn headerText="Favorito" dataField="col2"/>
<mx:DataGridColumn headerText="VPl" dataField="col3"/>
<mx:DataGridColumn headerText="Custo Total" dataField="col3"/>
<mx:DataGridColumn dataField="agrupamento" headerText="Descrição"
editable="true"
rendererIsEditor="true"
editorDataField="agrupamento"

itemEditor="com.datasul.ems.finance.investmentandloans.monitorpendingsimulations.ui.ComboRederer">
<mx:itemRenderer>
<mx:Component>
<ns1:ComboRederer/>

</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

<mx:Label text="{grid.selectedItem.agrupamento}" x="86" y="204"/>

#################################################################################
#################################################################################
################################################################################

> ATENÇÃO: Consulte também o manual do fabricante:http://livedocs.adobe.com/labs/flex3/html/help.html?content=cellrende...

[Beck Novaes]

Olá André, tudo bem?

Se você tem um "itemEditor" para que dizer que o seu "itemRenderer" é
um editor também? Acho que você deve usar um ou outro, entende? De
qualquer forma, vejo que você está dizendo que o "editorDataField" é
"agrupamento". Isso deve ser uma propriedade publica no ComboRenderer,
suponho. Você poderia mostrar o código do ComboRenderer para vermos se
podemos ajudar melhor?

[]'s
Beck Novaes

[andre caetano]

Beck dei jeito aqui

 

ficou assim

########################################################################################

 

<mx:DataGrid left="0" right="0" bottom="57" top="40" dataProvider="{dados}" id="grid" editable="true">

<mx:columns>

<mx:DataGridColumn dataField="selected" headerText="Descrição"

editorDataField="selected" rendererIsEditor="true">

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox selected="{data.selected}" label="{data.descricao}"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

<mx:DataGridColumn headerText="Favorito" dataField="col2" editable="false"/>

<mx:DataGridColumn headerText="VPl" dataField="col3" editable="false"/>

<mx:DataGridColumn headerText="Custo Total" dataField="col3" editable="false"/>

<mx:DataGridColumn dataField="agrupamento" headerText="Descrição"

rendererIsEditor="true"

editorDataField="text">

<mx:itemRenderer>

<mx:Component>

<ns1:ComboRederer/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

###################################################################################

 

Em 29/02/08, Beck Novaes <beck....@gmail.com> escreveu: