2 Replies Latest reply on Sep 16, 2009 3:54 AM by Fabio Cerioni

    datagrid cell color error

    Fabio Cerioni

      Hi,

       

      we are having some problems with the colors of our customComponents that are used in a DataGrid.

       

      As you can see on the following Image, we user a VBox with two TextAreas, depending on the value (in this case value == "11"), the textarea should appear in blue. The problem that we are focusing is that, once you hace scrolled, every textarea gets blue independently from it value.

       

      Could anyone help to solve this problem? What have we done wrong in our sourcecode (attached at the end)?

       

      Thanks in advance for help.

       

       

      a.jpg

       

      <?xml version="1.0" encoding="utf-8"?>
      
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      
      <mx:DataGrid dataProvider="{myXML.item}" top="10" left="10"  bottom="10" right="10">
      
      <mx:columns>
      
      <mx:DataGridColumn headerText="Column 1" dataField="a">
      
              <mx:itemRenderer>
      
                      <mx:Component>
      
                              <mx:VBox height="55" width="100" render="setBackground()">
      
                                      <mx:Script>
      
                                              <![CDATA[
                                                 private function setBackground():void{
                                                   if(a.text == "11"){
                                                      a.setStyle("backgroundColor","#4682B4");
                                                   }
                                                 }
                                              ]]>
      
                                      </mx:Script>
      
                                      <mx:TextArea id="a" text="{data.a}" editable="false" height="20" width="50"/>
      
                                      <mx:TextArea id="b" text="{data.b}" editable="false" height="20" width="50"/>
      
                              </mx:VBox>
      
                      </mx:Component>
      
              </mx:itemRenderer>
      
      </mx:DataGridColumn>
      
      
      
      <mx:DataGridColumn headerText="Column 2" dataField="c"/>
      
      </mx:columns>
      
      </mx:DataGrid>
      
              <mx:XML id="myXML" xmlns="">
      
                      <DATA>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>11</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>12</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                              <item>
      
                                      <a>13</a>
      
                                      <b>22</b>
      
                                      <c>33</c>
      
                              </item>
      
                      </DATA>
      
              </mx:XML>
      
      </mx:Application>
      
        • 1. Re: datagrid cell color error
          babo_ya Level 3

          <![CDATA[
                                                     private function setBackground():void{
                                                       if(a.text == 11){
                                                          a.setStyle(backgroundColor,#4682B4);
                                                       }
                                                     }
                                                  ]]>

           

          Remove the above function and copy/paste the below function..

           

           

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

          {

               if(value == 11)

               {

           

                    a.setStyle("backgroundColor", 0x4682B4);

           

           

               }

               else

               {

                    a.setStyle("backgroundColor", 0xffffff);

           

               }

           

          }

           

           

           

          hope this helps,

           

          BaBo,

          • 2. Re: datagrid cell color error
            Fabio Cerioni Level 1

            it worked