3 Replies Latest reply on Sep 1, 2009 6:16 AM by nagasreekrishna

    how do i change the cell color of each cell in datagrid dynamically

    nagasreekrishna Level 1

      I have a  datagrid filled in with data..My job is to change the cell color of a particular cell in the datagrid when the user clicks that cell..Please help me asap..I have to change the color of each cell dynamically..

        • 1. Re: how do i change the cell color of each cell in datagrid dynamically
          Andrew Rosewarn Level 3

          Hi There

           

          Try the example below it uses an item renderer and some logic inside it to decide what the condition of the data is and then change the color.  In my example if the value of the data is 5 it changes the color.

           

          The only way I can see to do this is to use an item renderer for your cells.  This is really scruffy and would need tyding up, and maybe with a little more time could do better or someone else may have an idea but none the less this works.

           

          Define a custom component as below;

           

          This has logic to see what the value of the data is proveided by the dataprovider for the row, and if it matches the conditions in this case is equal to 5 sets the background color.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="88" height="26" dataChange="doColor()" borderColor="#000000" borderStyle="solid"
              backgroundAlpha="1">
              <mx:Script>
                  <![CDATA[
                      private function doColor():void {
                          if (data.value == 5) {
                              setStyle('backgroundColor', 0xcccccc);
                          } else {
                              setStyle('backgroundColor', 0xffffff);
                          }
                      }
                  ]]>
              </mx:Script>
          </mx:Canvas>

           

          Now just apply the item renderer in the datagrid and that will do it.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:ns1="*">
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                
                     
                      [Bindable]
                      private var ac:ArrayCollection = new ArrayCollection([
                          {value : 1},
                          {value : 2},
                          {value : 3},
                          {value : 4},
                          {value : 5},
                          {value : 6},
                          {value : 7},
                          {value : 8},
                          {value : 9},
                          {value : 10}
                      ]);
                ]]>
              </mx:Script>
              <mx:DataGrid x="40" y="36" width="408" height="193" dataProvider="{ac}">
                  <mx:columns>
                      <mx:DataGridColumn headerText="Column 1" dataField="value" itemRenderer="MyComp"/>
                      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                  </mx:columns>
              </mx:DataGrid>
             
            
          </mx:Application>

           

          I hope this helps if you don;t understand any of it please ask.

           

          Andrew

           

           

          1 person found this helpful
          • 2. Re: how do i change the cell color of each cell in datagrid dynamically
            ShardulSingh Level 3

            Pls find the solution of ur problem.Let me know if you have any issue.

             

             

            MainApplicaion.mxml

            <?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 listDataArrayCollection:ArrayCollection=

                          new ArrayCollection([

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                            {seq:'30',color:'0x0000FF', names:'Flip_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="listComponent" width="50%"

                             height="100%"

                             borderStyle="none"

                             dataProvider="{listDataArrayCollection}"

                             itemClick="onItemClick(event)">

                             <mx:columns>

                             <mx:DataGridColumn width="100" dataField="{data.seq}" headerText="Seq" itemRenderer="SeqItemRenderer" />

                             <mx:DataGridColumn width="100" dataField="{data.names}" headerText="Name" itemRenderer="NameItemRenderer"/>

                             </mx:columns>

                             </mx:DataGrid>

                          

                      

                </mx:VBox>

            </mx:Application

             

             

             

             

             

             

             

             

             

             

            NameItemRenderer.mxml

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

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

                width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">

            <mx:Script>

                <![CDATA[

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

                     {

                         super.data = value;

                     }

                ]]>

            </mx:Script>

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

                         text="{data.names}"

                         editable="false" backgroundColor="{data.color}"/>

                </mx:HBox>

             

             

             

             

             

             

             

             

             

            SeqItemRenderer.mxml

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

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

                width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">

            <mx:Script>

                <![CDATA[

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

                     {

                         super.data = value;

                     }

                ]]>

            </mx:Script>

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

                         text="{data.seq}"

                         editable="false" backgroundColor="{data.color}"/>

                </mx:HBox>

             

             

             

             

             

             

             

             

             

            with Regards,

            Shardul Singh Bartwal

             

             

             

             

             

             

             

             

             

             

             

             

            1 person found this helpful
            • 3. Re: how do i change the cell color of each cell in datagrid dynamically
              nagasreekrishna Level 1

              <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
                  preinitialize="initTA();">
              <mx:XML id="myXml" source="items.xml" />
                  <mx:Script>
                      <![CDATA[
                         
                          public function initTA():void {        
                           
                              addEventListener(MouseEvent.CLICK,setColor);
                             
                          }

               

                 public function setColor():void{

               

                        this.opaqueBackground=0xbf2222;

                       }

               

                 ]]>
                  </mx:Script>

               

              </mx:Label>

               

              I have set this as ItemRenderer to my DataGrid..and it worked....If user clicks on the cell of the DataGrid its color changes

               

              Thank you very much for the replies...