12 Replies Latest reply on Dec 7, 2009 12:16 PM by Daniel Cantin

    AdvancedDataGrid control cell display

    Daniel Cantin

      Hi,

      I use the tool "AdvancedDataGrid" to manage a shipment calendar. The lines show hours of the day and the columns the date of the shipment.

      Exemple:


      Times 2009-12-02 2009-12-03 2009-12-04
      08:00 -
      --value1-- ---value2-- ---value3--
      08:30 --value4--- ---value5-- ---value6--

      Etc.


      I use "itemRenderer" class to control the background color of the cell in relation with the shipment type. If there is no shipment for that hour in the day the cell is unchanged.


      But in the reality often there is more then one shipment type per hour in one day, so I would like to be able to divide the cell in more then one color to show all types of shipment.

       

      I don't know if it is possible to do that may be using a kind of HTML editor.

       

      Thanks.

       

       

        • 1. Re: AdvancedDataGrid control cell display
          =VA=FyreHeart Level 2

          I'd recommend creating another item renderer with the color combination you want, and then dynamically determine the renderer with actionscript.

           

          Something like this:

           

          TwoColorItemRenderer.mxml

          <mx:VBox blah=blah>
               <mx:Canvas blah=blah color="#0000FF">

               </mx:Canvas>

               <mx:Canvas blah=blah color="#FF0000">

               </mx:Canvas>

          </mx:VBox>

           

          And then in you application file's ActionScript:

          <mx:Script>
                  <![CDATA[

               protected function determineBackgroundColor():void {

                    if(totalShipments > 1)

                         myDataGrid.itemRenderer = 'TwoColorItemRenderer'

                    else

                         myDataGrid.itemRenderer = 'NormalItemRenderer'

               }

                 ]]> 
          </mx:Script>

          1 person found this helpful
          • 2. Re: AdvancedDataGrid control cell display
            Daniel Cantin Level 1

            Hi,

             

               Thanks for the answer, my question is when will I call this function "determineBackgroundColor()" to be able to change setting of each cell.

             

            Regards,

            • 3. Re: AdvancedDataGrid control cell display
              =VA=FyreHeart Level 2

              As soon as you're done loading your data. If you're using HTTPService to load your data, I'd recommend something like this:

               

              <mx:Script>
                      <![CDATA[

                        protected function assignDataToArray(event:ResultEvent):void {
                              DataGridDataSource = event.result.Data.record;
                              determineBackgroundColor(); //Once we have our data, format the datagrid - You could also pass DataGridDataSource to the function
                          }


                      ]]>
                  </mx:Script>

               

              <mx:HTTPService id="getData" method="post" fault="faultHandler(event)"
                      url="http://www.example.com/myData.xml"
                      result="assignDataToArray(event)" />

              • 4. Re: AdvancedDataGrid control cell display
                Daniel Cantin Level 1

                Hi,

                 

                     Excuse me but i am not an expert with Flex, did you mean that i have to read each cell of the DataGridDataSource and then control some properties to change display settingor assign renderer.

                 

                Regards.

                • 5. Re: AdvancedDataGrid control cell display
                  =VA=FyreHeart Level 2

                  Admittedly, I'm not a Flex expert myself, but I have some experience with the DataGrids (plain, Advanced, and OLAP). I realize the pseudocode above doesn't give you a complete picture, but without seeing your actual code I'm not sure I could give you much more.

                   

                  As far as looping through, that's one way to do it, but Flex makes it difficult to loop through cell-by-cell (which is one of my pet peeves.)

                   

                  In your case, I'd try to cheat by using the AdvancedDataGridColumn's labelFunction property. So a more complete version of your function would look something like this:

                   

                  protected function determineBackgroundColor(item:Object, column:AdvancedDataGridColumn):String {

                   

                       if(totalShipments  > 1)

                            column.itemRenderer = 'TwoColorItemRenderer'

                       else

                             column.itemRenderer = 'NormalItemRenderer'

                   

                   

                       #We're not actually changing the value, so when we're done setting the renderer, just return it

                       return item[column.dataField];

                  }


                  <mx:AdvancedDataGridColumn dataField="shipments1" labelFunction="determineBackgroundColor"/>

                   

                  You'll have to determine how totalShipments is calculated. If the total number of shipments is actually displayed in your DataGrid cell, item[column.dataField] should do the trick, like so: if(item[column.dataField] > 1). If not, you'll have to do some sort of calculation to populate the totalShipments variable before the if().

                   

                  Bear in mind I haven't actually tested this, but I think it should work.

                  • 6. Re: AdvancedDataGrid control cell display
                    Daniel Cantin Level 1

                    Hi,

                     

                        Thanks for the answer, i understand your option and it sound good to me, but i have another problem since the columns are generated dynamically using AS. Have you seen AS code to create renderer using class AdvancedDataGridItemRenderer in relation with an AdvanceDataGridColumn.

                     

                    Regards,

                    • 7. Re: AdvancedDataGrid control cell display
                      =VA=FyreHeart Level 2

                      It would look something like this:
                      import     mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;

                       

                      protected var MyItemRenderer:AdvancedDataGridItemRenderer = new AdvancedDataGridItemRenderer();
                      protected function determineBackgroundColor(item:Object, column:AdvancedDataGridColumn):String {
                          MyItemRenderer.<option>=<value>;
                          MyItemRenderer.<option>=<value>;
                          etc.
                         
                           if(totalShipments  > 1)
                              column.itemRenderer = 'MyItemRenderer';
                          etc.
                      }

                       

                      However, you shouldn't need to create the itemRenderers using AS. Create them as usual in MXML, and then just call them via your AS labelFunction.

                       

                      So, say you have three files:

                      RedGreenItemRenderer.mxml

                      OrangeBlackItemRenderer.mxml

                      BlueYellowItemRenderer.mxml

                       

                      Then you can just call them (you may have to import them first, I don't remember) in your AS function:

                       

                      protected function determineBackgroundColor(item:Object, column:AdvancedDataGridColumn):String {

                           if(totalShipments  > 50)
                               column.itemRenderer = 'RedGreenItemRenderer';

                           else if(totalShipments  > 25)
                               column.itemRenderer = 'OrangeBlackItemRenderer';

                           else if(totalShipments  > 1)
                               column.itemRenderer = 'BlueYellowItemRenderer';

                           else
                               column.itemRenderer = 'NormalItemRenderer';

                      }

                       

                      -John

                      1 person found this helpful
                      • 8. Re: AdvancedDataGrid control cell display
                        Daniel Cantin Level 1

                        Hi,

                         

                            Thanks for your answer, all my Grid setting is done using AS, all column groups and columns are created dynamically using AS. So I have to create the renderer the same way. It will be very helpfull for me to get an exemple of how to create  the renderer using AS.

                         

                        Regards.

                        • 9. Re: AdvancedDataGrid control cell display
                          =VA=FyreHeart Level 2

                          Hoo, boy. OK. Creating MXML objects is a tad more tedious in ActionScript, but here goes:

                           

                          import mx.controls.Label;
                                  import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

                           

                                  protected function createItemRenderer(cellText:String):Object {
                                      var myLabel:Label = new Label();
                                      myLabel.text = cellText;
                                      myLabel.x=0;
                                      myLabel.y=0;
                                     
                                      var myCanvas:Canvas = new Canvas();
                                      myCanvas.height=100;
                                      myCanvas.width=100;
                                      myCanvas.horizontalScrollPolicy="off";
                                      myCanvas.verticalScrollPolicy="off";
                                      myCanvas.addChild(myLabel);
                                     
                                      return myCanvas;
                                  }
                                 
                                  protected function determineBackgroundColor(item:Object, column:AdvancedDataGridColumn):String {
                                      var myItemRenderer:Object;
                                      myItemRenderer = createItemRenderer(item[column.dataField]);
                                     
                                      column.itemRenderer=new ClassFactory(myItemRenderer);
                                     
                                      return item[column.dataField];
                                  }

                           

                          This SHOULD work, but the column.itemRenderer= new ClassFactory() line is giving me an error. It works with an MXML object, so I don't yet understand why it won't with an ActionScript object.

                           

                          Anyway, I hope that gets you closer to the goal.

                           

                          -John

                          • 10. Re: AdvancedDataGrid control cell display
                            Daniel Cantin Level 1

                            Hi,

                             

                                Thanks for your answer, i have try your code and i have got the same error in the code. I have been able to find something who work but with 2 major problems. Here is the code in the labelFunction.

                             

                             

                             

                                 if (myText.length > 0)

                                 {

                                      col.itemRenderer=

                            new ClassFactory(renderer.Colonne1);

                                 }

                            else{

                                      col.itemRenderer=

                            new ClassFactory(renderer.Colonne0);

                                 }

                             

                                 I have define two MXML components the first display 2 boxs of different color and the second don`t change the display. It work but the scroll become very slow and the display of the 2 boxs is distributed on others cells.

                             

                                 This issue is very important for the application that i am developping, if we are not able to find a solution can i look somewhere for technical advise.

                             

                            Regards,

                            • 11. Re: AdvancedDataGrid control cell display
                              =VA=FyreHeart Level 2

                              I'm afraid you've reached the limit of my knowledge. If no one else on the forums can help, I'd recommend a pay-per-incident call to Adobe Support.

                               

                              http://www.adobe.com/support/programs/developer/

                               

                              -John

                              • 12. Re: AdvancedDataGrid control cell display
                                Daniel Cantin Level 1

                                Hi,

                                 

                                   Thanks for your help, i have make some others tests and I have a kind of solution. I used an item renderer mapped on the column renderer. Tho code is here:

                                 

                                package

                                 

                                 

                                 

                                 

                                 

                                vues

                                {

                                 

                                 

                                import mx.containers.HBox;

                                 

                                import mx.containers.VBox;

                                 

                                 

                                public class gridColonne extends VBox

                                {

                                 

                                 

                                protected override function createChildren():void

                                {

                                 

                                 

                                super.createChildren();

                                 

                                var boxHaut:HBox = new HBox();

                                 

                                var boxMilieu:HBox = new HBox();

                                 

                                var boxBas:HBox = new HBox();

                                 

                                boxHaut.height = 20;

                                boxHaut.percentWidth = 100;

                                boxHaut.setStyle(

                                "backgroundColor", 0xFF0000);

                                boxHaut.setStyle(

                                "color", 0xFF0000);

                                 

                                 

                                this.addChild(boxHaut);

                                 

                                boxMilieu.height = 20;

                                boxMilieu.percentWidth = 100;

                                boxMilieu.setStyle(

                                "backgroundColor", 0x00FF00);

                                boxMilieu.setStyle(

                                "color", 0x00FF00);

                                 

                                 

                                this.addChild(boxMilieu);

                                 

                                boxBas.height = 20;

                                boxBas.percentWidth = 100;

                                boxBas.setStyle(

                                "backgroundColor", 0x0000FF);

                                boxBas.setStyle(

                                "color", 0x0000FF);

                                 

                                 

                                this.addChild(boxBas);

                                 

                                }

                                 

                                }

                                 

                                }

                                 

                                It is ok for me but i have found that it`s possible to get informations about the column of the grid using these class:

                                 

                                import mx.core.IDataRenderer;

                                 

                                import mx.controls.listClasses.IListItemRenderer

                                 

                                import mx.controls.listClasses.BaseListData;

                                 

                                import mx.controls.listClasses.IDropInListItemRenderer;

                                 

                                 

                                To complete my code I must be able to read the data of the grid column.

                                 

                                Regards