3 Replies Latest reply on Aug 22, 2009 1:53 PM by ShardulSingh

    Re:Changing datagrid row color flex2

    Venkat,Flex Developer

      I am migating my application from Flex1.5  to Flex 2 i used dg.setpropertiesAt(i, "backgroundColor:0xFF000") to change datagrid particular background color but this one is not working in Flex2 can i have the alternative for this

        • 1. Re:Changing datagrid row color flex2
          ShardulSingh Level 3

          Hi,

          Pls try the code below.

           

           

           

          MainApplication

           

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="vertical">

           

          <mx:Script>

          <![CDATA[

          import mx.collections.ArrayCollection;

          import mx.events.ListEvent;

           

          [Bindable]

          private var dgArrayCollection:ArrayCollection=

          new ArrayCollection([

          {color:'0xFF0000', names:'John'},

          {color:'0x00FF00', names:'Alex'},

          {color:'0x0000FF', names:'Peter'},

          {color:'0xFF0000', names:'Sam'},

          {color:'0x00FF00', names:'Alis'},

          {color:'0x0000FF', names:'Robin'},

          {color:'0xFF0000', names:'Mark'},

          {color:'0x00FF00', names:'Steave'},

          {color:'0x0000FF', names:'Fill'},

          {color:'0xFF0000', names:'Abraham'},

          {color:'0x00FF00', names:'Hennery'},

          {color:'0x0000FF', names:'Luis'},

          {color:'0xFF0000', names:'Herry'},

          {color:'0x00FF00', names:'Markus'},

          {color:'0x0000FF', names:'Flip'},

          {color:'0xFF0000', names:'John_1'},

          {color:'0x00FF00', names:'Alex_1'},

          {color:'0x0000FF', names:'Peter_1'},

          {color:'0xFF0000', names:'Sam_1'},

          {color:'0x00FF00', names:'Alis_1'},

          {color:'0x0000FF', names:'Robin_1'},

          {color:'0xFF0000', names:'Mark_1'},

          {color:'0x00FF00', names:'Steave_1'},

          {color:'0x0000FF', names:'Fill_1'},

          {color:'0xFF0000', names:'Abraham_1'},

          {color:'0x00FF00', names:'Hennery_1'},

          {color:'0x0000FF', names:'Luis_1'},

          {color:'0xFF0000', names:'Herry_1'},

          {color:'0x00FF00', names:'Markus_1'},

          {color:'0x0000FF', names:'Flip_2'},

          {color:'0xFF0000', names:'John_2'},

          {color:'0x00FF00', names:'Alex_2'}

          ]);

           

          private function onItemClick(event : ListEvent):void

          {

          var dataObj : Object = event.itemRenderer.data;

          dataObj.color = "0xFF00FF";

          event.itemRenderer.data = dataObj;

          }

          ]]>

          </mx:Script>

          <mx:VBox width="300" height="100%"

          horizontalAlign="center"

          verticalAlign="middle">

          <mx:DataGrid id="dg" width="50%"

          height="100%"

          borderStyle="none"

          itemRenderer="DataGridItemRenderer"

          dataProvider="{dgArrayCollection}"

          itemClick="onItemClick(event)">

          <mx:columns>

          <mx:DataGridColumn dataField="names" headerText="Names"/>

          </mx:columns>

          </mx:DataGrid>

          </mx:VBox>

          </mx:Application>

           


          DataGridItemRenderer

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

          width="100" height="30" horizontalGap="5"

          backgroundColor="{data.color}">

          <mx:Script>

          <![CDATA[

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

          {

          super.data = value;

          }

          ]]>

          </mx:Script>

          <mx:Label width="75" height="30"

          text="{data.names}"/>

          </mx:HBox>

           

           

          Pls let me know if you have any issue,or this post helps you.

           

           

           

          with Regards

          Shardul Singh Bartwal

          • 2. Re:Changing datagrid row color flex2
            Venkat,Flex Developer Level 1

            HI shardul

             

            Thanks for your replay this one is useful when there is a event occurs but for me a particular row color should be changed when the data grid is loaded

             

            public function changecolor():void
                    {
                    for (var i:Number=0; i<ArrayCollection(popupdg.dataProvider).length; i++){
                    popupdg.selectedIndex = i;
                         if(popupdg.selectedItem.cancelled==true)
                                   {
                                                             
                       popupdg.setpropertiesAt(i, "backgroundColor:0xFF000");
                      
                                   }
                    }
                    popupdg.selectedIndex = -1;
                    }

             

             

            This is my code in flex1.5

            • 3. Re:Changing datagrid row color flex2
              ShardulSingh Level 3

              Ok.....then u dont require to use the color change on the click of row.But I am already changing the color of each row on the load of datagrid.

              I am using three diffrent colors, u can use one or any number as u wish.

               

               

              Shardul singh Bartwal