What kind of datagrid event do i need to use to set data in an ArrayCollection

Are you trying to edit data in collection ?


Look at one of my accepted answer.

https://www.experts-exchange.com/questions/27082016/How-to-save-the-edited-data-in-datagrid.html


"itemEditEnd" attribute and releated code.

itemEditEnd getting fired when user modified a field but you are asking when data change in this case you need to listen CollectionEvent.COLLECTION_CHANGE.


http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_5.html

It all depends on when you want to dispatch the event. There are multiple events you can use --
1. itemEditEnd
2. itemEditBegin
3. itemEditBeginning
4. CollectionEvent.CollectionChange
5. itemClick
.....etc

Please tell us the specific case you want to listen for an event. I can tell you better once I've that information.

I made a change for the combo box component

<mx:DataGrid x="0" y="61" width="100%" dataProvider="{titleArray}" id="dg1" itemEditEnd="processData(event)">
                  <mx:columns>
                        <mx:DataGridColumn width="100" id="dgc1" rendererIsEditor="true" headerText="Title" editable="true"
                                                   editorDataField="value" dataField="title">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <customcomponents:GridComboBox dataProvider="{parentDocument.titleCodes}"
                                                                                       labelField="ctDesc" lookupField="ctCode"
                                                                                       color="#000000" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));"/>
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>
                        <mx:DataGridColumn headerText="Name" id="dgc2" editable="true" dataField="name" editorDataField="text">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <mx:TextInput restrict="A-Z a-z" maxChars="50" editable="true"/>
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>      
                  </mx:columns>
            </mx:DataGrid>



This "change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));"
Updates the data provider dynamically.....How do do this for the text input component....


Thanks In Advance....

You can use various events --

change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));

valueCommit="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));

textInput="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));

focusIn="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));

foucsOut="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));

Hey I have tried the above n i get an error.....


<mx:DataGridColumn headerText="Name" id="dgc2" editable="true" dataField="name" editorDataField="text">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <mx:TextInput restrict="A-Z a-z" maxChars="50" editable="true"
                                                              change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));"/>
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>

Error Msg: 1120: Access of undefined property mx.      

If you are getting the above error that means you've forgotten to include the mx namespace in your application. Make sure you have the following in your application --

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

Hey VickyMad

That is already mentioned in the beginning of my module.....

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
               xmlns:model="com.citizen.cbs.model.*"
               xmlns:index="com.citizen.cbs.index.*"
               creationComplete="onCreationComplete()" initialize="initApp()"
               layout="absolute" xmlns:customcomponents="com.citizen.cbs.customcomponents.*">

Hi,

Can you post the complete code please ? How are you loading this module ? I'll have to see that part as well.

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
               xmlns:model="com.citizen.cbs.model.*"
               xmlns:index="com.citizen.cbs.index.*"
               creationComplete="onCreationComplete()" initialize="initApp()"
               layout="absolute" xmlns:customcomponents="com.citizen.cbs.customcomponents.*">
      
      <mx:RemoteObject id="utilityUCFlexRO" destination="utilityUCFlexRO">
            <mx:method name="updateStationDetails" result="updateStationResult(event)" fault="updateStationFault(event)"/>
      </mx:RemoteObject>
      
      <mx:RemoteObject id="branchDetailsUCFlexRO" destination="branchDetailsUCFlexRO">
            <mx:method name="getBranchList" result="handleBranchListResult(event)" fault="handleBranchListFault(event)" />
      </mx:RemoteObject>
      
      <mx:RemoteObject id="accountOpenUCFlexRO" destination="accountOpenUCFlexRO">
            <mx:method name="getProdId" result="handleProdIdResult(event)" fault="handleProdIdFault(event)"/>
            <mx:method name="getTitleCodes" result="handleTitleCodesResult(event)" fault="handleTitleCodesFault(event)"/>
      </mx:RemoteObject>
      
      <mx:RemoteObject id="accountModifyUCFlexRO" destination="accountModifyUCFlexRO">
            <mx:method name="getUimRecord" result="handleUimRecordResult(event)" fault="handleUimRecordFault(event)"/>
            <mx:method name="getAcHolderNameAndTitle" result="handleAcHolderDetailsResult(event)" fault="handleAcHolderDetailsFault(event)"/>
            <mx:method name="modifyNameDetails" result="handleModifyNameDetailsResult(event)" fault="handleModifyNameDetailsFault(event)"/>
      </mx:RemoteObject>
      
      <mx:Script>
            <![CDATA[
                  import com.citizen.cbs.CitizenApplication;
                  import com.citizen.cbs.model.CodeEbank;
                  import com.citizen.cbs.model.CodeGl;
                  import com.citizen.cbs.model.CodeTitle;
                  import com.citizen.cbs.model.UniqueIdMaster;
                  
                  import mx.collections.ArrayCollection;
                  import mx.controls.Alert;
                  import mx.core.Application;
                  import mx.events.CloseEvent;
                  import mx.events.DataGridEvent;
                  import mx.events.ListEvent;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  
                  
                  [Bindable]
                  private var attemptNo:int=0;
                  [Bindable]
                  private var branchCodes:ArrayCollection=new ArrayCollection();
                  [Bindable]
                  private var prodCodes:ArrayCollection=new ArrayCollection();
                  [Bindable]
                  public var titleCodes:ArrayCollection=new ArrayCollection();
                  [Bindable]
                  private var progmode:String=null;
                  [Bindable]
                  public var branch:int;
                  [Bindable]
                  public var branch1:int;
                  [Bindable]
                  public var productId:int;
                  [Bindable]
                  private var uniqueIdMaster:UniqueIdMaster;
                  [Bindable]
                  private var accountHolders:ArrayCollection = new ArrayCollection();
                  [Bindable]
                  private var particularDetails:ArrayCollection = new ArrayCollection();
                  [Bindable]
                  private var custId:int=0;
                  [Bindable]
                  private var acHolderDetails:ArrayCollection = new ArrayCollection();
                  [Bindable]
                  private var tableData:ArrayCollection = new ArrayCollection();
                  [Bindable]
                  private var acname:String = null;
                  [Bindable]
                  private var titleArray:ArrayCollection = new ArrayCollection();
                  
                  private function btnCancelClicked():void
                  {
                        utilityUCFlexRO.updateStationDetails("MM0000");
                  }
                  
                  private function btnResetClicked():void
                  {
                        hlSearch.enabled = true;
                        cmbProdId.enabled = true;
                        txtAcNo.enabled = true;
                        btnOK.enabled = false;
                        cmbProdId.selectedIndex=0;
                        txtAcNo.text=null;
                        accountHolders = new ArrayCollection();
                        titleArray = new ArrayCollection();
                  }
                  
                  private function initApp():void
                  {
                        utilityUCFlexRO.updateStationDetails(CitizenApplication.menuParameters["modulecode"]);
                  }
                  
                  private function updateStationResult(event:ResultEvent):void
                  {
                        attemptNo=attemptNo+1;
                        if(attemptNo>1)
                        {
                              Application.application.unloadModule();
                        }
                  }
                  
                  private function updateStationFault(event:FaultEvent):void
                  {
                        Alert.show("in update station fault : "+event.fault.faultString+" ");
                  }
                  
                  private function onCreationComplete():void
                  {
                        branchDetailsUCFlexRO.getBranchList();
                        progmode=CitizenApplication.menuParameters["action"];
                        if(progmode == "Modify")
                        {
                              btnOK.enabled=false;
                        }
                  }
                  
                  private function handleBranchListResult(event:ResultEvent):void
                  {
                        branchCodes = ArrayCollection(event.result);
                        branch1 = branchCodes.getItemAt(0).bdBranchNo;
                        branch = branchCodes.getItemAt(0).bdBranchNo;
                        if(branch1==400209001)
                        {
                              cmbBranch.visible=true;      
                              lblBranch.visible=true;                                                                  
                        }
                        else
                        {
                              var c:CodeEbank = new CodeEbank();
                              c.cebMicr=branch;
                              cmbBranch.selectedIndex= 0;                        
                              cmbBranch.visible=true;
                              lblBranch.visible=true;
                              cmbBranch.enabled=false;
                        }
                        accountOpenUCFlexRO.getProdId();
                  }
                  
                  private function handleBranchListFault(event:FaultEvent):void
                  {
                        Alert.show("in branch read fault : "+event.fault.faultString+" ");
                  }
                  
                  private function handleProdIdResult(event:ResultEvent):void
                  {
                        prodCodes=ArrayCollection(event.result);
                        accountOpenUCFlexRO.getTitleCodes();
                  }
                  
                  private function handleProdIdFault(event:FaultEvent):void
                  {
                        Alert.show("in prod id fault"+event.fault.faultString+" ");      
                  }
                  
                  private function handleTitleCodesResult(event:ResultEvent):void
                  {
                        titleCodes=ArrayCollection(event.result);
                  }
                  
                  private function handleTitleCodesFault(event:FaultEvent):void
                  {
                        Alert.show("title fault"+event.fault.faultString+" ");
                  }
                  
                  private function hlSearchDetailsClicked():void
                  {
                        if(cmbProdId.selectedItem==null || CodeGl(cmbProdId.selectedItem).cglCode==0)
                        {
                              Alert.show("Please Select the Product ID");
                        }
                        else
                        {
                              if(txtAcNo.text ==null || txtAcNo.text=="")
                              {
                                    Alert.show("Please Enter the Account No.");
                              }
                              else
                              {
                                    productId=CodeGl(cmbProdId.selectedItem).cglCode;
                                    var prodId:int=CodeGl(cmbProdId.selectedItem).cglCode;
                                    var acNo:int=Number(txtAcNo.text);
                                    accountModifyUCFlexRO.getUimRecord(branch,prodId,acNo,progmode);
                              }
                        }
                        
                  }
                  
                  private function handleUimRecordResult(event:ResultEvent):void
                  {
                        this.uniqueIdMaster=UniqueIdMaster(event.result);
                        if(!(uniqueIdMaster==null))
                        {
                              custId=uniqueIdMaster.id.uimCustomerId;
                              hlSearch.enabled = false;
                              cmbProdId.enabled = false;
                              txtAcNo.enabled = false;
                              accountModifyUCFlexRO.getAcHolderNameAndTitle(branch,CodeGl(cmbProdId.selectedItem).cglCode,Number(txtAcNo.text),custId);
                        }
                  }
                  
                  private function handleUimRecordFault(event:FaultEvent):void
                  {
                        Alert.show("uim fault : "+event.fault.faultString);      
                  }
                  
                  
                  private function handleAcHolderDetailsResult(event:ResultEvent):void
                  {
                        acHolderDetails = ArrayCollection(event.result);
                        if(productId == 101 || productId == 102 || productId == 103)
                        {                              
                              for(var i:int = 0 ; i < acHolderDetails.length; i++)
                              {
                                    titleArray.addItemAt({name:acHolderDetails.getItemAt(i).samName,
                                    title:acHolderDetails.getItemAt(i).codeTitle.ctCode},i);
                              }
                        }
                        else if(productId == 104)
                        {
                              Alert.show("acHolderDetails: "+acHolderDetails.length);
                              for(var i:int = 0 ; i < acHolderDetails.length; i++)
                              {
                                    titleArray.addItemAt({name:acHolderDetails.getItemAt(i).camName,
                                          title:acHolderDetails.getItemAt(i).codeTitle.ctCode},i);
                              }
                        }
                        else if(productId.toString().charAt(0)=="4")
                        {
                              for(var i:int = 0 ; i < acHolderDetails.length; i++)
                              {
                                    titleArray.addItemAt({name:acHolderDetails.getItemAt(i).tamName,
                                          title:acHolderDetails.getItemAt(i).codeTitle.ctCode},i);
                              }
                        }
                        btnOK.enabled = true;
                  }
                  
                  private function handleAcHolderDetailsFault(event:FaultEvent):void
                  {
                        Alert.show("Ac Holder Details Fault : "+event.fault.faultString+" ");
                  }
                  
                  private function okClicked():void
                  {
                        Alert.show("Name: "+titleArray.getItemAt(0).name);
                        Alert.show("Title: "+titleArray.getItemAt(0).title);
                        Alert.show("Title Array: "+titleArray.length);
                  }
                  
                  private function handleModifyNameDetailsResult(event:ResultEvent):void
                  {
                        Alert.show(event.result.toString());
                        btnResetClicked();
                  }
                  
                  private function handleModifyNameDetailsFault(event:FaultEvent):void
                  {
                        Alert.show("modifyAccNameDetailsFault : "+event.fault.faultString+" ");
                  }
                  
                  public function UpdateEditFlag(evt:DataGridEvent):void
                  {
                        Alert.show("In UpdateEditFlag");
                        var row:int = evt.rowIndex;
                        var col:int = evt.columnIndex;
                        var dg:DataGrid = evt.currentTarget as DataGrid;
                        
                        // Get dataprovider
                        var data:ArrayCollection = dg.dataProvider as ArrayCollection;
                        var cObj:Object = data.getItemAt(row);
                        
                        // get updated value
                        var textFld:TextInput = (DataGrid(evt.target).itemEditorInstance) as TextInput;
                        
                        // cols
                        var cols:Array= dg.columns;
                        
                        // edited column
                        var ccol:DataGridColumn = cols[col] as DataGridColumn;
                        cObj.edited = "Edited" + ccol.dataField + "[" + row + "]["+col+"]";    
                        Alert.show("Updated");
                  }
                  
            ]]>
      </mx:Script>
      <index:GetIndex id="getIndex"/>
      <mx:Panel x="0" y="0" layout="absolute" title="A/c Holder's Name Modify">
            <mx:VBox>
                  <mx:Spacer height="10"/>
            <mx:HBox x="0" y="10" horizontalAlign="center" verticalAlign="middle">
                  <mx:Spacer width="15"/>
                  <mx:Label text="Branch:" id="lblBranch"/>
                  <mx:ComboBox id="cmbBranch" dataProvider="{branchCodes}" labelField="bdBranchName"/>
                  <mx:Spacer width="10"/>
                  <mx:Label text="Product ID:"/>
                  <mx:ComboBox id="cmbProdId" dataProvider="{prodCodes}" labelField="cglDesc"/>
                  <mx:Spacer width="10"/>
                  <mx:Label text="Account No.:"/>
                  <mx:TextInput width="100" id="txtAcNo" restrict="0-9"/>
                  <mx:Spacer width="10"/>
                  <mx:LinkButton label="Search" id="hlSearch" click="hlSearchDetailsClicked()"/>
                  <mx:Spacer width="15"/>
            </mx:HBox>
            <mx:Spacer height="20"/>
            
            <mx:DataGrid x="0" y="61" width="100%" dataProvider="{titleArray}" id="dg1" >
                  <mx:columns>
                        <mx:DataGridColumn width="100" id="dgc1" rendererIsEditor="true" headerText="Title" editable="true"
                                                   editorDataField="value" dataField="title">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <customcomponents:GridComboBox dataProvider="{parentDocument.titleCodes}"
                                                                                       labelField="ctDesc" lookupField="ctCode"
                                                                                       color="#000000" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));"/>
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>
                        <mx:DataGridColumn headerText="Name" id="dgc2" editable="true" dataField="name" editorDataField="text">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <mx:TextInput restrict="A-Z a-z" maxChars="50" editable="true" />
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>      
                  </mx:columns>
            </mx:DataGrid>
                  <mx:Spacer height="20"/>
            </mx:VBox>
            <mx:ControlBar y="289" height="59">
                  <mx:Button label="OK" width="80" id="btnOK" click="okClicked()"/>
                  <mx:Button label="RESET" width="80" id="btnReset" click="btnResetClicked()"/>
                  <mx:Button label="CANCEL" width="80" id="btnCancel" click="btnCancelClicked()"/>
            </mx:ControlBar>
      </mx:Panel>
</mx:Module>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application tabEnabled="false" tabChildren="true" xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"  
                        applicationComplete="registerGlobalKeyHandler()"  layout="absolute" width="100%" height="100%"
                        xmlns:model="com.citizen.cbs.model.*" xmlns:utils="flexed.utils.timeout.*">
<utils:ClientIdleTimeOut id="myTimeOut" onTimeOut="onTimeOutHandler" listenKeyStroke="true" listenMouseMove="true"
                                           timeOutInterval="5" confirmInterval="5"/>
      <model:BranchDetails id="branchDetailsVO"/>
      <mx:XML id="mainMenu" source="/assets/xml/mainmenu.xml" format="xml"/>
      <mx:DateFormatter id="df" formatString="DD-MM-YYYY" />
      <mx:ApplicationControlBar horizontalAlign="center" width="90%" x="60" y="0">
            <!--<mx:MenuBar   dataProvider="{mainMenu}" labelField="@label" showRoot="false"  itemClick="loadModule(event.item)" />-->
            <mx:Label text="Ver.No.: R1663" fontWeight="bold" fontSize="12" color="#000000"/>
            
            <mx:Label text="Station No.:" color="#000000" fontFamily="san" fontWeight="bold"/>
            <mx:Label text="--" color="#000000" id="lblStn" fontFamily="san" fontWeight="bold"/>
            
            <!--<mx:MenuBar     dataProvider="{mainMenu}" labelField="@label" showRoot="false"  itemClick="loadModule(event.item)" />-->
            <mx:Spacer width="100%" />
            <mx:Text fontWeight="bold" text="{CitizenApplication.initInfo.registeredUser.branchDetails.bdBankName}"  styleName="appctrl"/>
            <mx:Text fontWeight="bold" text="-"  styleName="appctrl"/>
            <mx:Text fontWeight="bold" text="{CitizenApplication.initInfo.registeredUser.branchDetails.bdBranchName.toUpperCase()}"  styleName="appctrl"/>
            <mx:Text fontWeight="bold" text="BRANCH"  styleName="appctrl"/>
            <mx:Spacer width="100%" />
            <mx:Text fontWeight="bold" text="{CitizenApplication.initInfo.registeredUser.uamName}"  styleName="appctrl"/>
            <mx:Text fontWeight="bold" text="|"  styleName="appctrl"/>
            <mx:Text fontWeight="bold" text="{df.format(CitizenApplication.initInfo.registeredUser.branchDetails.bdCurrentWorkingDt)}"  styleName="appctrl"/>
      </mx:ApplicationControlBar>
      <mx:HDividedBox id="divBox" width="100%" height="100%" shadowDirection="center" resizeToContent="true" liveDragging="true" horizontalGap="10" x="0" y="34">
            <mx:VBox width="274" id="treeBox" borderStyle="solid" borderColor="#6699CC"><mx:Tree backgroundColor="#000000" color="#FFFFFF" width="100%" height="100%" id="treeMenu" dataProvider="{mainMenu}" labelField="@label" showRoot="false"
                                                                                                                                           itemClick="loadModule(treeMenu.selectedItem)"/>
                  <!--<mx:Tree backgroundColor="#000000" color="#FFFFFF" width="100%" height="100%" id="treeMenu" dataProvider="{XMLDocument}" labelField="@label" showRoot="false"
                  itemClick="loadModule(treeMenu.selectedItem)"/>-->
            </mx:VBox>
            <mx:Canvas id="moduleCanvas" width="100%" height="100%" styleName="mmc">
                  <mx:ModuleLoader backgroundColor="#000000" color="#FFFFFF" error="handleModuleLoaderError(event)"
                                           updateComplete="treeMenu.height = moduleCanvas.height-2" loading="CursorManager.setBusyCursor()"  
                                           useHandCursor="true"   ready="CursorManager.removeBusyCursor()" autoLayout="true"  
                                           verticalAlign="middle" horizontalAlign="center" id="formLoader" width="100%" height="100%" />
            </mx:Canvas>
      </mx:HDividedBox>
      <mx:Style source="CbsDesignFinal.css"/>
</mx:Application>

I your are trying to do?
Is this related to your original question?

Yes....VikyMad wanted me to post the code.....i need a change event on the text input component that dynamically updates the dataprovider.....I have done the same for the combobox....but unable to do so for the text input...


 

<mx:DataGrid x="0" y="61" width="100%" dataProvider="{titleArray}" id="dg1" >
                  <mx:columns>
                        <mx:DataGridColumn width="100" id="dgc1" rendererIsEditor="true" headerText="Title" editable="true"
                                                   editorDataField="value" dataField="title">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <customcomponents:GridComboBox dataProvider="{parentDocument.titleCodes}"
                                                                                       labelField="ctDesc" lookupField="ctCode"
                                                                                       color="#000000" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true));"/> //This change event updates the dataprovider
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>
                        <mx:DataGridColumn headerText="Name" id="dgc2" editable="true" dataField="name" editorDataField="text">
                              <mx:itemRenderer>
                                    <mx:Component>
                                          <mx:TextInput restrict="A-Z a-z" maxChars="50" editable="true" /> //Here is where I require the change event
                                    </mx:Component>
                              </mx:itemRenderer>
                        </mx:DataGridColumn>      
                  </mx:columns>
            </mx:DataGrid>

Select allOpen in new window

I think you can find an answer here

https://www.experts-exchange.com/questions/27085995/how-to-use-DataGridEvent-ITEM-EDIT-END.html

But Y doesn't the same change event for the GridCombBox work but the same event for the TextInput gives me an error: Error Msg: 1120: Access of undefined property mx.

Where is this error?

the error comes up when i use the same change event for text input component.....

ddd