4 Replies Latest reply on Apr 18, 2011 7:27 AM by DushyantG

    Copying the value entered in one datagrid column into another column of the same datagrid

    DushyantG

      Hi,

      I have a datagrid that has 2 columns. The first column displays a combobox in each row. So under that column the user can pick a value from the combobox that appears when the user clicks the cell under that column. Now the second column of this datagrid is editable so the user can directly enter some text in it. Now I want that in every row of this datagrid the contents of the first column should be copied to the second column. If the user wants to put some thing else he can edit it. 

       

      myStringList is an arrayCollection.

       

      <mx:DataGrid id="myGrid"  width="100%"  editable="true">

           <mx:columns>

                <mx:DataGridColumn headerText="myField1" 
                                                 resizable="true"                                          
                                                 editorDataField="selectedItemKey"
                                                 editable="true">

                     <mx:itemEditor>
                                      <mx:Component> 
                                            <mx:ComboBox dataProvider="{myStringList}"

                                              labelField="value" />

                                      </mx:Component>

                     </mx:itemEditor>                                          

                </mx:DataGridColumn>

             <mx:DataGridColumn headerText="myField2"  editable="true" />

         </mx:columns>

      </mx:DataGrid>

       

      Header 1Header 2
      <Combobox>
      <Combobox>
      <Combobox>
      <Combobox>

       

      Plz tell me how to do this. Say this combobox has 2 options (high, low) . So if user selects "high" for first row first column then "high" should be copied in the first row second column.

        • 1. Re: Copying the value entered in one datagrid column into another column of the same datagrid
          Flex harUI Adobe Employee

          There is an ITEM_EDIT_END event you can use to know when to copy the field.

          1 person found this helpful
          • 2. Re: Copying the value entered in one datagrid column into another column of the same datagrid
            DushyantG Level 1

            Thanks for the reply.

             

            Actually the problem is that I dont know how to access the value selected in the combobox placed in the datagrid's cell. I tried using the datagrid's id and even tried giving an id to the datagrid's column but can't access it that way. When I try to create an event handler for the ITEM_EDIT_END event , inside that script block, I am unable to access the datagrid or any of its columns by their ids. I want to bind the content(text) of the second column to the combobox's value in the first column for that particular row.

             

            Plz guide me. Thanks in advance.

            • 3. Re: Copying the value entered in one datagrid column into another column of the same datagrid
              BennyB23

              Not sure how helpful this will be, but here's a suggestion:

               

              [Bindable]

              protected var labelProperty:String;

               

              protected function dG_itemEditEndHandler(event:DataGridEvent):void

              {

                   //say you have datafield="name"...

                   labelProperty = event.itemRenderer.data.name;

              }

               

              Also check out two-way data bindings in the documentation.

               

              Hope that helps in some way...

               

              ~B

              • 4. Re: Copying the value entered in one datagrid column into another column of the same datagrid
                DushyantG Level 1

                Thank you all for replying. I think I have found the answer. I put a ItemEditor for the column which was to be updated with the selected choice from the combobox in the first column, and used a TextInput. Then I bound the text property of this TextInput to the dataprovider object's required field.

                 

                So finally the code is:

                 

                <mx:DataGrid id="myGrid"  width="100%"  editable="true" dataProvider="{someArrayCollection}">

                     <mx:columns>

                          <mx:DataGridColumn headerText="myField1" 
                                                           resizable="true"                                          
                                                           editorDataField="selectedItemKey"
                                                           editable="true"

                                                           dataField="fieldName">

                               <mx:itemEditor>
                                                <mx:Component> 
                                                      <mx:ComboBox dataProvider="{myStringList}"

                                                        labelField="value"

                                                        change="gridcombobox1_changeHandler(event)"/>

                                                        <mx:Script>
                                                               <![CDATA[
                                                                   import mx.events.ListEvent;
                                                                   protected function gridcombobox1_changeHandler(event:ListEvent):void
                                                                   {  

                                                                         //code to set the dataprovider object which is the dataField to this column  //code to set the dataprovider object which is the dataField to this column          
                                                                       outerDocument.dgcheckFields.selectedItem.fieldName = selectedItem;
                                                                   }

                 

                                                                  ]]>
                                                            </mx:Script>

                                                </mx:Component>

                               </mx:itemEditor>                                         

                          </mx:DataGridColumn>

                       <mx:DataGridColumn headerText="myField2"  editable="true"  dataField="alias">

                               <mx:itemEditor>
                                                 <mx:Component>
                                                     <mx:TextInput text="{outerDocument.myGrid.selectedItem.fieldName}" />
                                                 </mx:Component>
                               </mx:itemEditor>

                     </mx:DataGridColumn>

                   </mx:columns>

                </mx:DataGrid>