7 Replies Latest reply on Mar 22, 2011 1:38 PM by rtalton

    changing text color of a string

    giggles1011

      im looking to change the color of some text within a datagrid. After searching I have found tons on item renderers and cannot figure out exactly how to make it work with what I need.

       

      I have a datagrid with a label function that looks something like this.

       

       

      label function(item:object, column:datagrid):string

      {

           return ( "name:" +item.name+ "age:" + item.age);

      }

       

      i want to be able to make it look like this when it returns the string

       

      Name: hello AGE: 45

       

      with name and age also being a different color than the text brought in from the item

       

      any ideas?

        • 1. Re: changing text color of a string
          markerline Level 4

          I'm not sure if this applies to Flex but in ActionScript 3.0 there is a ColorTransform Class

          as part of the transform property (there is a color property within it.)  You define a new variable as a new ColorTransform(); the same way you would define a MovieClip or a Sprite . . .

          • 2. Re: changing text color of a string
            giggles1011 Level 1

            i believe that that is more for changing the colors of componets, similar to adjusting the color settings on your TV. like RGB and stuff. Not for simply changing the color of some text. Thanks though.

            • 3. Re: changing text color of a string
              Tanu Jain Level 2

              Hello,

               

              If "Name: hello AGE: 45" forms a part of single datagrid column, you can try making an item-renderer for the datagridColumn having four labels, each having its own color and font-style.

               

              --

              Tanu

              1 person found this helpful
              • 4. Re: changing text color of a string
                giggles1011 Level 1

                i feel like using an item renderer is the best method i just cant seem to formulate how to do it.

                • 5. Re: changing text color of a string
                  Tanu Jain Level 2

                  In case one datafield is required (Age), it can be done in following manner:

                   

                  <mx:DataGridColumn  dataField="Age">

                  <mx:itemRenderer>

                  <fx:Component>

                  <mx:HBox>

                  <s:Label fontWeight="bold" text="Name" />

                  <s:Label text="DummyName" />

                  <s:Label fontWeight="bold" text="Age" />

                  <s:Label  text="{data.Age}" />

                  </mx:HBox>

                  </fx:Component>

                  </mx:itemRenderer>

                  </mx:DataGridColumn>

                   

                  If two data fields are required:name,age, we can use above code for 2 datagridcolumns, one for each data field.

                   

                  --

                  Tanu

                  • 6. Re: changing text color of a string
                    giggles1011 Level 1

                    both the name and the age are coming in from the datasource in the same object say: object Employee.

                     

                    Is there a way to have both of them in the same datagrid column like the label function i have in place just with the formatting?

                     

                    this is the most simple instance of what i need to format. some other columns are showing 4-5 different values brought in from the dataservice using a label function. I basically just need a way to present my data in a more appealing manner rather than all plain text with the same font and color.

                    • 7. Re: changing text color of a string
                      rtalton Level 4

                      You'll need to make an itemRenderer to do this. There many ways of approaching this, but I through together a quick example that applies the formatting using html tags in the htmlText property of an in-line itemRenderer. There are better ways of doing this, though. This example is difficult to read. Using a separate, external component you could override the set data function and go nuts with it. Search the help docs for examples.

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                          layout="absolute">

                          <mx:Script>
                              <![CDATA[
                                  import mx.collections.ArrayCollection;

                                  [Bindable]
                                  private var acData:ArrayCollection = new ArrayCollection([
                                      {name: 'Charley', age: 45},
                                      {name: 'Ben', age: 32}
                                      ]);
                              ]]>
                          </mx:Script>

                          <mx:DataGrid
                              dataProvider="{acData}"
                              width="212"
                              y="67"
                              x="108">

                              <mx:columns>
                                  <mx:DataGridColumn headerText="Name/Age">
                                      <mx:itemRenderer>
                                          <mx:Component>
                                              <mx:Text>
                                                  <mx:htmlText>
                                                          &lt;b&gt;&lt;font color="#0000FF" size="14"&gt;Name: &lt;/font&gt;&lt;/b&gt;{data.name} &lt;b&gt;&lt;font color="#FF0000" size="12"&gt;Age: &lt;/font&gt;&lt;/b&gt;{data.age}                               
                                                  </mx:htmlText>
                                              </mx:Text>
                                          </mx:Component>
                                      </mx:itemRenderer>
                                  </mx:DataGridColumn>
                              </mx:columns>
                          </mx:DataGrid>
                      </mx:Application>