10 Replies Latest reply on Aug 30, 2009 10:12 PM by RUSH-ME

    Drawing graphics over datagrid cells

    RUSH-ME Level 3



      I want to draw lines over cells of a datagrid column dynamically. Is there any way to make this possible?






        • 1. Re: Drawing graphics over datagrid cells
          babo_ya Level 3

          Hi, Try this..


          var g:Graphic = (YOU COMPONENT).graphics;


          g.lineStyle(1, 0x000000);


          g.lineTo(100, 100);



          Here is the doc.




          hope this helps,



          • 2. Re: Drawing graphics over datagrid cells
            RUSH-ME Level 3



            Thanks for your reply.

            I understand what you are saying. However I think it will be different to draw graphics over cells of a datagrid.




            • 3. Re: Drawing graphics over datagrid cells
              Yogi_ACE Level 2

              You can use itemRenderer for it:


              _dataGridColumn.itemRenderer = new ClassFactory(CustomIcon);


              whereas CustomIcon would be your custom class, here you would be creating graphics and by overriding createChildren() method you can add graphic to your cell


              you also have to use set and get method for data



              public function get data():Object{

                   return _data;



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

                   // you can set style to your graphics object if needed



              override protected function createChildren():void{




                   addChild(_text); // Most probably this would be your cell label (Text)



              // By overriding updateDisplayList

              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                   super.updateDisplayList(unscaledWidth, unscaledHeight);

                   _text.x = unscaledWidth*0.1; // Dynamically caltulated, you can adjust it as per your need

                   _graphics.x = _text.x + _text.width + 0.4; // following your text object position



              Note: If you would be editing your cell item data then you have to implement IListItemRenderer, IDropInListItemRenderer



              I believe it would be helpful for you.


              Best Regards,


              • 4. Re: Drawing graphics over datagrid cells
                Barna Biro Level 3

                A more elegant solution would be to extend the DataGrid and implement the drawing functionality. Ideally, you'd implement a method that would draw the desired line across the desired cell by either suplying the position of the cell or by referencing it somehow else ( not sure what you have in mind so there might be other solutions too ).


                If you google a bit and read the docs then you'll find our how to reference a certain cell in the DataGrid ( I'm not really sure if you do this with the default DataGrid component because the method for referencing might be proctected but you can always extend the DataGrid and implement your own logics ).

                1 person found this helpful
                • 5. Re: Drawing graphics over datagrid cells

                  If you choose to use a custom itemrenderer, for ease of use you can simply extend the DataGridItemRenderer class, which allows you to maintain all the original functionality of the DataGridItemRenderer, while overriding the UpdateDisplayList method and adding in your drawing methods there:


                  This is only useful if your drawing it going to take place in the region of the specific cell, only, and if the drawing is based on the data sitting in the item renderer.  (e.g.  If your data has a value of 5, you draw a horizontal line, and if it has a value of 6, you draw a vertical line).


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



                  var g:Graphics = this.graphics;



                  //do drawing here


                  • 6. Re: Drawing graphics over datagrid cells
                    Flex harUI Adobe Employee

                    I don't think TextField has a graphics object so you'll probably have to start with Label and draw on its graphics object.


                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

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

                    • 7. Re: Drawing graphics over datagrid cells
                      RUSH-ME Level 3

                      Hi All


                      Thanks for your warm responses.


                      I think using itemRenderer I can only draw only inside particular cell.

                      However, I want to draw lines between multiple cells of a column.

                      I don't know whether it is possible using itemrenderer or is there any otherway to do it.

                      Please make me clear.






                      • 8. Re: Drawing graphics over datagrid cells
                        RUSH-ME Level 3

                        Hi folks


                        Is there any way we can draw linews between multiple cells of a column in datagrid. Please make suggestions.

                        • 9. Re: Drawing graphics over datagrid cells
                          christopher.mina Level 1

                          You'll need to use the graphics component of the datagrid instead of the individual cell item renderers.  You will do well to extend the dataGrid as a custom component.  In this component you can add the relevant event listeners dispatched from the item renderers (assuming you're drawing between cells based on data and/or interaction that takes place within one or more cells), and you can also override the updateDisplayList method and add your drawing methods there.


                          If you're basing your drawing only on data in the dataprovider and not on events being dispatched from item renderers, then you can override the commit properties method of the datagrid.  Here you will make your determinations of whether or not you need to do some drawing and, if so, call "invalidateDisplayList()" which will in turn force a redraw of the component, and hence will hit the updateDisplayList method.


                          Do actually do the drawing you can access the visible data property of the dataGrid, which is described in the docs as:


                               *  A hash table of data provider item renderers currently in view.

                               *  The table is indexed by the data provider item's UID and is used

                               *  to quickly get the renderer used to display a particular item.


                          To retrieve the renderer, reference the UID of the data in question (UIDUtil.getUID(data)). 


                          Once you have the renderer(s), you can then use standard methods for retrieving their location either locally or globally and then do whatever drawing is required.  You'll have to redraw whenever the data changes or the user scrolls the grid, or possibly interacts with it in any other relevant way.




                          1 person found this helpful
                          • 10. Re: Drawing graphics over datagrid cells
                            RUSH-ME Level 3


                            Many Thanks for your reply.


                            I will try it.