15 Replies Latest reply on Sep 7, 2010 11:09 PM by Subeesh Arakkan

    Data changing while scrolling in grid

    pickler1186

      grid.jpg

      hi...i'm adding textInput inside a data grid dynamically...the last column of the datagrid i'm adding a HBox inside wich i dynamically add textInput boxes on creationComplete event of the HBox...but when i enter a value in one of the textBoxes and scroll the grid and come back...the value appears inside anothr textBox and it continues to change when i keep scrolling....any solution on this??

        • 1. Re: Data changing while scrolling in grid
          Subeesh Arakkan Level 4

          it is due to the renderer recycling . Check this page for more info.

          http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

          • 2. Re: Data changing while scrolling in grid
            pickler1186 Level 1

            can you suggest me a solution for this problem?

            • 3. Re: Data changing while scrolling in grid
              Subeesh Arakkan Level 4

              yes, post your renderer code here


              • 4. Re: Data changing while scrolling in grid
                pickler1186 Level 1

                <mx:AdvancedDataGrid

                 

                 

                 

                rowCount="10" width="96%" id="dgMetrics" wordWrap="true" variableRowHeight="true" sortExpertMode="true" sortItemRenderer="util.ui.AdvDatagridItemRenderer">

                 

                 

                 

                <mx:columns>

                 

                <mx:AdvancedDataGridColumn headerText="Category" wordWrap="true" headerWordWrap="true"/>

                 

                 

                 

                <mx:AdvancedDataGridColumn headerText="Metrics Name" dataField="2" wordWrap="true" headerWordWrap="true"/>

                 

                 

                <!--<mx:AdvancedDataGridColumn headerText="Description" dataField="3" wordWrap="true" headerWordWrap="true"/> -->

                 

                 

                <mx:AdvancedDataGridColumn headerText="Current Value" id="currValue" headerWordWrap="true"/>

                 

                 

                <mx:AdvancedDataGridColumn headerText="Unit" dataField="7" wordWrap="true" headerWordWrap="true"/>

                 

                <mx:AdvancedDataGridColumn headerText="Set Value" id="value" headerWordWrap="true" />

                 

                 

                <mx:AdvancedDataGridColumn headerText="Month" visible="false" headerWordWrap="true"/>

                 

                 

                </mx:columns>

                 

                 

                <mx:rendererProviders>

                 

                 

                <mx:AdvancedDataGridRendererProvider column="{value}" depth="2">

                 

                 

                <mx:renderer>

                 

                 

                <mx:Component>

                 

                 

                <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center" dataChange="{generateElement(data[5],data[6])}">

                 

                 

                <mx:Script>

                <![CDATA[

                 

                 

                import

                 

                mx.binding.utils.BindingUtils;

                 

                import mx.containers.HBox;

                 

                import util.ui.ImageRenderer;

                 

                import org.alivepdf.images.ImageFormat;

                 

                import mx.graphics.ImageSnapshot;

                 

                import mx.controls.Image;

                 

                import mx.controls.ToolTip;

                 

                import mx.controls.RadioButton;

                 

                import mx.events.DateChooserEvent;

                 

                import mx.events.StateChangeEvent;

                 

                import mx.events.FlexEvent;

                 

                import mx.events.CloseEvent;

                 

                import vo.metricsmanagement.projectspecificmetrics.MetricsPeriodicValueVO;

                 

                import mx.validators.NumberValidator;

                 

                import mx.controls.Alert;

                 

                import mx.controls.DateField;

                 

                import mx.controls.TextInput;

                 

                import mx.controls.Label;

                 

                    

                    

                 

                 

                 

                 

                 

                 

                 

                private function generateElement(isDate : int, endDate : Date) : void

                {

                 

                 

                 

                var tDate:Date = new Date();

                 

                var enblFlag:Boolean;

                 

                 

                if(endDate>tDate)

                {

                enblFlag =

                true;

                }

                 

                else

                {

                enblFlag =

                 

                false;

                }

                 

                 

                this.removeAllChildren();

                 

                 

                if(this.getChildren().length ==0)

                {

                 

                if(isDate == 1)

                {

                 

                var date:DateField = new DateField();

                date.enabled = enblFlag;

                date.width = 120;

                 

                date.toolTip =

                "Leave blank if there is no value for this periodicity";

                 

                 

                var clearDate : ImageRenderer = new ImageRenderer();

                clearDate.toolTip =

                "Click here to clear date and save as NA";

                clearDate.width = 12;

                clearDate.height = 12;

                 

                 

                if(enblFlag == true)

                {

                 

                var hbox:HBox = new HBox();

                hbox.width = 10;

                 

                this.addChild(hbox);

                }

                 

                 

                this.addChild(date);

                 

                 

                if(enblFlag == true)

                {

                 

                this.addChild(clearDate);

                }

                 

                 

                clearDate.addEventListener(MouseEvent.CLICK,

                function():void{

                date.selectedDate =

                null;

                 

                var arr:Array = outerDocument.dgMetrics.selectedItem as Array;

                outerDocument.iMetricId = arr[1];

                outerDocument.isDate = 0;

                outerDocument.strValue =

                "NA";

                outerDocument.updateValue();

                });

                 

                 

                 

                date.addEventListener(MouseEvent.CLICK,

                function():void{

                 

                 

                var arr:Array = outerDocument.dgMetrics.selectedItem as Array;

                outerDocument.iMetId = arr[1];

                });

                 

                date.addEventListener(FocusEvent.FOCUS_OUT,

                function():void{

                 

                 

                //var arr:Array = outerDocument.dgMetrics.selectedItem as Array;

                 

                 

                for(var i:int = 0;i<outerDocument.acMetricValue.length;i++)

                {

                 

                var tempBean:MetricsPeriodicValueVO = new MetricsPeriodicValueVO();

                tempBean = outerDocument.acMetricValue.getItemAt(i)

                as MetricsPeriodicValueVO;

                 

                if(outerDocument.iMetId == tempBean.metricsId)

                {

                outerDocument.acMetricValue[i].value = date.selectedDate;

                outerDocument.existsFlag =

                true;

                 

                break;

                }

                }

                outerDocument.iMetricId = outerDocument.iMetId;

                outerDocument.isDate = 1;

                outerDocument.valDate = date.selectedDate;

                outerDocument.updateValue();

                });

                }

                 

                else

                {

                 

                 

                var txtInput:TextInput = new TextInput();

                 

                txtInput.enabled = enblFlag;

                txtInput.width = 120;

                txtInput.toolTip =

                "Enter \"na or NA\" or leave blank if there is no value for this periodicity";

                 

                 

                 

                this.addChild(txtInput);

                 

                 

                if(outerDocument.pageInit == true)

                {

                 

                //txtInput.text = outerDocument.acMetricValue[0].val;

                 

                 

                for(var i:int = 0;i<outerDocument.acMetricValue.length;i++)

                {

                Alert.show(

                "1 :"+outerDocument.acMetricValue[i].value.toString());

                }

                }

                 

                //Alert.show(outerDocument.dgMetrics.editedItemPosition.toString());

                 

                txtInput.addEventListener(TextEvent.TEXT_INPUT,

                function(event:TextEvent):void{

                 

                 

                 

                var arr:Array = outerDocument.dgMetrics.selectedItem as Array;

                outerDocument.iMetId = arr[1];

                 

                 

                var regExpD:RegExp = new RegExp("\\d");

                 

                var regExpNA:RegExp = new RegExp("NA|na");

                 

                var regExpN:RegExp = new RegExp("N|n");

                 

                var regExpA:RegExp = new RegExp("A|a");

                 

                var regExpDot:RegExp = new RegExp("\\.");

                 

                if(regExpNA.test(txtInput.text)){

                event.preventDefault();

                }

                else{

                 

                 

                if(txtInput.text == ''){

                 

                if(regExpD.test(event.text) || regExpN.test(event.text)){

                 

                }

                else{

                event.preventDefault();

                }

                }

                else if(txtInput.text == 'N' || txtInput.text == 'n'){

                 

                if(!regExpA.test(event.text)){

                event.preventDefault();

                }

                }

                else{

                 

                if(!regExpD.test(event.text)){

                 

                if(regExpDot.test(event.text)){

                 

                 

                if(txtInput.text.indexOf("\.") > 0){

                event.preventDefault();

                }

                }

                else{

                event.preventDefault();

                }

                 

                }

                }

                }

                 

                });

                 

                 

                //txtInput.addEventListener(,function():void{

                 

                 

                 

                //});

                 

                txtInput.addEventListener(FocusEvent.FOCUS_OUT,

                function():void{

                 

                 

                //var arr:Array = outerDocument.dgMetrics.selectedItem as Array;

                 

                 

                for(var i:int = 0;i<outerDocument.acMetricValue.length;i++)

                {

                 

                var tempBean:MetricsPeriodicValueVO = new MetricsPeriodicValueVO();

                tempBean = outerDocument.acMetricValue.getItemAt(i)

                as MetricsPeriodicValueVO;

                 

                if(outerDocument.iMetId == tempBean.metricsId)

                {

                outerDocument.acMetricValue[i].value = txtInput.text.toUpperCase();

                 

                //BindingUtils.bindProperty(txtInput,"text",outerDocument.acMetricValue[i].value,"String") ;

                 

                //txtInput.text = outerDocument.acMetricValue[i].value.toString();

                outerDocument.existsFlag =

                true;

                 

                break;

                }

                }

                 

                //Alert.show(outerDocument.iMetId.toString());

                outerDocument.iMetricId = outerDocument.iMetId;

                outerDocument.isDate = 0;

                outerDocument.strValue = txtInput.text.toUpperCase();

                outerDocument.updateValue();

                });

                 

                }

                }

                 

                }

                 

                ]]>

                 

                </mx:Script>

                 

                <!--<mx:TextInput enabled="{outerDocument.enableSetValueLink(data[6])}" />

                <mx:DateField-->

                 

                </mx:HBox>

                 

                </mx:Component>

                 

                </mx:renderer>

                 

                </mx:AdvancedDataGridRendererProvider>

                 

                <mx:AdvancedDataGridRendererProvider column="{currValue}" depth="2">

                 

                <mx:renderer>

                 

                <mx:Component>

                 

                <mx:HBox width="100%" horizontalAlign="center">

                 

                <mx:Label text="{outerDocument.displayCurrentValue(data[5],data[8])}"/>

                 

                </mx:HBox>

                 

                </mx:Component>

                 

                </mx:renderer>

                 

                </mx:AdvancedDataGridRendererProvider>

                 

                </mx:rendererProviders>

                 

                </mx:AdvancedDataGrid>

                 

                 

                 

                • 5. Re: Data changing while scrolling in grid
                  pickler1186 Level 1

                  please note that it is now in the dataChange event of the HBox...but initially i put it in the CreationComplete event...

                  • 6. Re: Data changing while scrolling in grid
                    Subeesh Arakkan Level 4

                    okay. can you post a simple test case.


                    • 7. Re: Data changing while scrolling in grid
                      pickler1186 Level 1

                      hi Subeesh,

                           here's a simple example.

                       

                          

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

                      <mx:Application

                       

                       

                      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

                      creationComplete="doInit();"

                      >

                       

                       

                       

                      <mx:VBox width="100%" height="100%" horizontalAlign="center">

                       

                       

                      <mx:VBox width="95%" height="100%" horizontalAlign="center">

                       

                      <mx:VBox width="100%" height="13%" borderStyle="solid" borderColor="#000000">

                       

                       

                      </mx:VBox>

                       

                      <mx:HBox width="100%" height="2%">

                       

                      </mx:HBox>

                       

                      <mx:VBox width="100%" height="47%" borderStyle="solid" borderColor="#000000" horizontalAlign="center">

                       

                      <mx:HBox width="100%" height="5%">

                       

                      </mx:HBox>

                       

                      <mx:AdvancedDataGrid rowCount="10" width="96%" id="dgMetrics" wordWrap="true" variableRowHeight="true" sortExpertMode="true" >

                       

                      <mx:columns>

                       

                      <mx:AdvancedDataGridColumn headerText="Name" dataField="name" wordWrap="true" headerWordWrap="true"/>

                       

                      <mx:AdvancedDataGridColumn headerText="Creator" id="crtor" dataField="creator" headerWordWrap="true"/>

                       

                      <mx:AdvancedDataGridColumn headerText="Publisher" dataField="publisher" wordWrap="true" headerWordWrap="true"/>

                       

                      <mx:AdvancedDataGridColumn headerText="Set Value" id="value" headerWordWrap="true" />

                       

                      </mx:columns>

                       

                      <mx:rendererProviders>

                       

                      <mx:AdvancedDataGridRendererProvider column="{value}" >

                       

                      <mx:renderer>

                       

                      <mx:Component>

                       

                      <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center" creationComplete="{generateElement()}">

                       

                      <mx:Script>

                      <![CDATA[

                       

                      import mx.binding.utils.BindingUtils;

                       

                      import mx.containers.HBox;

                       

                      import mx.graphics.ImageSnapshot;

                       

                      import mx.controls.Image;

                       

                      import mx.controls.ToolTip;

                       

                      import mx.controls.RadioButton;

                       

                      import mx.events.DateChooserEvent;

                       

                      import mx.events.StateChangeEvent;

                       

                      import mx.events.FlexEvent;

                       

                      import mx.events.CloseEvent;

                       

                      import mx.validators.NumberValidator;

                       

                      import mx.controls.Alert;

                       

                      import mx.controls.DateField;

                       

                      import mx.controls.TextInput;

                       

                      import mx.controls.Label;

                       

                       

                       

                      private function generateElement() : void

                      {

                       

                       

                      this.removeAllChildren();

                       

                       

                      if(this.getChildren().length ==0)

                      {

                       

                      var txtInput:TextInput = new TextInput();

                      txtInput.width = 120;

                       

                       

                       

                      this.addChild(txtInput);

                      }

                       

                      }

                       

                      ]]>

                       

                      </mx:Script>

                       

                      </mx:HBox>

                       

                      </mx:Component>

                       

                      </mx:renderer>

                       

                      </mx:AdvancedDataGridRendererProvider>

                       

                       

                      </mx:rendererProviders>

                       

                      </mx:AdvancedDataGrid>

                       

                      <mx:HBox>

                       

                      <mx:Button label="Save All" id="btnSaveAll" click="" />

                       

                      </mx:HBox>

                       

                      <mx:Spacer height="2%">

                       

                      </mx:Spacer>

                       

                      </mx:VBox>

                       

                       

                       

                      </mx:VBox>

                       

                      </mx:VBox>

                       

                      <mx:Script>

                      <![CDATA[

                       

                      import mx.events.ScrollEvent;

                       

                      import mx.events.AdvancedDataGridEvent;

                       

                      import mx.events.CloseEvent;

                       

                      import mx.utils.StringUtil;

                       

                      import mx.rpc.events.FaultEvent;

                       

                      import mx.collections.ArrayCollection;

                       

                      import mx.managers.PopUpManager;

                       

                      import mx.controls.Alert;

                       

                      [

                      Bindable]

                       

                      public var myData : ArrayCollection = new ArrayCollection();

                       

                       

                       

                       

                       

                      private function doInit() : void

                      {

                      myData =

                      new ArrayCollection();

                      myData.addItem({name:

                      "Name1", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name2", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name3", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name4", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name5", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name6", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name7", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name8", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name9", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name10", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name11", creator: "Test", publisher: "Sample"});

                      myData.addItem({name:

                      "Name12", creator: "Test", publisher: "Sample"});

                       

                       

                      dgMetrics.dataProvider = myData;

                       

                      }

                       

                       

                       

                      private function handleFault(event : FaultEvent) : void

                      {

                       

                      var errorMsg: String = event.fault.rootCause.message.toString();

                      Alert.show(errorMsg,

                      "Error", Alert.OK, this);

                      }

                       

                       

                       

                       

                       

                       

                      ]]>

                       

                      </mx:Script>

                       

                      </mx:Application>

                       

                      • 8. Re: Data changing while scrolling in grid
                        Subeesh Arakkan Level 4

                        Hi,

                         

                        Check the modified code. The idea is to persist the textInput text in the dataProvider itself so that its value can be reset whenever the renderer is recycled.

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application
                             xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                             creationComplete="doInit();"
                             >
                             <mx:VBox width="100%" height="100%" horizontalAlign="center">
                                  <mx:VBox width="95%" height="100%" horizontalAlign="center">
                                       <mx:VBox width="100%" height="13%" borderStyle="solid" borderColor="#000000">
                                       </mx:VBox>
                                       <mx:HBox width="100%" height="2%">
                                       </mx:HBox>
                                       <mx:VBox width="100%" height="47%" borderStyle="solid" borderColor="#000000" horizontalAlign="center">
                                            <mx:HBox width="100%" height="5%">
                                            </mx:HBox>
                                            <mx:AdvancedDataGrid rowCount="10" width="96%" id="dgMetrics" wordWrap="true" variableRowHeight="true" sortExpertMode="true" >
                                                 <mx:columns>
                                                      <mx:AdvancedDataGridColumn headerText="Name" dataField="name" wordWrap="true" headerWordWrap="true"/>
                                                      <mx:AdvancedDataGridColumn headerText="Creator" id="crtor" dataField="creator" headerWordWrap="true"/>
                                                      <mx:AdvancedDataGridColumn headerText="Publisher" dataField="publisher" wordWrap="true" headerWordWrap="true"/>
                                                      <mx:AdvancedDataGridColumn headerText="Set Value" id="value" headerWordWrap="true" />
                                                 </mx:columns>
                                                 <mx:rendererProviders>
                                                      <mx:AdvancedDataGridRendererProvider column="{value}" >
                                                           <mx:renderer>
                                                                <mx:Component>
                                                                     <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center" creationComplete="{generateElement()}">
                                                                          <mx:Script>
                                                                               <![CDATA[
                                                                                    import mx.containers.HBox;
                                                                                    import mx.controls.Alert;
                                                                                    import mx.controls.DateField;
                                                                                    import mx.controls.Image;
                                                                                    import mx.controls.Label;
                                                                                    import mx.controls.RadioButton;
                                                                                    import mx.controls.TextInput;
                                                                                    import mx.controls.ToolTip;
                                                                                    import mx.events.CloseEvent;
                                                                                    import mx.events.DateChooserEvent;
                                                                                    import mx.events.FlexEvent;
                                                                                    import mx.events.StateChangeEvent;
                                                                                    import mx.graphics.ImageSnapshot;
                                                                                    import mx.validators.NumberValidator;
                                                                                    
                                                                                    private var txtInput:TextInput;
                                                                                    
                                                                                    private function generateElement() : void
                                                                                    {
                                                                                         
                                                                                         this.removeAllChildren();
                                                                                         if(this.getChildren().length ==0)
                                                                                         {
                                                                                              txtInput = new TextInput();
                                                                                              txtInput.width = 120;
                                                                                              txtInput.addEventListener(TextEvent.TEXT_INPUT, onTextInput);
                                                                                              this.addChild(txtInput);
                                                                                              
                                                                                         }
                                                                                    }
                                                                                    
                                                                                    override public function set data(value:Object):void
                                                                                    {
                                                                                         super.data = value;
                                                                                         if(txtInput)
                                                                                         {
                                                                                              if(data && data.text)
                                                                                                   txtInput.text = data.text;
                                                                                              else 
                                                                                                   txtInput.text = "";
                                                                                         }
                                                                                    }
                                                                                    
                                                                                    private function onTextInput(event:TextEvent):void
                                                                                    {
                                                                                         data.text = txtInput.text;
                                                                                    }
                                                                                    
                                                                               ]]>
                                                                               
                                                                               
                                                                          </mx:Script>
                                                                          
                                                                          
                                                                     </mx:HBox>
                                                                     
                                                                </mx:Component>
                                                                
                                                           </mx:renderer>
                                                           
                                                      </mx:AdvancedDataGridRendererProvider>
                                                      
                                                 </mx:rendererProviders>
                                                 
                                            </mx:AdvancedDataGrid>
                                            
                                            <mx:HBox>
                                                 
                                                 <mx:Button label="Save All" id="btnSaveAll" click="" />
                                                 
                                            </mx:HBox>
                                            
                                            <mx:Spacer height="2%">
                                                 
                                            </mx:Spacer>
                                            
                                       </mx:VBox>
                                  </mx:VBox>
                                  
                                  
                                  
                             </mx:VBox>
                             
                             
                             
                             <mx:Script>
                        
                                  <![CDATA[
                                       
                                       
                                       
                                       import mx.events.ScrollEvent;
                                       
                                       
                                       
                                       import mx.events.AdvancedDataGridEvent;
                                       
                                       
                                       
                                       import mx.events.CloseEvent;
                                       
                                       
                                       
                                       import mx.utils.StringUtil;
                                       
                                       
                                       
                                       import mx.rpc.events.FaultEvent;
                                       
                                       
                                       
                                       import mx.collections.ArrayCollection;
                                       
                                       
                                       
                                       import mx.managers.PopUpManager;
                                       
                                       
                                       
                                       import mx.controls.Alert;
                                       
                                       
                                       
                                       [
                        
                        Bindable]
                                       
                                       
                                       
                                       public var myData : ArrayCollection = new ArrayCollection();
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       private function doInit() : void
                                            
                                       {
                                            
                                            myData =
                                                 
                                                 new ArrayCollection();
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name1", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name2", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name3", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name4", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name5", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name6", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name7", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name8", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name9", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name10", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name11", creator: "Test", publisher: "Sample"});
                                            
                                            myData.addItem({name:
                                                 
                                                 "Name12", creator: "Test", publisher: "Sample"});
                                            
                                            
                                            
                                            
                                            
                                            dgMetrics.dataProvider = myData;
                                            
                                            
                                            
                                       }
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       private function handleFault(event : FaultEvent) : void
                                            
                                       {
                                            
                                            
                                            
                                            var errorMsg: String = event.fault.rootCause.message.toString();
                                            
                                            Alert.show(errorMsg,
                                                 
                                                 "Error", Alert.OK, this);
                                            
                                       }
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                       
                                  ]]>
                                  
                                  
                                  
                             </mx:Script>
                             
                             
                             
                        </mx:Application>
                        
                        
                        
                        1 person found this helpful
                        • 9. Re: Data changing while scrolling in grid
                          pickler1186 Level 1

                          hi subeesh,

                               I tried ur code...but still the values are disappearing for some text boxes...it doesnt reappear in any other textBox...but the value is disappearin when i scroll....any idea?

                           

                          thanks,

                          abraham

                          • 10. Re: Data changing while scrolling in grid
                            Subeesh Arakkan Level 4

                            try listening for the change event instead of textinput event.

                             

                            change
                            
                            txtInput.addEventListener(TextEvent.TEXT_INPUT, onTextInput);
                            
                            to 
                            txtInput.addEventListener(Event.CHANGE, onTextInput);
                            
                            private function onTextInput(event:Event):void
                            
                            • 11. Re: Data changing while scrolling in grid
                              pickler1186 Level 1

                              now the values are disappearing all together....not working yet

                              • 12. Re: Data changing while scrolling in grid
                                pickler1186 Level 1

                                for the text input change event...when i enter a 2 digit number say 23 and scroll down  and come back...the 2 stays ter but the 3 disappears

                                • 13. Re: Data changing while scrolling in grid
                                  Subeesh Arakkan Level 4

                                  well this code is working for me. which version is your sdk

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application
                                       xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                                       creationComplete="doInit();"
                                       >
                                       <mx:VBox width="100%" height="100%" horizontalAlign="center">
                                            <mx:VBox width="95%" height="100%" horizontalAlign="center">
                                                 <mx:VBox width="100%" height="13%" borderStyle="solid" borderColor="#000000">
                                                 </mx:VBox>
                                                 <mx:HBox width="100%" height="2%">
                                                 </mx:HBox>
                                                 <mx:VBox width="100%" height="47%" borderStyle="solid" borderColor="#000000" horizontalAlign="center">
                                                      <mx:HBox width="100%" height="5%">
                                                      </mx:HBox>
                                                      <mx:AdvancedDataGrid rowCount="10" width="96%" id="dgMetrics" wordWrap="true" variableRowHeight="true" sortExpertMode="true" >
                                                           <mx:columns>
                                                                <mx:AdvancedDataGridColumn headerText="Name" dataField="name" wordWrap="true" headerWordWrap="true"/>
                                                                <mx:AdvancedDataGridColumn headerText="Creator" id="crtor" dataField="creator" headerWordWrap="true"/>
                                                                <mx:AdvancedDataGridColumn headerText="Publisher" dataField="publisher" wordWrap="true" headerWordWrap="true"/>
                                                                <mx:AdvancedDataGridColumn headerText="Set Value" id="value" headerWordWrap="true" />
                                                           </mx:columns>
                                                           <mx:rendererProviders>
                                                                <mx:AdvancedDataGridRendererProvider column="{value}" >
                                                                     <mx:renderer>
                                                                          <mx:Component>
                                                                               <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center" creationComplete="{generateElement()}">
                                                                                    <mx:Script>
                                                                                         <![CDATA[
                                                                                              import mx.containers.HBox;
                                                                                              import mx.controls.Alert;
                                                                                              import mx.controls.DateField;
                                                                                              import mx.controls.Image;
                                                                                              import mx.controls.Label;
                                                                                              import mx.controls.RadioButton;
                                                                                              import mx.controls.TextInput;
                                                                                              import mx.controls.ToolTip;
                                                                                              import mx.events.CloseEvent;
                                                                                              import mx.events.DateChooserEvent;
                                                                                              import mx.events.FlexEvent;
                                                                                              import mx.events.StateChangeEvent;
                                                                                              import mx.graphics.ImageSnapshot;
                                                                                              import mx.validators.NumberValidator;
                                                                                              
                                                                                              private var txtInput:TextInput;
                                                                                              
                                                                                              private function generateElement() : void
                                                                                              {
                                                                                                   
                                                                                                   this.removeAllChildren();
                                                                                                   if(this.getChildren().length ==0)
                                                                                                   {
                                                                                                        txtInput = new TextInput();
                                                                                                        txtInput.width = 120;
                                                                                                        txtInput.addEventListener(Event.CHANGE, onTextInput);
                                                                                                        this.addChild(txtInput);
                                                                                                        
                                                                                                   }
                                                                                              }
                                                                                              
                                                                                              override public function set data(value:Object):void
                                                                                              {
                                                                                                   super.data = value;
                                                                                                   if(txtInput)
                                                                                                   {
                                                                                                        if(data && data.text)
                                                                                                             txtInput.text = data.text;
                                                                                                        else 
                                                                                                             txtInput.text = "";
                                                                                                   }
                                                                                              }
                                                                                              
                                                                                              private function onTextInput(event:Event):void
                                                                                              {
                                                                                                   data.text = txtInput.text;
                                                                                              }
                                                                                              
                                                                                         ]]>
                                                                                         
                                                                                         
                                                                                    </mx:Script>
                                                                                    
                                                                                    
                                                                               </mx:HBox>
                                                                               
                                                                          </mx:Component>
                                                                          
                                                                     </mx:renderer>
                                                                     
                                                                </mx:AdvancedDataGridRendererProvider>
                                                                
                                                           </mx:rendererProviders>
                                                           
                                                      </mx:AdvancedDataGrid>
                                                      
                                                      <mx:HBox>
                                                           
                                                           <mx:Button label="Save All" id="btnSaveAll" click="" />
                                                           
                                                      </mx:HBox>
                                                      
                                                      <mx:Spacer height="2%">
                                                           
                                                      </mx:Spacer>
                                                      
                                                 </mx:VBox>
                                            </mx:VBox>
                                            
                                            
                                            
                                       </mx:VBox>
                                       
                                       
                                       
                                       <mx:Script>
                                   
                                            <![CDATA[
                                                 
                                                 
                                                 
                                                 import mx.events.ScrollEvent;
                                                 
                                                 
                                                 
                                                 import mx.events.AdvancedDataGridEvent;
                                                 
                                                 
                                                 
                                                 import mx.events.CloseEvent;
                                                 
                                                 
                                                 
                                                 import mx.utils.StringUtil;
                                                 
                                                 
                                                 
                                                 import mx.rpc.events.FaultEvent;
                                                 
                                                 
                                                 
                                                 import mx.collections.ArrayCollection;
                                                 
                                                 
                                                 
                                                 import mx.managers.PopUpManager;
                                                 
                                                 
                                                 
                                                 import mx.controls.Alert;
                                                 
                                                 
                                                 
                                                 [
                                   
                                  Bindable]
                                                 
                                                 
                                                 
                                                 public var myData : ArrayCollection = new ArrayCollection();
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 private function doInit() : void
                                                      
                                                 {
                                                      
                                                      myData =
                                                           
                                                           new ArrayCollection();
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name1", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name2", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name3", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name4", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name5", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name6", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name7", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name8", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name9", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name10", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name11", creator: "Test", publisher: "Sample"});
                                                      
                                                      myData.addItem({name:
                                                           
                                                           "Name12", creator: "Test", publisher: "Sample"});
                                                      
                                                      
                                                      
                                                      
                                                      
                                                      dgMetrics.dataProvider = myData;
                                                      
                                                      
                                                      
                                                 }
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 private function handleFault(event : FaultEvent) : void
                                                      
                                                 {
                                                      
                                                      
                                                      
                                                      var errorMsg: String = event.fault.rootCause.message.toString();
                                                      
                                                      Alert.show(errorMsg,
                                                           
                                                           "Error", Alert.OK, this);
                                                      
                                                 }
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                            ]]>
                                            
                                            
                                            
                                       </mx:Script>
                                       
                                       
                                       
                                  </mx:Application>
                                  
                                  
                                  • 14. Re: Data changing while scrolling in grid
                                    pickler1186 Level 1

                                    hey subeesh...thanks a lot...it worked...the problem for me was in tht event listener...when u fire textinput event listener...the textInput.text doesnt giv me the last entered text...so in the event listener function i did data.text = textInput.text+event.text......tht wrkd fr me...and now its fine...thanks a lot for ur help

                                    • 15. Re: Data changing while scrolling in grid
                                      pickler1186 Level 1

                                      yea ur code is also wrkin...whn i copy pasted it wrkd...thanks a lot again