10 Replies Latest reply on Sep 30, 2010 2:22 PM by JonoB

    Datagrid ItemEditor

    JonoB

      Hi, I have a datagrid column as follows:


      <mx:DataGridColumn

      headerText="Description"
      dataField="description"
      editable="true"   
      editorXOffset="2" editorYOffset="2"
      editorHeightOffset="20" editorWidthOffset="60"
      itemEditor="com.jono.controls.DgItemEditor"
      wordWrap="true"
      />

      And a very simple DgItemEditor:


      <?
      xml version="1.0" encoding="utf-8"?>
      <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"
      wordWrap="true" backgroundColor="0xFFFFFF" backgroundAlpha="1">
      </mx:TextArea>

      Basically, this allows for a small 'popup' when the user edits a cell  in the datagrid, allowing for more space to type. The problem that I am  having is that the datagrid gridlines show through the itemeditor -  i.e. the itemeditor is transparent. Is there any way that I can force it  to be opaque?

       

      Thanks for any advice that you can provide.

        • 1. Re: Datagrid ItemEditor
          Flex harUI Adobe Employee

          Subclass TextArea, get the textField and set the background and

          backgroundColor properties.

          • 2. Re: Datagrid ItemEditor
            JonoB Level 1

            Thanks for the reply.

             

            I changed my itemeditor as follows:

             

            package com.jono.controls
            {
                import mx.controls.TextArea;

             

                public class TextAreaItemEditor extends TextArea

                {
                    public function TextAreaItemEditor() {
                        super();
                    }

             

                    override protected function commitProperties():void {
                        super.commitProperties();
                        this.textField.alpha = 1;
                        this.textField.background = true;
                        this.textField.backgroundColor = 0xFFFFFF;
                    }       
                }

            }

             

            But I;m still left with the same result - gridlines still show through. Am I missing something obvious here?

            • 3. Re: Datagrid ItemEditor
              Flex harUI Adobe Employee

              I guess I should've double checked.  TextArea has code that sets

              background=false.  Try drawing a white rectangle into the TextArea's

              graphics instead in updateDisplayList

               

                  this.graphics.clear();

                  this.graphics.beginFill(0xFFFFFF);

                  this.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

                  this.graphics.endFill();

              • 4. Re: Datagrid ItemEditor
                JonoB Level 1

                Still doesnt work unfortunately

                 

                package com.jono.controls
                {
                    import mx.controls.TextArea;

                 

                    public class TextAreaItemEditor extends TextArea
                    {
                        public function TextAreaItemEditor() {
                            super();
                        }
                       
                        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                            this.graphics.clear();
                            this.graphics.beginFill(0xFFFFFF);
                            this.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                            this.graphics.endFill();
                        }   
                    }
                }

                 

                The editor background color is affected (I tried with FF0000 colour, for example), but the gridlines underneath still show through.

                • 5. Re: Datagrid ItemEditor
                  Flex harUI Adobe Employee

                  Walk the parent chain from the TextField up and see if someone has set alpha

                  somewhere.

                  • 6. Re: Datagrid ItemEditor
                    JonoB Level 1

                    Thanks again for the reply.

                     

                    I'd like to pretend that I know what you mean, but unfortunately I dont! I tried stepping through the code in debug mode, but didnt notice anything out of the ordinary. That's probably down to me more than anything....

                    • 7. Re: Datagrid ItemEditor
                      Flex harUI Adobe Employee

                      Check the alpha property on each parent.  I would do this by putting a

                      breakpoint on a mouseOver handler in the editor.  The mouseOver event.target

                      should be the TextField.  Check it's alpha property, then it's parent's

                      alpha property and on up to the DataGrid itself.   It sounds like one of

                      them is going to have alpha<1.  I can't imagine how gridlines could show

                      through an opaque background.  Maybe we need a snapshot of what it looks

                      like.

                      • 8. Re: Datagrid ItemEditor
                        JonoB Level 1

                        You have the patience of a saint.

                         

                        Ok, so I stepped up the parent chain (hey, I learned something new!)

                        TextField -> TextAreaItemEditor -> ListBase -> Datagrid (if memory serves me correct).


                        As far as I could see, everything was set to an alpha of 1. There was also a property called opaqueBackground for both the TextField and TextArea, that I tried settting to 'true', but that seemed to make the background pure black...albeit that the gridlines were still visible!

                         

                        A screenshot (without the opaqueBackground property on default settings) as follows. The itemEditor is on the Description column.

                        http://img715.imageshack.us/img715/8264/textfield.png

                        • 9. Re: Datagrid ItemEditor
                          Flex harUI Adobe Employee

                          I probably should've asked for a picture sooner.  It made me look at the

                          code and realize that the lines are floating over the grid (actually the

                          ListContentHolder), they are not behind.

                           

                          I think your choices are:

                           

                          1) screw around with childIndex until you get it right.  The update code

                          will be fighting you though.

                          2) mask off the lines where the editor is

                          3) Use the popup editor example from my blog.

                           

                          If you go with 2, you can get the sprite that holds the lines from the

                          ListBaseContentHolder via

                                  listContent.getChildByName("lines")

                          • 10. Re: Datagrid ItemEditor
                            JonoB Level 1

                            Alex,

                             

                            Many thanks for all your help.

                             

                            In the end, I decided to make the itemeditor the same width as the datagrid column, and then hide the datagrid horizontal lines on the FocusIn event (and then display them again on Focus out). The seems to work fine for my purposes.