7 Replies Latest reply on Jul 19, 2010 7:58 AM by Arizona_Steve

    Dynamically add border to DataGrid cell.


      Actually, there's a couple of things here. For argument's sake, lets say I have a single column inside a DataGrid where some of the cells within that column are editable and others are not. I have two issues here:


      1: Make only certain cells in the column editable based on ItemRenderer.data.

      2: If a cell is editable, put a border around it as a visual indicator.


      For performance reasons I wish to use the standard ItemRenderer and ItemEditor (which will work in all cases except for one column, where we have a date field). I start by subclassing the DataGridItemRenderer and overriding the validateNow() function. Inside that function I test the editable condition.


      Here's where I am having issues. I can set a border by using border=true and borderColor = 0x000000. While this works, it creates a border that extends to the edge of the datagrid cell in the left and right directions, but not in the top and bottom directions, leaving what effectively looks like two lines at the top and the bottom of the cell. I can try Sprite.graphics.drawRect(), but cannot figure out what surface I'm supposed to be drawing on.


      So how do I go about drawing a border around a cell in a way where I have full control of the output?

      How do I go about making specific cells inside a column editable based on a condition in the data?

        • 1. Re: Dynamically add border to DataGrid cell.
          VRPDeveloper Level 3

          For your second question


          How do I go about making specific cells inside a column editable based  on a condition in the data?


          You can used events like ItemEditBegin ItemEditEnd, ItemEditFocusIN.... In that you can check columnindex and rowindex...

          so on the basis of your data use this events and make it editable accordingly...


          Hope you got my point


          If this post answers your question or helps, please kindly mark it as such.

          • 2. Re: Dynamically add border to DataGrid cell.
            rtalton Level 4

            Where are you setting the border color property?

            • 3. Re: Dynamically add border to DataGrid cell.
              Arizona_Steve Level 1

              The standard DataGridItemRenderer has border and borderColor properties which it inherits from somwhere upstream. My renderer class inherits from the DataGridItemRenderer but setting the border property to true does not have the desired effect.


              Is there any way to get more fine-grained control over the borders?



              • 4. Re: Dynamically add border to DataGrid cell.
                rtalton Level 4

                Thanks for the image, I see what you mean now. I was playing around with this using an in-line itemRenderer; see if you can adapt any of the ideas in my code to style your borders. I'm just using the data itself to enable/disable the editing of cells, set the borderColor and toolTip -- instead of using the itemEditBeginning event, which didn't seem to work for me.


                Also, seeing your render class code might help.


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


                            import mx.events.DataGridEvent;
                            import mx.collections.ArrayCollection;
                            import mx.controls.DateField;
                            private const FORMAT:String = "MM/DD/YYYY";
                            public var cutOffDate:String;
                            public var dateCollection:ArrayCollection = new ArrayCollection([
                                {date: '01/01/2010'},
                                {date: '02/01/2010'},
                                {date: '03/01/2010'},
                                {date: '04/01/2010'},
                                {date: '05/01/2010'},
                                {date: '06/01/2010'},
                                {date: '07/01/2010'},
                                {date: '08/01/2010'},
                                {date: '09/01/2010'},
                                {date: '10/01/2010'},
                                {date: '11/01/2010'},
                                {date: '12/01/2010'}
                            private function initApp():void{
                                cutOffDate = '04/01/2010';
                            private function handleEditEnd(event:DataGridEvent):void {
                                //convert the Date to a string:
                                var newValue:String =
                                    DateField.dateToString(event.target.editedItemRenderer.dropdown.selectedDate, 'MM/DD/YYYY');
                                //assign to the array collection:
                                event.target.editedItemRenderer.data.date = newValue;




                <mx:Binding source="df.text" destination="cutOffDate"/>
                            <mx:DataGridColumn editable="true"
                                headerText="The Dates"
                                 width="150" >
                                            enabled="{DateField.stringToDate(data.date,FORMAT) > DateField.stringToDate(outerDocument.cutOffDate, FORMAT) ? true : false}"
                                            borderColor="{DateField.stringToDate(data.date,FORMAT) > DateField.stringToDate(outerDocument.cutOffDate, FORMAT) ? 0x20c500 : 0xffffff}"
                                            toolTip="{DateField.stringToDate(data.date,FORMAT) > DateField.stringToDate(outerDocument.cutOffDate, FORMAT) ? 'Click to edit' : 'You cannot edit this date'}">                            
                                                    import mx.controls.DateField;
                                                    private const FORMAT:String = "MM/DD/YYYY";


                    <mx:Spacer height="20"/>
                    <mx:Label text="Enable editing of dates prior to:" width="222"/>
                    <mx:DateField id="df" text="{cutOffDate}" change="dateCollection.refresh()" width="213"/>




                Hope this example can help you.

                • 5. Re: Dynamically add border to DataGrid cell.
                  Arizona_Steve Level 1

                  Here's my code:


                  I'd like to substitute the border/borderColor lines with something like Shape.graphics.drawRect(), but cannot seem to find a Sprite to draw onto.


                      public class PricingConditionByLineRenderer extends DataGridItemRenderer {

                          override public function validateNow():void {



                              if (!(listData)) {




                              var dgListData:DataGridListData = listData as DataGridListData;


                              if (data is PricingConditionByLineEntry) {

                                  var pcble:PricingConditionByLineEntry = data as PricingConditionByLineEntry;


                                  if (Helper.pricingConditionByLineEditable(dgListData.dataField, pcble)) {

                                      border = true;

                                      borderColor = 0xff0000;





                  • 6. Re: Dynamically add border to DataGrid cell.
                    Flex harUI Adobe Employee

                    You will have to subclass UIComponent or Label instead of

                    DataGridItemRenderer.  It is extremely lightweight for performance reasons

                    so it doesn't have the capability to draw on it.

                    • 7. Re: Dynamically add border to DataGrid cell.
                      Arizona_Steve Level 1

                      That's pretty much what I ended up doing. It turns out the the performance hit in subclassing Label and drawing the rectangles was minimal for my purposes, so everything is now running as I intended.


                      Thanks for the help, everyone!