16 Replies Latest reply on Nov 23, 2009 10:35 PM by David_F57

    DataGrid with TextArea in itemRenderer using drag and drop

    jdesko Level 2

      I have a DataGrid and in one of the columns I am using an itemRenderer, in this itemRenderer I have a spark textArea, with this textArea I am have scrolling enabled.  Also with this dataGrid I have drag enabled (for drag/drop). 

       

      I am seeing two problems if anyone has any suggestions:

      1. When you try to scroll the textArea, dragging kicks in, so you get partial scrolling then dragging.

      2. Using the up/down symbols of the scroller, the scrollbar moves but the text in the dataGrid cell does not.

       

      Thanks,

      John

       

       

      This is the itemRenderer:

       

       

       

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

      <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"

      implements="mx.controls.listClasses.IDropInListItemRenderer">

       

      <fx:Script>

      <![CDATA[

      import mx.events.FlexEvent;

      import mx.controls.dataGridClasses.DataGridListData;

      import mx.controls.listClasses.BaseListData;

      import mx.controls.listClasses.IDropInListItemRenderer;

      import flashx.textLayout.elements.TextFlow;

      import flashx.textLayout.conversion.TextConverter;

       

      private var _listData:BaseListData;

      [Bindable]

      private var thisTextFlow:TextFlow;

       

      public function get listData():BaseListData

      {

      return _listData;

      }

       

      public function set listData(value:BaseListData):void

      {

      _listData = value;

      }

       

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

      {

      if (value != null)

      {

      super.data = value;

       

      thisTextFlow = TextConverter.importToFlow(data[(listData as DataGridListData).dataField], TextConverter.TEXT_FIELD_HTML_FORMAT);

      }

       

      dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

      }

      ]]>

      </fx:Script>

      <s:TextArea id="textArea" textFlow="{thisTextFlow}"

      editable="false" borderVisible="false"

      width="100%"

      contentBackgroundAlpha="0"

      heightInLines="4"

      verticalScrollPolicy="auto" horizontalScrollPolicy="auto"/>

      </mx:VBox>

        • 1. Re: DataGrid with TextArea in itemRenderer using drag and drop
          David_F57 Level 5

          Hi,

           

          Try turning the scrollpolicy off in the surrounding vbox and see if that helps.

           

          David

          • 2. Re: DataGrid with TextArea in itemRenderer using drag and drop
            jdesko Level 2

            Hello David;

             

            Thanks again.  Your suggestion didn't help, sorry to say.  Below is the new top portion of the renderer.  Thinking out loud, what if I add an event listener to the scroller that disables dragEnabled until scroll is complete?

             

            Thanks,

            John

             

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

            <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"

            implements="mx.controls.listClasses.IDropInListItemRenderer"

            verticalScrollPolicy="off" horizontalScrollPolicy="off">

            • 3. Re: DataGrid with TextArea in itemRenderer using drag and drop
              David_F57 Level 5

              Hi,

               

              On the thinking out loud process, how is the grid row height set, (variable or fixed). should the vbox be width and height 100% to fill the cell, should the textarea be 100% width and height to fit the box, is setting the height by lines the right way to go here. And should the grids column be set to editable=false.

               

              If not some or all of the above, not to sure why the drag would kick in when scrolling, unless you are scrolling the cell/vbox and not the textarea.

               

              David

              • 4. Re: DataGrid with TextArea in itemRenderer using drag and drop
                jdesko Level 2

                Thanks again David,

                 

                Below is part of the grid properties.  On this dataGrid(dg) I have multiple columns, the particular column using the renderer is the only column that would have multiple lines; some of the data in this column might be one line or 40(example), that is why in the renderer I have heightInLines = 4 to have a limit, I used heightInLines since the textFlow is html and the fontsize can vary.  The renderer needs to fill the dg cell that is why the renderers textArea is set to 100% (else it uses default size), when the VBox size is 100% textArea still uses it's default size.  This dg is not editable that is why I have editable=false.

                 

                When dg dragEnabled = false the scroller on the renderer works great, but ... using the up/down symbols does not work still.

                 

                Thanks again, John

                 

                variableRowHeight true or false didn't help. 

                 

                Here is part of the dataGrid properties:

                editable="false"

                allowMultipleSelection="false"

                dragEnabled="true"

                dropEnabled="false"

                variableRowHeight="false"

                • 5. Re: DataGrid with TextArea in itemRenderer using drag and drop
                  David_F57 Level 5

                  Ok,

                   

                  One last thought before I start experimenting,set scrollpolicy on(for testing purposes) if that has no effect set the column to draggable = false. I'm going to try a similar thing only using the itemeditor in the column rather than an item renderer.

                   

                  David.

                  • 6. Re: DataGrid with TextArea in itemRenderer using drag and drop
                    jdesko Level 2

                    David,

                     

                    With VBox(renderer) scrollpolicy set to on didn't help, since we are scrolling the data in the textArea of the renderer.  Also, the draggable property on column sets whether the user can move the column to a new position (it would be nice if columns had a dragenabled property).

                     

                    I'm thinking a solution would be/ and I'm trying to figure out an event listener for the textArea's scroller - mousedown - dataGrid.dragEnabled = false, mouseup - dataGrid.dragEnabled = true (there are other rows the user can select for dragging).

                     

                    Thanks again for being a glutton for punishment ,

                    John

                    • 7. Re: DataGrid with TextArea in itemRenderer using drag and drop
                      David_F57 Level 5

                      Sorry, I wasn't clear, set the textareas scrollpolicy on, it just makes it a little easier when trying to work out what going on, even if the grid has drag enabled you can just disable it for the textarea column (again to make it easier to see whats going on). The idea of the columns draggable property being used is so you could for instance on mousedown in the contentarea of the textarea to switch it backon and then off after dragging(as per your thoughts on controlling the drag).

                       

                      <mx:DataGrid x="516" y="201" width="415" height="225">

                      <mx:columns>

                      <mx:DataGridColumn headerText="Column 1" dataField="col1" editable="false" draggable="false">

                      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>

                      </mx:columns>

                      </mx:DataGrid>

                      • 8. Re: DataGrid with TextArea in itemRenderer using drag and drop
                        jdesko Level 2

                        David;

                         

                        Below is the renderer with mouse listeners that is working - except - the listener was for scroller, the listener's are firing on mouse up/down on the whole textArea.  Also, I thought that renderers were for display and not have listeners, from a best practice perspective.  Also, the scroller's up/down symbols move the scrollbar but not the textArea?

                         

                        So anyways, this is working except above:

                         

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

                        <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"

                        implements="mx.controls.listClasses.IDropInListItemRenderer"

                        creationComplete="init()">

                         

                        <fx:Script>

                        <![CDATA[

                        import mx.events.FlexEvent;

                        import mx.controls.dataGridClasses.DataGridListData;

                        import mx.controls.listClasses.BaseListData;

                        import mx.controls.listClasses.IDropInListItemRenderer;

                        import flashx.textLayout.elements.TextFlow;

                        import flashx.textLayout.conversion.TextConverter;

                         

                        private var _listData:BaseListData;

                        [Bindable]

                        private var thisTextFlow:TextFlow;

                         

                        private function init():void

                        {

                        textArea.scroller.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);

                        textArea.scroller.addEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);

                        }

                         

                        private function mouseDown_handler(event:MouseEvent):void

                        {

                        parentDocument.dataGrid.dragEnabled = false;

                        }

                         

                        private function mouseUp_handler(event:MouseEvent):void

                        {

                        parentDocument.dataGrid.dragEnabled = true;

                        }

                         

                        public function get listData():BaseListData

                        {

                        return _listData;

                        }

                         

                        public function set listData(value:BaseListData):void

                        {

                        _listData = value;

                        }

                         

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

                        {

                        if (value != null)

                        {

                        super.data = value;

                         

                        thisTextFlow = TextConverter.importToFlow(data[(listData as DataGridListData).dataField], TextConverter.TEXT_FIELD_HTML_FORMAT);

                        }

                         

                        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

                        }

                         

                        ]]>

                        </fx:Script>

                        <s:TextArea id="textArea" textFlow="{thisTextFlow}"

                        editable="false" borderVisible="false"

                        width="100%"

                        contentBackgroundAlpha="0"

                        heightInLines="4"/>

                        </mx:VBox>

                        • 9. Re: DataGrid with TextArea in itemRenderer using drag and drop
                          David_F57 Level 5

                          damn I need a smoke and coffee, mind is wandering in the wrong direction, disregard comment on draggable column, anyway once i finish what i'm supposed to be doing i'll have a better look at this

                           

                          David

                          • 10. Re: DataGrid with TextArea in itemRenderer using drag and drop
                            jdesko Level 2

                            Forgot, the problem with the itemRenderer above is that it is only reusable with a DataGrid named dataGrid. 

                            • 11. Re: DataGrid with TextArea in itemRenderer using drag and drop
                              David_F57 Level 5

                              Ok,

                               

                              Now I might be wrong but if you consider that the textarea is a part of the scroller view port the mouse events would effect more than just the scrollbars the issue here may be how the events are propagating. (now coffee, then experimenting- I live for self confusion ).

                               

                              David.

                              • 12. Re: DataGrid with TextArea in itemRenderer using drag and drop
                                jdesko Level 2

                                I wish you didn't mention smoke ... yesterday I was asked to cut back on the amount of per day cigars ...

                                • 13. Re: DataGrid with TextArea in itemRenderer using drag and drop
                                  jdesko Level 2

                                  Below is code that is working and is re-usable, and if a textArea has a visible scrollbar than when that scrollbar has mouse down/up it sets the dataGrid to dragEnable = false/true to take care of the problem with the textArea dragging and scrolling at the same time.

                                   

                                  One minor thought/issue is:

                                  1. The size of this renderer using both a VBox and a textArea - but I wanted a scrollable text area that handles textflow.

                                   

                                   

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

                                  <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"

                                  implements="mx.controls.listClasses.IDropInListItemRenderer"

                                  creationComplete="init()">

                                   

                                  <fx:Script>

                                  <![CDATA[

                                  import mx.controls.DataGrid;

                                  import mx.events.FlexEvent;

                                  import mx.controls.dataGridClasses.DataGridListData;

                                  import mx.controls.listClasses.BaseListData;

                                  import mx.controls.listClasses.IDropInListItemRenderer;

                                  import flashx.textLayout.elements.TextFlow;

                                  import flashx.textLayout.conversion.TextConverter;

                                   

                                  private var dg:DataGrid;

                                  private var _listData:BaseListData;

                                  [Bindable]

                                  private var thisTextFlow:TextFlow;

                                   

                                  private function init():void

                                  {

                                  dg = DataGrid(_listData.owner);

                                  textArea.scroller.verticalScrollBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);

                                  textArea.scroller.horizontalScrollBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);

                                  }

                                   

                                  private function mouseDown_handler(event:MouseEvent):void

                                  {

                                  dg.dragEnabled = false;

                                  textArea.scroller.verticalScrollBar.addEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);

                                  textArea.scroller.horizontalScrollBar.addEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);

                                  }

                                   

                                  private function mouseUp_handler(event:MouseEvent):void

                                  {

                                  dg.dragEnabled = true;

                                  textArea.scroller.verticalScrollBar.removeEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);

                                  textArea.scroller.horizontalScrollBar.removeEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);

                                  }

                                   

                                  public function get listData():BaseListData

                                  {

                                  return _listData;

                                  }

                                   

                                  public function set listData(value:BaseListData):void

                                  {

                                  _listData = value;

                                  }

                                   

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

                                  {

                                  if (value != null)

                                  {

                                  super.data = value;

                                   

                                  thisTextFlow = TextConverter.importToFlow(data[(listData as DataGridListData).dataField], TextConverter.TEXT_FIELD_HTML_FORMAT);

                                  }

                                   

                                  dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

                                  }

                                   

                                  ]]>

                                  </fx:Script>

                                  <s:TextArea id="textArea" textFlow="{thisTextFlow}"

                                  editable="false" borderVisible="false"

                                  width="100%"

                                  contentBackgroundAlpha="0"

                                  heightInLines="4"/>

                                  </mx:VBox>

                                  • 14. Re: DataGrid with TextArea in itemRenderer using drag and drop
                                    jdesko Level 2

                                    Hey David;

                                     

                                    I think I got it, see above post.  Thanks for your help and much needed chuckle (I live for self confusion), but I will blame you for having a midnight cigar

                                     

                                    Thanks Again,

                                    John

                                     

                                     

                                    Steve McCroskey: Looks like I picked the wrong week to quit drinking.


                                    Steve McCroskey: Looks like I picked the wrong week to quit smoking.

                                    Steve McCroskey: Looks like I picked the wrong week to quit sniffing glue.

                                    Steve McCroskey: Looks like I picked the wrong week to quit amphetamines

                                    • 15. Re: DataGrid with TextArea in itemRenderer using drag and drop
                                      David_F57 Level 5

                                      Good job

                                       

                                      I have a slightly different approach sort of working, i switch the drag off hoverover and back on when hover out, then I use the textarea mousedown event to switch it back on.

                                       

                                      David

                                       

                                      nb: Its late tuesday and I haven't even done mondays real work yet (ah well....I'll try glue sniffing )

                                      • 16. Re: DataGrid with TextArea in itemRenderer using drag and drop
                                        David_F57 Level 5

                                        References to a classic movie, that brings back memories of the good old days, food fights at the local cinema waiting for the film to start and a mass pillow fights 2 days later at the local drive-in while waiting for the film to start. Time to go through the video library for a taste of nostalgia(yesterdays work will have to wait till tomorrow).