21 Replies Latest reply on Apr 27, 2009 6:57 AM by Mongolian Beef

    datagrid editable row

    Mongolian Beef

      Hi,

       

      I would like to know if there is a way to make an entire row in a datagrid editable when that row is selected.  Currently when a user selects a cell of the row, only that cell becomes editable.  I would like to have that entire row become editable.  Is there a way of accomplishing this?  Thanks in advance.

        • 1. Re: datagrid editable row
          Flex harUI Adobe Employee

          You can set the itemEditor to any class you want to act as the editor, and then use editorXOffset and friends to reposition the editor.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: datagrid editable row
            Mongolian Beef Level 1

            Hi,

             

            Thanks for the reply.  I don't really understand how to make this work using your suggestion.  Say I want to keep using the default datagrid renderer, i.e. DataGridItemRenderer.  Hence this is the itemEditor you mentioned.  Now in my datagrid, say I have 2 columns and 2 rows, and the entire datagrid is editable.  Now when I click on row 1 [index = 0], what do I need to do to the DataGridItemRenderer to make it show as editable for the 2 columns of row 1?  I don't see how editorXOffset, etc. work in this scenario since it's specific to a datagridcolumn...  Thanks.

            • 3. Re: datagrid editable row
              Flex harUI Adobe Employee

              DataGridItemRenderer is the renderer and not the editor.  TextInput is the default editor.  Let's say both columns are 100 pixels wide.  If for column 2 you set editorXOffset to -100 and editorWidthOffset to 100 when you click on column 2 the TextInput will cover both columns.

               

              If you create a new class that has two editable fields like one based on http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.html you can use the same trick to reposition that editor.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              1 person found this helpful
              • 4. Re: datagrid editable row
                Mongolian Beef Level 1

                Ah, I get what you're saying.  However, it didn't solve my original problem.  Maybe I posed the question wrong.  Keeping the example of a 2x2 datagrid, say column 1 is called "Acct" and column 2 called "Name".  These are two different fields and hence two different textfields.  When I click on a row, only one of the cells 'turns into a textfield' to be edited.  The other cell still does not.  I would like to have both cells turn into textfields (not 1 big textfield but 2 textfields, 1 for each respective column) for the row, regardless of the cell I click.  Is this possible?

                 

                From doing your example above, the entire row becomes one big editable textfield for a particular cell and this is different than what I'm looking for.  Thanks in advanced.

                • 5. Re: datagrid editable row
                  Flex harUI Adobe Employee

                  As I mentioned in my earlier response, you may have to create a custom editor based on the blog article I referred to and use that instead.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: datagrid editable row
                    Mongolian Beef Level 1

                    Hi,

                     

                    thanks for the reply.  I took a look at your example and it's tough to fathom how that would work for separate cells.  Your example works within one cell but I'm talking about all the cells of the same row in the datagrid.

                    • 7. Re: datagrid editable row
                      Flex harUI Adobe Employee

                      You have already coded how to stretch the TextInput over both columns.  Simply stretch the example editor over both columns.

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 8. Re: datagrid editable row
                        Mongolian Beef Level 1

                        Hi,

                         

                        I can't seem to get this to work.  I went through your example and *think* I understood it and tried to mimic that in my code.  For some reason, I can't seem to get two textfields, one on each cell, to display on the row selected.  I'm able to expand one text field to cover both cells, but that's not my intention.  It seems that in the custom editor's updateDisplayList(), you can only update one field (textField) at a time and hence you cannot manipulate both textfields.  I'm really stumped with this.  Any other help would be appreciated.  Thanks.

                        • 9. Re: datagrid editable row
                          Mongolian Beef Level 1

                          lemme elaborate a bit.  I'm able to appropriately create the TextInput for each cell.  The problem is that, even if you update the TextInputs for both cells in the updateDisplayList(), on one TextInput shows up in the selected cell (basically overriding the editorWidthOffset property.  I can stretch the TextInput to cover both cells (and thus looks like both cells in the row have been selected), but this defeats the purpose since you can only edit one cell again, not both.

                          • 10. Re: datagrid editable row
                            ntsiii Level 3

                            I am not understanding your goal.  You can only edit one cell at a time, regardless. What UI experience are you trying to accomplish?

                             

                            Tracy Spratt

                            • 11. Re: datagrid editable row
                              Mongolian Beef Level 1

                              I need the user to "feel" like when they click on a row, all of the cells for that row become "editable".  Not necessarily have all the cells of that row be actually editable, but the appearance of it at least.   Something like this:  http://www.webfuel.pt/jsaleiro/editablerow.jpg

                               

                              I thought from the response in this thread that you can actually "enable" all of the cells for that row using a combination of editorWidthOffset & co and a custom editor but I don't think this is going to work out.

                              • 12. Re: datagrid editable row
                                Flex harUI Adobe Employee

                                I don't know of any reason you can't take the two-editable-field example and use it to do what you want by using the editorXOffset and related properties appropriately.  If you show code you've tried maybe we can figure out why it isn't working for you.

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui

                                • 13. Re: datagrid editable row
                                  Mongolian Beef Level 1

                                  Ok,

                                   

                                  I've attached the code with this post.  Just run GridTest.  Let me know what I'm doing wrong (so the rest of my hair will stop turning grey).  Thanks!

                                  • 14. Re: datagrid editable row
                                    Mongolian Beef Level 1

                                    Ok, I've attached my test code with this post (just run GridTest).  Lemme know what I'm doing wrong.  Thanks.

                                     

                                    Edit: for some reason, I didn't read the fine print on the files taken.... The following extensions need to be changed from text:

                                     

                                    DataGridMultiFieldEditor.as

                                    GridTest.mxml

                                    TestBean.as

                                    • 15. Re: datagrid editable row
                                      tcflex

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                      here is an example I am unable to open download ur files.

                                       

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

                                      <mx:Application

                                       

                                       

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

                                      >

                                      <mx:Script>

                                      <![CDATA[

                                       

                                       

                                      import

                                      mx.collections.ArrayCollection;

                                      [

                                       

                                      Bindable

                                      ]

                                       

                                       

                                      private var ac:ArrayCollection = new

                                      ArrayCollection([

                                      {priority:25, score:100, bizrule:5}

                                      ]);

                                       

                                       

                                       

                                      private function onClick(event:Event):void

                                      {

                                      (event.currentTarget

                                       

                                      as DataGrid).editable = true

                                      ;

                                      }

                                       

                                       

                                      ]]>

                                      </mx:Script>

                                       

                                       

                                      <mx:DataGrid id="editableDG" x="10" y="27" dataProvider="{ac}" selectable="true" click="onClick(event)"

                                      >

                                       

                                       

                                      <mx:columns>

                                       

                                       

                                      <mx:DataGridColumn headerText="Column 1" dataField="priority"

                                      />

                                       

                                       

                                      <mx:DataGridColumn headerText="Column 2" dataField="score"

                                      />

                                       

                                       

                                      <mx:DataGridColumn headerText="Column 3" dataField="bizRule"

                                      />

                                       

                                       

                                      </mx:columns>

                                       

                                       

                                      </mx:DataGrid>

                                       

                                      </mx:Application>

                                       

                                      Thankx,

                                      tc.

                                      • 16. Re: datagrid editable row
                                        Mongolian Beef Level 1

                                        Hi,

                                         

                                        I ran your code and it doesn't accomplish what I was looking for.  Your example works like the default flex grid.  My problem is that I need to have all the cells for a row become "enabled" to be edit once that row has been clicked.  Thanks for the help though.

                                        • 17. Re: datagrid editable row
                                          ntsiii Level 3

                                          Based on the sample screenshot, you do not need column resizing/repositioning and other DataGrid functionality, so I would suggest you use a List with a single itemRenderer.

                                           

                                          If you want to stay with DG, then create an itemRenderer that has the behavior you want.  If you can extend DataGridItemRenderer, that would be ideal in that case.

                                          • 18. Re: datagrid editable row
                                            Flex harUI Adobe Employee

                                            Below is how I would write the multifield editor if you want to stay with DG.  You'll need to handle the ITEM_EDIT_END event in order to store values.  I don't think you can use editorDataField to store three fields.  See the examples on ITEM_EDIT_END.

                                             

                                            package

                                            {

                                            import flash.events.FocusEvent;

                                             

                                            import mx.controls.Alert;

                                            import mx.controls.DataGrid;

                                            import mx.controls.TextInput;

                                            import mx.controls.dataGridClasses.DataGridColumn;

                                            import mx.controls.dataGridClasses.DataGridListData;

                                            import mx.controls.listClasses.BaseListData;

                                            import mx.controls.listClasses.IDropInListItemRenderer;

                                            import mx.controls.listClasses.IListItemRenderer;

                                            import mx.core.UIComponent;

                                            import mx.managers.IFocusManagerComponent;

                                             

                                            /**

                                             

                                            • Two TextInput Editor for DataGrid

                                            */

                                            public class DataGridMultiFieldEditor extends UIComponent implements IListItemRenderer, IDropInListItemRenderer, IFocusManagerComponent

                                            {

                                             

                                                 private var dgOwner:DataGrid;

                                             

                                                 private var textEditors:Array = []

                                             

                                                 public function DataGridMultiFieldEditor()

                                                 {

                                                      super();

                                                 }

                                             

                                             

                                             

                                                 public function get fullValue():String

                                                 {

                                                      dgOwner = owner as DataGrid;

                                                       

                                                      var colInd:Number = dgOwner.editedItemPosition.columnIndex;

                                                       

                                                      return TextInput(textEditors[colInd]).text;

                                                 }

                                             

                                                 private var _data:Object;

                                             

                                                 public function get data():Object

                                                 {

                                                      return _data;

                                                 }

                                             

                                                 public function set data(value:Object):void

                                                 {

                                                      _data = value;

                                                      invalidateProperties();

                                                 }

                                             

                                                 private var _listData:BaseListData;

                                             

                                                 public function get listData():BaseListData

                                                 {

                                                      return _listData;

                                                 }

                                             

                                                 public function set listData(value:BaseListData):void

                                                 {

                                                      _listData = value;

                                                 }

                                             

                                                 override public function setFocus():void

                                                 {

                                                 }

                                             

                                                 override protected function createChildren():void

                                                 {

                                                      dgOwner = owner as DataGrid;

                                                       

                                                      super.createChildren();

                                             

                                                    var child:TextInput;

                                                      textEditors = new Array();

                                             

                                                    var n:int = dgOwner.columns.length;

                                             

                                                    for (var i:int = 0; i < n; i++)

                                                    {

                                                        child = new TextInput();

                                                        textEditors.push(child)

                                                        addChild(child);

                                                    }

                                                 }

                                             

                                                 override protected function commitProperties():void

                                                 {

                                                      dgOwner = owner as DataGrid;

                                             

                                                      super.commitProperties();

                                             

                                                    var n:int = dgOwner.columns.length;

                                             

                                                    for (var i:int = 0; i < n; i++)

                                                    {

                                                          var dgColumn:DataGridColumn = dgOwner.columns+;

                                                          var value:String = data[dgColumn.dataField];

                                                          TextInput(textEditors+).text = value; 

                                                    }

                                                 }

                                             

                                                 override protected function updateDisplayList(w:Number, h:Number):void

                                                 {

                                                      dgOwner = owner as DataGrid;

                                                       

                                                      super.updateDisplayList(w, h);

                                                       

                                                    var n:int = dgOwner.columns.length;

                                             

                                                    var xx:Number = 0;

                                                    for (var i:int = 0; i < n; i++)

                                                    {

                                                           TextInput(textEditors+).move(xx, 0);

                                                        var ww:Number = dgOwner.columns+.width;

                                                           TextInput(textEditors+).setActualSize(ww, h);

                                                        xx += ww;

                                                      }          

                                                 }

                                             

                                                 private function keyFocusChangeHandler(event:FocusEvent):void

                                                 {

                                                 }

                                            }

                                             

                                            }

                                             

                                            Alex Harui

                                            Flex SDK Developer

                                            Adobe Systems Inc.

                                            Blog: http://blogs.adobe.com/aharui

                                            • 19. Re: datagrid editable row
                                              Mongolian Beef Level 1

                                              Hi,

                                               

                                              Just gave your code a try and, although I did not implement the ITEM_EDIT_END yet, the editor does not do anything in terms of clicking on a row and "enabling" the textfields for that row.  Below is my code along with yours:

                                               

                                              -----------------------------------------------------------------------

                                              package
                                              {
                                                  public class TestBean
                                                  {
                                                      [Bindable] private var _processDefName:String;
                                                      [Bindable] private var _processGroupName:String;       
                                                      [Bindable] private var _processSomeName:String;
                                                     
                                                      public function get processDefName():String {
                                                          return _processDefName;
                                                      }
                                                     
                                                      public function set processDefName(value:String):void {
                                                          _processDefName = value;
                                                      }
                                                     
                                                      public function get processGroupName():String {
                                                          return _processGroupName;
                                                      }
                                                     
                                                      public function set processGroupName(value:String):void {
                                                          _processGroupName = value;
                                                      }       
                                                     
                                                      public function get processSomeName():String {
                                                          return _processSomeName;
                                                      }
                                                     
                                                      public function set processSomeName(value:String):void {
                                                          _processSomeName = value;
                                                      }
                                                  }
                                              }

                                              -------------------------------------------------------------------------------

                                              package

                                               

                                              {

                                               

                                              import flash.events.FocusEvent;

                                               

                                               

                                               

                                              import mx.controls.Alert;

                                               

                                              import mx.controls.DataGrid;

                                               

                                              import mx.controls.TextInput;

                                               

                                              import mx.controls.dataGridClasses.DataGridColumn;

                                               

                                              import mx.controls.dataGridClasses.DataGridListData;

                                               

                                              import mx.controls.listClasses.BaseListData;

                                               

                                              import mx.controls.listClasses.IDropInListItemRenderer;

                                               

                                              import mx.controls.listClasses.IListItemRenderer;

                                               

                                              import mx.core.UIComponent;

                                               

                                              import mx.managers.IFocusManagerComponent;

                                               

                                               

                                               

                                              /**

                                               

                                                  *

                                               

                                                    Two TextInput Editor for DataGrid

                                               

                                              */

                                               

                                              public class DataGridMultiFieldEditor extends UIComponent implements IListItemRenderer, IDropInListItemRenderer, IFocusManagerComponent

                                               

                                              {

                                               

                                               

                                               

                                                   private var dgOwner:DataGrid;

                                               

                                               

                                               

                                                   private var textEditors:Array = []

                                               

                                               

                                               

                                                   public function DataGridMultiFieldEditor()

                                               

                                                   {

                                               

                                                        super();

                                               

                                                   }

                                               

                                               

                                               

                                               

                                               

                                               

                                               

                                                   public function get fullValue():String

                                               

                                                   {

                                               

                                                        dgOwner = owner as DataGrid;

                                               

                                               

                                               

                                                        var colInd:Number = dgOwner.editedItemPosition.columnIndex;

                                               

                                               

                                               

                                                        return TextInput(textEditors[colInd]).text;

                                               

                                                   }

                                               

                                               

                                               

                                                   private var _data:Object;

                                               

                                               

                                               

                                                   public function get data():Object

                                               

                                                   {

                                               

                                                        return _data;

                                               

                                                   }

                                               

                                               

                                               

                                                   public function set data(value:Object):void

                                               

                                                   {

                                               

                                                        _data = value;

                                               

                                                        invalidateProperties ();

                                               

                                                   }

                                               

                                               

                                               

                                                   private var _listData:BaseListData;

                                               

                                               

                                               

                                                   public function get listData():BaseListData

                                               

                                                   {

                                               

                                                        return _listData;

                                               

                                                   }

                                               

                                               

                                               

                                                   public function set listData(value:BaseListData):void

                                               

                                                   {

                                               

                                                        _listData = value;

                                               

                                                   }

                                               

                                               

                                               

                                                   override public function setFocus():void

                                               

                                                   {

                                               

                                                   }

                                               

                                               

                                               

                                                   override protected function createChildren():void

                                               

                                                   {

                                               

                                                        dgOwner = owner as DataGrid;

                                               

                                               

                                               

                                                        super.createChildren ();

                                               

                                               

                                               

                                                      var child:TextInput;

                                               

                                                        textEditors = new Array();

                                               

                                               

                                               

                                                      var n:int = dgOwner.columns.length;

                                               

                                               

                                               

                                                      for (var i:int = 0; i < n; i++)

                                               

                                                      {

                                               

                                                          child = new TextInput();

                                               

                                                          textEditors.push(child)

                                               

                                                          addChild(child);

                                               

                                                      }

                                               

                                                   }

                                               

                                               

                                               

                                                   override protected function commitProperties():void

                                               

                                                   {

                                               

                                                        dgOwner = owner as DataGrid;

                                               

                                               

                                               

                                                        super.commitProperties();

                                               

                                               

                                               

                                                      var n:int = dgOwner.columns.length;

                                               

                                               

                                               

                                                      for (var i:int = 0; i < n; i++)

                                               

                                                      {

                                               

                                                            var dgColumn:DataGridColumn = dgOwner.columns[i];

                                               

                                                            var value:String = data[dgColumn.dataField];

                                               

                                                            TextInput(textEditors).text = value;

                                               

                                                      }

                                               

                                                   }

                                               

                                               

                                               

                                                   override protected function updateDisplayList(w:Number, h:Number):void

                                               

                                                   {

                                               

                                                        dgOwner = owner as DataGrid;

                                               

                                               

                                               

                                                        super.updateDisplayList(w, h);

                                               

                                               

                                               

                                                      var n:int = dgOwner.columns.length;

                                               

                                               

                                               

                                                      var xx:Number = 0;

                                               

                                                      for (var i:int = 0; i < n; i++)

                                               

                                                      {

                                               

                                                           TextInput(textEditors).move(xx, 0);

                                               

                                                          var ww:Number = dgOwner.columns.width;

                                               

                                                           TextInput(textEditors).setActualSize(ww, h);

                                               

                                                          xx += ww;

                                               

                                                        }      

                                               

                                                   }

                                               

                                               

                                               

                                                   private function keyFocusChangeHandler(event:FocusEvent):void

                                               

                                                   {

                                               

                                                   }

                                               

                                              }
                                              ----------------------------------------------------------------------------------

                                              <?xml version="1.0" encoding="utf-8"?>
                                              <mx:Application
                                                  xmlns:mx="http://www.adobe.com/2006/mxml"
                                                  layout="absolute"
                                                  creationComplete="init();">

                                               

                                                  <mx:Script>
                                                      <![CDATA[
                                                          import mx.collections.ArrayCollection;
                                                                 
                                                          [Bindable] private var col:ArrayCollection = new ArrayCollection();
                                                         
                                                          private function init():void {
                                                         
                                                                             
                                                              var tbA:TestBean = new TestBean();
                                                              tbA.processDefName = "A";
                                                              tbA.processGroupName = "Group A";
                                                              tbA.processSomeName = "AAAAAAAA";
                                                             
                                                              var tbB:TestBean = new TestBean();
                                                              tbB.processDefName = "B";
                                                              tbB.processGroupName = "Group B";
                                                              tbB.processSomeName = "BBBBBBBB";
                                                             
                                                              col.addItem(tbA);
                                                              col.addItem(tbB);               
                                                             
                                                          }
                                                      ]]>
                                                  </mx:Script>  

                                               

                                                  <mx:VBox>
                                                      <mx:DataGrid editable="true" id="dg" dataProvider="{col}" width="300">
                                                          <mx:columns>
                                                              <mx:DataGridColumn width="100" editable="true" dataField="processGroupName" headerText="NAME" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue"/>
                                                              <mx:DataGridColumn width="100" editable="true" dataField="processDefName" headerText="TYPE" editorXOffset="-100" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue" />
                                                              <mx:DataGridColumn width="100" editable="true" dataField="processSomeName" headerText="MISC" editorXOffset="-200" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue"/>
                                                          </mx:columns>
                                                      </mx:DataGrid>
                                                  </mx:VBox>

                                               

                                              </mx:Application>

                                              ----------------------------------------------------

                                              • 20. Re: datagrid editable row
                                                Flex harUI Adobe Employee

                                                I’m not sure what you mean by "enabling".  I used the code you posted earlier.  I click on a row and all three cells get covered by TextInputs.  I can click in any of them and start typing.  I'm guessing you can't start typing right away because you haven't implemented setFocus()

                                                 

                                                Alex Harui

                                                Flex SDK Developer

                                                Adobe Systems Inc.

                                                Blog: http://blogs.adobe.com/aharui

                                                • 21. Re: datagrid editable row
                                                  Mongolian Beef Level 1

                                                  Hmm... The code that I posted earlier only had one cell become the TextInput when you click on it (like how the default DG works).  I could never get 3 TextInputs to show when I click on a row.  I just re-ran this code too.  Are you sure?