Flex DataGrid shows mixed data

Question

i've working in flex for some years and it seems to me it's an awesome tool. Some days ago i've had an extrange behavior in my datagrid.

I have a php service which reads a database and sends this data to felx. The service and the info saved in the dataprovider in flex are working without problems, but when datagrid shows the loaded info, it shows many cells with wrong data. The data shown seem to be mixed with other cells. e.g. I have two registers: "The lightbulb is red" and "The dog is dangerous". But the datagrid shows e.g. "The lightbulb is Dangerous" or "The dog is red".

When i see the dataprovider in a breakpoint all data is correct.

But it's even much strange when I click over a problematic cell, this automaticaly changes its content to correct values.

I didn't find a possible cause, and i'm loosing my head. Also i've tried solutions like validate functions, I've turned off the datagrid and browser cache and redraw all component. But nothing seems to work. May be a flash player issue?

Any help would be very appreciated. Thanks.

one pic (ever is different)

code...

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[

        protected function btnBuscar_clickHandler(event:MouseEvent):void{//Calls the searching service
            dfFechaOtrosDetalles.text = "";
            if ((txtBuscarId.text == "") && (dfBuscarFecha.text == "") && (comboBuscarCiudades.textInput.text == "") && (txtBuscarEmpresa.text == "") && (txtBuscarSucursal.text == "") && (txtBuscarObra.text == "") && ((comboBuscarEstado.selectedItem == " ") || (comboBuscarEstado.selectedItem == "")))
                txtBuscarId.setFocus();
            else
                if (comboBuscarCiudades.textInput.text == "")
                    getAllPropuestaResult.token = propuestaService.buscarPropuesta(txtBuscarId.text.toString(),dfBuscarFecha.text,RBGRangoBusquedaFecha.selectedValue.toString(),"",txtBuscarEmpresa.text,txtBuscarSucursal.text,txtBuscarObra.text,comboBuscarEstado.selectedItem);
                else
                    getAllPropuestaResult.token = propuestaService.buscarPropuesta(txtBuscarId.text,dfBuscarFecha.text,RBGRangoBusquedaFecha.selectedValue.toString(),comboBuscarCiudades.selectedItem.id,txtBuscarEmpresa.text,txtBuscarSucursal.text,txtBuscarObra.text, comboBuscarEstado.selectedItem);
        }

    ]]> 
</fx:Script>

<fx:Declarations>
    <s:CallResponder id="getAllPropuestaResult"/>       
    <propuestaservice:PropuestaService id="propuestaService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>       
    <PropuestasDataType:PropuestasDataType id="propuestasDataType"/>

<fx:Binding source="dgPropuestas.selectedItem as PropuestasDataType" destination="propuestasDataType"/>

<!-- MAIN INTERFACE-->  
<mx:DataGrid x="17" y="40" id="dgPropuestas" dataProvider="{getAllPropuestaResult.lastResult}" styleName="grid" height="184" change="dgPropuestas_changeHadler(event)">
    <mx:columns>
        <mx:DataGridColumn headerText="ID" dataField="id" width="40"/>
        <mx:DataGridColumn headerText="Ciudad" dataField="ciudydepto" width="150" itemRenderer="mxml.IRRichEditableDataGrid"/>
        <mx:DataGridColumn headerText="Empresa" dataField="empresa" width="150" itemRenderer="mxml.IRRichEditableDataGrid"/>
        <mx:DataGridColumn headerText="Sucursal" dataField="sucursal" width="130" itemRenderer="mxml.IRRichEditableDataGrid"/>
        <mx:DataGridColumn headerText="Obra" dataField="obra" width="200" itemRenderer="mxml.IRRichEditableDataGrid"/>
        <mx:DataGridColumn headerText="Valor" dataField="valor" width="100" itemRenderer="mxml.IRRichEditableDataGrid"/>
    </mx:columns>
</mx:DataGrid>

I still have the problem, but now i realize that is a problem related with itemrenderers. I have a IR that allows select and copy text from the cells, but i've tested and this error do not appear if there's no IR related. Here's the code of the IR.

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                      focusEnabled="true">
<s:RichEditableText id="lblData" top="0" left="2" right="0" bottom="0" text="{dataGridListData.label}" selectable="true" editable="false" height="35" verticalAlign="middle"/>

Can you at least post a screenshot of this peculiar behavior? I don't know others but I'd rather see some code than speculating on your story. — Kumsal Obuz
Welcome to Stack Overflow! Please use the Post answer button only for actual answers. You should modify your original question to add additional information. — NullUserException

Jivago Jivago · Accepted Answer · 2011-12-21T14:59:00

I noticed in the past that sometimes, a dataGrid itemRenderer may have trouble keeping the good values at the right place, especially when you have a large set of data.

The problem is because when you resize the application or scroll down the dataGrid, a dataChange() event is fired, and it looks like the itemRenderer has trouble binding the data correctly.

This solution has worked for me :

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    focusEnabled="true" dataChange="dataChangeHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.utils.ObjectProxy;

            [Bindable]
            private var _data:ObjectProxy;

            protected function dataChangeHandler(event:FlexEvent):void
            {
                if (data)
                    _data = new ObjectProxy(data);
            }

        ]]>
    </fx:Script>

    <s:RichEditableText id="lblData" top="0" left="2" right="0" bottom="0" text="{_data.label}" selectable="true" editable="false" height="35" verticalAlign="middle"/>

</s:MXDataGridItemRenderer>

Try it and let us know :-)

Flex DataGrid shows mixed data

1 Answers