4 Replies Latest reply on Nov 17, 2010 5:26 PM by Abhinav Sharma

    data grid certain item colorized

    ArrowUpRight

      Hello everyone!

       

      Please, any information is welcome.

       

      I need to set the background of DataGrid's item to red, f.e.

       

      according to item's custom property,

       

      if (item.Property == true) {

      ..... change the background of it to red ....

      }

       

      or in another way....

       

      Any info is welcome, even like "go and learn of...."

       

      Thanks in advance, Alex.

        • 1. Re: data grid certain item colorized
          Abhinav Sharma Level 2

          Hi Alex, Try the code below.

           

          Hope this wud help you.

           

           

          =====================

           

          <?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;

           

                      private var dataArray:ArrayCollection = new ArrayCollection([{color:'GREEN',city:'Delhi'},
                                                                                      {color:'RED',city:'Paris'},
                                                                                      {color:'RED',city:'Moscow'},
                                                                                      {color:'GREEN',city:'NYCity'},
                                                                                      {color:'BLUE',city:'Tokyo'},
                                                                                      {color:'RED',city:'Chennai'}]);
                     
              ]]>
              </mx:Script>
              <mx:DataGrid id="myDG" dataProvider="{dataArray}">
                  <mx:columns>
                      <mx:DataGridColumn>
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:Box>
                                      <mx:Script>
                                          <![CDATA[
                                              override public function set data(value:Object ) : void
                                              {
                                                  super.data = value;
                                                  if(data.color == 'RED')
                                                      setStyle("backgroundColor",0xff0000);
                                                  else if(data.color == 'GREEN')
                                                      setStyle("backgroundColor",0x00ff00);
                                                  else if(data.color == 'BLUE')
                                                      setStyle("backgroundColor",0x0000ff);
                                                 
                                              }                                     
                                          ]]>
                                      </mx:Script>
                                      <mx:Label text="{data.color}"/>
                                  </mx:Box>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                      <mx:DataGridColumn dataField="name"/>
                  </mx:columns>
              </mx:DataGrid>
          </mx:Application>

           

          ==========================================================

           

           

          -Abhinav Sharma

          1 person found this helpful
          • 2. Re: data grid certain item colorized
            ArrowUpRight Level 2

            Thank you Abhinav Sharma!

             

            I use Flex4 SDK, so i guess because of that it does nothing in my workspace

             

            but ItemRenderer just waiting for me to learn ;-)

            • 3. Re: data grid certain item colorized
              ArrowUpRight Level 2

              oops, i created the 3,5 configured project, then just added [Bindable] before array definition, and changed the second column's dataField to 'city', and it's work!

               

              Greatings friend! Thank you!

              • 4. Re: data grid certain item colorized
                Abhinav Sharma Level 2

                Sorry, [Bindable] tag was missed.

                 

                ItemRenderer is really a very helpful and easy to use in flex.

                 

                So finally it will be like this: [Used Flex3]

                 

                <?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;


                            [Bindable]
                            private var dataArray:ArrayCollection = new ArrayCollection([{color:'GREEN',city:'Delhi'},
                                                                                             {color:'RED',city:'Paris'},
                                                                                             {color:'RED',city:'Moscow'},
                                                                                             {color:'GREEN',city:'NYCity'},
                                                                                             {color:'BLUE',city:'Tokyo'},
                                                                                             {color:'RED',city:'Chennai'}]);
                          
                    ]]>
                    </mx:Script>
                    <mx:DataGrid id="myDG" dataProvider="{dataArray}">
                        <mx:columns>
                            <mx:DataGridColumn dataField="city"/>

                            <mx:DataGridColumn headerText="color">
                                <mx:itemRenderer>
                                    <mx:Component>
                                        <mx:Box>
                                            <mx:Script>
                                                <![CDATA[
                                                    override public function set data(value:Object ) : void
                                                    {
                                                        super.data = value;
                                                        if(data.color == 'RED')
                                                            setStyle("backgroundColor",0xff0000);
                                                        else if(data.color == 'GREEN')
                                                            setStyle("backgroundColor",0x00ff00);
                                                        else if(data.color == 'BLUE')
                                                            setStyle("backgroundColor",0x0000ff);
                                                      
                                                    }                                    
                                                ]]>
                                            </mx:Script>
                                            <mx:Label text="{data.color}"/>
                                        </mx:Box>
                                    </mx:Component>
                                </mx:itemRenderer>
                            </mx:DataGridColumn>
                        </mx:columns>
                    </mx:DataGrid>
                </mx:Application>

                 

                 

                -

                Abhinav Sharma