Value edited in TextInput gets collapsed while scrolling which is used as itemRenderer in DataGrid

I have two datagrids 1. OPTION GRID and 2. ELECTION GRID. I have used VBox container as itemRenderer in ELECTION GRID which consists of TextInput in Description C开发者_StackOverflow中文版olumn. The following is the sample SWF.

Whenever the checkbox is selected in the OPTION GRID i have to add a corresponding text input with description value in the 2nd grid (ELECTION GRID) for all the rows. Suppose if two checkboxes are selected, i have to add two textinput in the 2nd grid and so on... This is working fine. But whenever if i edit the textinput and scrolled up or down, the value gets collapsed between the rows or get vanished. I suspect that the itemRenderers will be re-used for the other rows while scrolling. How to retain the edited value in textinput ?

The following is the code.

Main code :

<mx:VBox width="100%" height="100%">
    <mx:Label text="OPTION GRID :" fontSize="12" fontStyle="normal" fontThickness="15"/>        
    <components:CAEventDetailDataGrid width="100%" height="20%" dataProvider="{optionData}" allowMultipleSelection="true" optionSelected="onOptionSelection(event)">        
        <components:columns>
            <mx:DataGridColumn dataField="selected" headerText="Select All" itemRenderer="renderer.CheckBoxItemRenderer" width="70" textAlign="center"/>
            <mx:DataGridColumn dataField="optionId" headerText="Option" textAlign="left"/>
            <mx:DataGridColumn dataField="option" headerText="Description" textAlign="left"/>
        </components:columns>       
    </components:CAEventDetailDataGrid>
    <mx:Label text="ELECTION GRID :" fontSize="12" fontStyle="normal" fontThickness="15"/>
    <mx:DataGrid id="electionGrid" width="100%" height="30%" dataProvider="{electionSummary}" rowCount="3" verticalScrollPolicy="on" variableRowHeight="true">                      
        <mx:columns>
            <mx:DataGridColumn dataField="dbProduct" headerText="DB Product"/>
            <mx:DataGridColumn dataField="entitledQty" headerText="Entitled Quantity"/>
            <mx:DataGridColumn dataField="entityId" headerText="Entity Id"/>
            <mx:DataGridColumn dataField="entityName" headerText="Entity Name"/>
            <mx:DataGridColumn dataField="eventStatus" headerText="Event Status"/>              
            <mx:DataGridColumn dataField="option" headerText="Description" itemRenderer="renderer.TextInputRenderer"/>            
        </mx:columns>                   
    </mx:DataGrid>
</mx:VBox>

<mx:Script>
    <![CDATA[
        import event.ElectionEvent;


        private function onOptionSelection(electionEvent : ElectionEvent) : void
        {       
            electionGrid.dispatchEvent(new ElectionEvent(ElectionEvent.OPTION_SELECTED,electionEvent.item));
        }

    ]]>
</mx:Script>

TextInputRenderer :

public class TextInputRenderer extends VBox

override public function set data(value:Object):void
    {
        _data = value;          
        _dataGrid = owner as DataGrid;
        if(_dataGrid)
            _dataGrid.addEventListener(ElectionEvent.OPTION_SELECTED,addTextInput);
    }

    private function addTextInput(electionEvent : ElectionEvent) : void
    {   
        var option : CAEventOption = electionEvent.item as CAEventOption;

        if(option != null)
        {   
            var textInput : TextInput = getChildByName(option.option) as TextInput;

            if(textInput == null)
            {
                textInput = new TextInput;
                textInput.name = option.option;                 
                textInput.text = option.option;                 
                textInput.percentWidth = 100;
                textInput.percentHeight = 100;
                textInput.visible = textInput.includeInLayout = option.selected;
                addChild(textInput);
            }
            else
            {
                textInput.visible = textInput.includeInLayout = option.selected;
            }
        }
    }

The Election Event is a customised event which will be triggered and invoke the listener function addTextInput whenever the checkbox is selected/de-selected in OPTION GRID.

private function addTextInput(electionEvent : ElectionEvent) : void

Is their a way to retain the edited value in TextInput ? Can anyone have a solution ?

I suspect that the itemRenderers will be re-used for the other rows while scrolling. How to retain the edited value in textinput

Correct the whole purpose of an itemRenderer is that it is reused as yous scroll through a list based class. Instead of rendering all hundreds of items in your class, it will just renderer the 4-10 (or whatever) you are displaying; and re-use those DisplayObject as you scroll through.

Your code looks like you are adding a new TextInput to a single itemRenderer, but it is hard to tell. You forgot to include a link to your app.

How to retain the edited value in textinput ?

Usually you store the value in the object's dataProvider; not change it based on some external event. so, when in your "onItemSelect" method, you would add an item to the 2nd DataGrid's data, which will in turn create a newRenderer, which should be able to "create itself" via the data property of that renderer.