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"/>

Answer 1

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 🙂