ItemRenderers keep states after changes dataprovider in List

Question

I have the following issue with a Datagrid. I have a comboBox which change the Client and once a client is selected, the system populate the Datagrid with an ItemRenderer which has a CheckBox and two radioButtons. The first time I populate the List, all works fine.

The issue comes when I change the client and trigger an Event to change the content of such Datagrid. The Datagrid dataProvider is redeclared as a new ArrayCollection and iterate populating the new info.

The Question is that the states of the Checkboxes keep as before the change although the content is changed.

What's happen here? I can not understand it.

EDIT:

            private function showProductosTable(evt:ResultEvent, token:Object):void {
            precioClienteModel.modelo.arrayPanelPrecioCliente   = new ArrayCollection;

            for each(var data:Object in evt.result as ArrayCollection) {
                var pc:PanelPrecioClienteDatatype = new PanelPrecioClienteDatatype;
                pc.ID                       = data.ID;
                pc.clienteID                = data.clienteID;
                pc.productoID               = data.productoID;
                pc.producto                 = data.producto;
                pc.proveedorID              = data.proveedorID;
                pc.proveedor                = data.proveedor;
                pc.productos_proveedorID    = data.productos_proveedorID;
                pc.cantidad_80              = data.cantidad_80;
                pc.cantidad_100             = data.cantidad_100;
                pc.kg_caja_80               = data.kg_caja_80;
                pc.kg_caja_100              = data.kg_caja_100;
                precioClienteModel.modelo.arrayPanelPrecioCliente.addItem(pc);
                // Comprobamos si ya tenemos metido el ProductoID en nuestra Columna de Productos
                if ( !precioClienteModel.checkIfProductIDInList( pc.productoID ) ) {
                    precioClienteModel.modelo.arrayColumnaProductos.addItem( {'productoID':pc.productoID, 'producto':pc.producto,
                                                                                'proveedor1': {'value':0, 'selected':false},
                                                                                'proveedor2': {'value':0, 'selected':false},
                                                                                'proveedor3': {'value':0, 'selected':false},
                                                                                'proveedor4': {'value':0, 'selected':false},
                                                                                'proveedor5': {'value':0, 'selected':false},
                                                                                'proveedor6': {'value':0, 'selected':false},
                                                                                'proveedor7': {'value':0, 'selected':false},
                                                                                'proveedor8': {'value':0, 'selected':false},
                                                                                'proveedor9': {'value':0, 'selected':false},
                                                                                'proveedor10': {'value':0, 'selected':false},
                                                                                'proveedor11': {'value':0, 'selected':false},
                                                                                'proveedor12': {'value':0, 'selected':false},
                                                                                'proveedor13': {'value':0, 'selected':false},
                                                                                'proveedor14': {'value':0, 'selected':false},
                                                                                'proveedor15': {'value':0, 'selected':false}} );
                }
                if ( !precioClienteModel.checkIfProveedorIDInList( pc.proveedorID ) ) {
                    precioClienteModel.modelo.arrayFilaProveedores.addItem( {'proveedorID':pc.proveedorID, 'proveedor':pc.proveedor} );
                }
            }

}

and the Datagrid is:

<s:DataGrid id="preciosGrid" top="65" width="935" height="379" horizontalCenter="0" requestedRowCount="4"
            dataProvider="{precioClienteModel.modelo.arrayColumnaProductos}">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="producto"      headerText="Producto" width="150" editable="false"></s:GridColumn>
            <s:GridColumn dataField="proveedor1"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor2"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor3"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor4"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor5"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor6"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor7"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor8"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor9"    headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor10"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor11"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor12"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor13"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor14"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="proveedor15"   headerText="" width="52" editable="true" itemRenderer="renderers.PriceCellItemRenderer"></s:GridColumn>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

and the ItemRenderer:

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        import spark.components.DataGrid;

        private var _listData:BaseListData;
        [Bindable]private var isSelected:Boolean = false;

        override public function prepare(hasBeenRecycled:Boolean):void {
        }

        protected function lblData_doubleClickHandler(event:MouseEvent):void {
            isSelected = !isSelected;
            data[column.dataField]['selected'] = isSelected;
        }

        override public function set data( value:Object ) : void  {
            super.data = value;
            if (value != null)
                lblData.text = data[column.dataField]['value'];
        }

        [Bindable]public function get listData() : BaseListData {
            return _listData;
        }
        public function set listData( value:BaseListData ) : void {
            _listData = value;
        }

    ]]>
</fx:Script>

<s:Rect width="100%" height="100%">
    <s:fill>
        <s:SolidColor color="{isSelected?0xCDCDCD:0xFFFFFF}"/>
    </s:fill>
</s:Rect>
<s:Label id="lblData" width="100%" height="100%" 
         textAlign="center" verticalAlign="middle"
         doubleClickEnabled="true" doubleClick="lblData_doubleClickHandler(event)"/>

Thanks.

Ya need to put some code here. No guessin' for ya. – ethrbunny Feb 06 '13 at 12:52 — ethrbunny, Feb 06 '13 at 12:52

JeffryHouser · Answer 1 · 2013-02-06T15:41:15.863

You only add items to the grid's dataProvider; you never seem to remove old items. In such a case; itemRenderers currently displaying data will not update their display because their data did not change.

That said, you can write code to tell the DataGrid that the itemRenderers must be refreshed. You can do so by replacing the dataProvider, like this:

preciosGrid.dataProvider = myNewDataProvider;

or by using the itemUpdated method on your collection.

precioClienteModel.modelo.arrayColumnaProductos.itemUpdated(item);

So the poster is changing his dataProvider. I suspect the issue is that he has too many levels deep for binding to work. The dataProvider is set like this:

 dataProvider="{precioClienteModel.modelo.arrayColumnaProductos}"

So, Binding will look for a change to the modelo property on the precioClienteModel object; and modelo is not changing, only an instance variable of it; and therefore binding is not triggered. One solution may be to store an instance to modelo locally and set it during component setuppossibly in a setter for precioClienteModel:

[Bindable]
protected var modelo : ModeloType;

private var _precioClientModel : PrecioClienteModelType;

public function get precioClientModel(value:PrecioClienteModelType):void{
 return _precioClientModel;
}
public function set precioClientModel(value:PrecioClienteModelType):void{
  modelo = precioClienteModel.modelo
}

Then I think binding should be properly triggered.

The question is that the preciosGrid.dataProvider is pointing to "precioClienteModel.modelo.arrayColumnaProductos" and this arrayColletion is reset as follow: precioClienteModel.modelo.arrayColumnaProductos = new ArrayColletion; — Apalabrados, Feb 06 '13 at 15:13
You're right; I missed that piece of code when doing the review. I suspect the problem is that you are too many layers deep for binding to work. I'll update the answer to try to explain deeper. — JeffryHouser, Feb 06 '13 at 15:35
Hi, I'm using parsley, so that's why you see this: precioClienteModel is the Presentation Model, and modelo is the model class where the arrayColletion data holds data. All has it's Bindable set. So, you tell me that such model is not triggering the Binding once the ArrayCollection is changed? and that's why I should create an intermediate variable placed locally to manage this? — Apalabrados, Feb 06 '13 at 16:09

ItemRenderers keep states after changes dataprovider in List

1 Answers1