3 Replies Latest reply on Nov 12, 2011 6:16 AM by Zolotoj

    Spark DG editing session

    Zolotoj Level 3

      Let's say I have two columns. ONe with a textArea as an item Editor and another with a dropdown.

      I am starting an editing session programmatically in all columns at once and I see a dropdown and a border around a textArea.

      If I click outside of the grid the textArea disappears, but the dropdown stays there.

      In general, is it wrong, and if yes, what a reason might be?

       

      Thanks

        • 1. Re: Spark DG editing session
          Flex harUI Adobe Employee

          I don’t think we support two editors at once, so you’re pretty much on your own here.

          • 2. Re: Spark DG editing session
            Zolotoj Level 3

            Ok, I see. Wasn't my idea in a first place. But, I am also noticing that even with the textArea when I click outside of the grid the editing is not going away - the control still has black but thicker border and clicking back allows continuing editing.

            • 3. Re: Spark DG editing session
              Zolotoj Level 3

              Yes, I realize that, but I took over a project where that was a requirement. Now, I am trying to build a small test case to post it here and ask questions I have, but I cannot replicate this multi editor crap.

              Somehow the original developer could  create editors in multiple columns at the same time. I am hoping someone will give at least an idea how to make it work. Here it goes:

               

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

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

                             width="450" xmlns:local="*"

                              creationComplete="myDG.startEditing(0)">

                  <s:layout>

                      <s:VerticalLayout/>

                  </s:layout>

                  <fx:Script>

                      <![CDATA[               

                          import mx.collections.ArrayCollection;

                          import mx.collections.IList;

                          import mx.core.IFactory;

                          import mx.events.ListEvent;

                          use namespace mx_internal;

                          import spark.components.gridClasses.DataGridEditor;

                          protected var editors:IList = new ArrayCollection();

                          [Bindable]

                          private var myDP:ArrayCollection = new ArrayCollection([

                              {label1:1, quant:3, color:'red'},

                              {label1:2, quant:3, color:'green'}    

                          ]);      

                          public function onChange(index:int):void

                          {

                              for(var i:int = 0; i < myDG.columns.length - 2; i ++){

                                  var column:GridColumn = myDG.columns.getItemAt(i) as GridColumn;

                                  if(column.editable && column.itemEditor){   

                                      myDG.startItemEditorSession(index, i);

                                      var editor:DataGridEditor = myDG.mx_internal::editor;

                                      editors.addItem(editor);

                                  }

                              }

                          }

                         

                      ]]>

                  </fx:Script>

                 

                  <local:testGrid id="myDG" width="100%"

                              dataProvider="{myDP}"

                              >

                      <local:columns>

                         

                     

                          <s:ArrayCollection>

                              <s:GridColumn dataField="label1" headerText="Order #" editable="true">

                                  <s:itemEditor>

                                      <fx:Component>   

                                          <local:TextInputRenderer/>

                                      </fx:Component>

                                  </s:itemEditor> 

                              </s:GridColumn>

                                 

                              <s:GridColumn dataField="quant" headerText="Qty" editable="true">

                                  <s:itemEditor>

                                      <fx:Component>   

                                          <local:TextInputRenderer/>

                                      </fx:Component>

                                  </s:itemEditor> 

                              </s:GridColumn>

                              <s:GridColumn dataField="color" headerText="Color" editable="true" >

                                  <s:itemEditor>

                                      <fx:Component>   

                                          <local:DropDownItemRenderer/>

                                      </fx:Component>

                                  </s:itemEditor>   

                              </s:GridColumn>

                              <s:GridColumn headerText="1234" editable="false">

                                  <s:itemRenderer>

                                      <fx:Component>

                                          <s:GridItemRenderer>

                                              <s:Button/>                               

                                          </s:GridItemRenderer>

                                      </fx:Component>   

                                  </s:itemRenderer>

                              </s:GridColumn>

                          </s:ArrayCollection>

                      </local:columns>

                  </local:testGrid>

                  <s:Button />

              </s:Application>

               

              // testGrid

              package

              {

                  import mx.core.mx_internal;

                  import mx.collections.ArrayCollection;

                  import mx.collections.IList;

                  import spark.components.DataGrid;

                  import spark.components.gridClasses.GridColumn;

               

                  use namespace mx_internal;

                  import spark.components.gridClasses.DataGridEditor;

                 

                  [Bindable]

                  public class testGrid extends DataGrid

                  {

                      protected var editors:IList = new ArrayCollection();

                      public function testGrid()

                      {

                          super();

                          selectionMode="none";

                          editable = true;

                      }

                      private var _data:Object;

                     

                      public function get data():Object{

                          return _data;

                      }

                     

                      public function set data(val:Object):void{

                          _data = val;

                      }

                      override public function startItemEditorSession(rowIndex:int, columnIndex:int):Boolean

                      {

                          this.mx_internal::editor = this.mx_internal::createEditor();

                          return this.editor.startItemEditorSession(rowIndex, columnIndex);

                      }

                      public function startEditing(index:int):void

                      {

                          for(var i:int = 0; i < columns.length - 2; i ++){

                              var column:GridColumn = columns.getItemAt(i) as GridColumn;

                              if(column.editable && column.itemEditor){   

                                  startItemEditorSession(index, i);

                                  var editor:DataGridEditor = mx_internal::editor;

                                  editors.addItem(editor);

                              }

                          }

                      }

                  }   

              }

              // TextInputRenderer

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

              <!--

               

              ADOBE SYSTEMS INCORPORATED

              Copyright 2010 Adobe Systems Incorporated

              All Rights Reserved.

               

              NOTICE: Adobe permits you to use, modify, and distribute this file

              in accordance with the terms of the license agreement accompanying it.

               

              -->

              <!--- The DefaultGridItemEditor class defines the default item renderer used

              by the Spark grid controls, such as DataGrid and Grid.

              The DefaultGridItemEditor  displays a text area control.

              Enter the new value for the cell in the text editor.

               

              <p>Instead of using the DefaultGridItemEditor, you can create

              a custom item editor. The item editor must implement the

              spark.components.gridClasses.IGridItemEditor interface.

              Typically, you create an item editor as a subclass of the

              spark.components.gridClasses.GridItemEditor class.</p>

               

              @see spark.components.DataGrid

              @see spark.components.Grid

              @see spark.components.gridClasses.IGridItemEditor

              @see spark.components.gridClasses.GridItemEditor

              @see spark.components.gridClasses.GridColumn

               

              @langversion 3.0

              @playerversion Flash 10

              @playerversion AIR 2.5

              @productversion Flex 4.5

               

              -->

              <s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"

                                xmlns:s="library://ns.adobe.com/flex/spark"

                                xmlns:mx="library://ns.adobe.com/flex/mx"

                                xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"

                                width="100%" xmlns:ns="library://commons.stoneriver.com"

                                >

                 

                  <fx:Script>

                      <![CDATA[

                          import mx.core.IUITextField;

                          import mx.core.IVisualElement;

                          import mx.events.ResizeEvent;

                         

                          import spark.components.gridClasses.IGridItemRenderer;

                          import spark.core.IEditableText;

                          import spark.primitives.Rect;

                         

                          //--------------------------------------------------------------------------

                          //

                          //  Overridden properties

                          //

                          //--------------------------------------------------------------------------

                         

                          /**

                           *  @private

                           */

                          override public function get value():Object

                          {

                              return textArea.text;           

                          }

                         

                          /**

                           *  @private

                           */

                          override public function set value(newValue:Object):void

                          {

                              textArea.text = newValue != null ? newValue.toString() : "";

                          }

                         

                          //--------------------------------------------------------------------------

                          //

                          //  Overidden methods

                          //

                          //--------------------------------------------------------------------------

                         

                          /**

                           *  @private

                           */

                         

                         

                          /**

                           *  @private

                           */

                          override public function setFocus():void

                          {

                              textArea.setFocus();

                         

                          }

                         

                      ]]>

                  </fx:Script>

                 

                  <!--- The editor's TextArea component.

                 

                  @langversion 3.0

                  @playerversion Flash 10

                  @playerversion AIR 2.5

                  @productversion Flex 4.5

                  -->

                  <s:TextArea id="textArea" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%"/>

                 

              </s:GridItemEditor>

               

              //DropDownItemRenderer

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

              <!--

               

              ADOBE SYSTEMS INCORPORATED

              Copyright 2010 Adobe Systems Incorporated

              All Rights Reserved.

               

              NOTICE: Adobe permits you to use, modify, and distribute this file

              in accordance with the terms of the license agreement accompanying it.

               

              -->

              <!--- The ComboBoxGridItemEditor class defines an item renderer for use

              with the Spark grid controls, such as DataGrid and Grid.

              The ComboBoxGridItemEditor  displays a drop-down list of cell values.

              Select a value to set the new value of the cell.

               

              <p>The following example shows a GridColumn using the ComboBoxGridItemEditor

              as its item editor:</p>

               

              <pre>

              &lt;s:GridColumn dataField="quant"

              headerText="Qty"&gt;

              &lt;s:itemEditor&gt;

              &lt;fx:Component&gt;

              &lt;s:ComboBoxGridItemEditor&gt;

              &lt;s:dataProvider&gt;

              &lt;s:ArrayList&gt;

              &lt;fx:int&gt;0&lt;/fx:int&gt;

              &lt;fx:int&gt;1&lt;/fx:int&gt;

              &lt;fx:int&gt;2&lt;/fx:int&gt;

              &lt;fx:int&gt;3&lt;/fx:int&gt;

              &lt;/s:ArrayList&gt;

              &lt;/s:dataProvider&gt;

              &lt;/s:ComboBoxGridItemEditor&gt;

              &lt;/fx:Component&gt;

              &lt;/s:itemEditor&gt;

              &lt;/s:GridColumn&gt;

              </pre>

               

              @see spark.components.DataGrid

              @see spark.components.Grid

              @see spark.components.gridClasses.GridColumn

               

              @langversion 3.0

              @playerversion Flash 10

              @playerversion AIR 2.5

              @productversion Flex 4.5

               

              -->

              <s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"

                                xmlns:s="library://ns.adobe.com/flex/spark"

                                xmlns:mx="library://ns.adobe.com/flex/mx"

                                xmlns:gridEditorClasses="spark.components.gridEditorClasses.*">

                 

                  <fx:Script>

                      <![CDATA[

                          import mx.collections.ArrayCollection;

                          import mx.collections.ArrayList;

                          import mx.collections.IList;

                          import mx.core.IVisualElement;

                         

                          import spark.components.DataGrid;

                          import spark.events.DropDownEvent;

                          [Bindable]

                          private var myDP:ArrayList = new ArrayList(["red", "green", "blue"]);     

                

                          //--------------------------------------------------------------------------

                          //

                          //  Overriden properties

                          //

                          //--------------------------------------------------------------------------

                         

                          /**

                           *  @private

                           *

                           *  returns the selected value in the comboBox.

                           */

                          override public function get value():Object

                          {

                              if (comboBox.selectedItem)

                                  return comboBox.selectedItem;

                              else

                                  return null;

                          }

                         

                          /**

                           *  @private

                           *

                           *  Set the selected item of the combo box with the data from the

                           *  item.

                           */

                          override public function set value(newValue:Object):void

                          {

                              comboBox.selectedItem = newValue;

                          }

                         

                          //--------------------------------------------------------------------------

                          //

                          //  Properties

                          //

                          //--------------------------------------------------------------------------

                         

                          //----------------------------------

                          //  dataProvider

                          //----------------------------------

                         

                          private var _dataProvider:IList;

                         

                          [Bindable("comboBoxGridItemEditorDataProviderChanged")]

                         

                          /**

                           *  The data provider for the combox box in the item editor.

                           *

                           *  @langversion 3.0

                           *  @playerversion Flash 10

                           *  @playerversion AIR 2.5

                           *  @productversion Flex 4.5

                           */

                          public function get dataProvider():IList

                          {

                              return _dataProvider;

                          }

                         

                          /**

                           *  @private

                           */

                          public function set dataProvider(value:IList):void

                          {

                              if (_dataProvider == value)

                                  return;

                              _dataProvider = value;

                              dispatchEvent(new Event("comboBoxGridItemEditorDataProviderChanged"));

                          }

                          //--------------------------------------------------------------------------

                          //

                          //  Overridden methods

                          //

                          //--------------------------------------------------------------------------

                         

                          /**

                           *  @private

                           */

                          override public function prepare():void{

                              super.prepare();

                          }

                                     

                         

                          /**

                           *  @private

                           */

                          override public function setFocus():void

                          {

                              // delegate focus to the combox box.

                              comboBox.setFocus();

                          }

                         

                          /**

                           *  @private

                           */

                          private function dropDown_openHandler(event:DropDownEvent):void

                          {

                              // Add a mouse down handler for the dropDown part. When

                              // the user clicks in the drop down we want to end the editing

                              // session. We listen to the dataGroup here instead of the dropDown

                              // part to avoid closing the editor when the dropDown's

                              // scrollbar is clicked.

                              if (comboBox.dataGroup)

                                  comboBox.dataGroup.addEventListener(MouseEvent.MOUSE_DOWN, dataGroup_mouseClickHandler, false, 0, true);

                          }

                         

                          /**

                           *  @private

                           */

                          private function dataGroup_mouseClickHandler(event:MouseEvent):void

                          {

                              // When the drop down list is clicked, end the editting session

                              // to allow the edit to be completed with just one click.

                              // Use callLater to let the click and change handlers finish

                              // before we close the editor.

                              callLater(dataGrid.endItemEditorSession);

                          }

                         

                      ]]>

                  </fx:Script>

                 

                  <!--- @private

                 

                  Background to cover the cell that the ComboBox control does not.

                 

                  @langversion 3.0

                  @playerversion Flash 10

                  @playerversion AIR 2.5

                  @productversion Flex 4.5

                  -->

                 

                 

                  <!--- The item editor's ComboBox control.

                 

                  @langversion 3.0

                  @playerversion Flash 10

                  @playerversion AIR 2.5

                  @productversion Flex 4.5

                  -->

                  <s:DropDownList id="comboBox" width="100%" dataProvider="{myDP}" labelField="color"

                                  />

                 

              </s:GridItemEditor>

               

              When I run it I am getting an error:

              TypeError: Error #1009: Cannot access a property or method of a null object reference.

                  at spark.components.gridClasses::DataGridEditor/setEditedItemPosition()[E:\dev\4.5.1\framewo rks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:312]

                  at spark.components.gridClasses::DataGridEditor/dataGrid_gridItemEditorSessionStartingHandle r()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor .as:1204]

                  at flash.events::EventDispatcher/dispatchEventFunction()

                  at flash.events::EventDispatcher/dispatchEvent()

                  at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\co re\UIComponent.as:13128]

                  at spark.components.gridClasses::DataGridEditor/startItemEditorSession()[E:\dev\4.5.1\framew orks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:798]

                  at testGrid/startItemEditorSession()[C:\testarea\Flex\Test Project\gridComboRenderer\src\testGrid.as:34]

                  at testGrid/startEditing()[C:\testarea\Flex\Test Project\gridComboRenderer\src\testGrid.as:41]

                  at gridComboRenderer/___gridComboRenderer_Application1_creationComplete()[C:\testarea\Flex\T est Project\gridComboRenderer\src\gridComboRenderer.mxml:6]

                  at flash.events::EventDispatcher/dispatchEventFunction()

                  at flash.events::EventDispatcher/dispatchEvent()

                  at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\co re\UIComponent.as:13128]

                  at mx.core::UIComponent/set initialized()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:1818]

                  at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.5.1\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:842]

                  at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.5.1\frameworks\projec ts\framework\src\mx\managers\LayoutManager.as:1180]

               

              here is a line with error:

              dataGridEvent.columnIndex = editedItemPosition.columnIndex;

               

              and editedItemPosition is null.

               

              Thanks for any help.