10 Replies Latest reply on Nov 26, 2007 1:22 AM by 10basetom

    Datagrid column text styles

    10basetom
      I have a datagrid column that contains strings in this syntax: ##% (##%)

      When the percentages are over 0% I'd like the text to be green; when the percentages are under 0%, I'd like to change the text to red. Apart from breaking this into two columns, how can I change the colors of different strings inside the same datagrid column?

      Thanks,
      Tom
        • 1. Re: Datagrid column text styles
          atta707 Level 2
          custom renderer is the keyword! if you google DataGrid and Custom Renderer you'll have enough examples of this use case to spend rest of you day -- or night!

          Flex doc that is bundled with Flex Builder also has elaborate coverage on renderers.

          ATTA
          • 2. Re: Datagrid column text styles
            chris.huston.t10 Level 3
            Tom,

            One way to do this would be to make a custom ItemRenderer based on a Label for your dataGrid column. Then, just test whether you have positive or negative values for your dataField. If it is negative, use a setStyle('color', 0xFF0000) for red. Here is a basic example:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Label xmlns:mx=" http://www.adobe.com/2006/mxml">
            <mx:Script>
            <![CDATA[
            override public function set data(value:Object):void {
            super.data = value;

            if (value != null)
            {
            if(value.fieldValue >= 0) //fieldValue will need to match your dataField value from your dataProvider of your dataGrid. You might need to convert it to an int to compare.
            {
            setStyle("color", 0x00DD00);
            } else {
            setStyle("color", 0xDD0000);
            }
            }

            super.invalidateDisplayList();
            }

            ]]>
            </mx:Script>
            </mx:Label>

            Then in your main app:

            <mx:DataGridColumn headerText="Drill Type" dataField="fieldVAlue" width="105" itemRenderer="renderers.RedGreen"/>

            This assumes that your mxml component is named 'RedGreen.mxml' and is in the 'renderers' directory. You can adjust this to fit your project as needed. I hope this helps.

            Vygo
            • 3. Re: Datagrid column text styles
              10basetom Level 1
              Thanks for the quick reply, guys. My main challenge is to change the color of two different strings within the same column. For example, my column can contain this string:

              10% (-10%)

              In this case, I would like "10%" to be green and "-10%" to be red. From the examples that I've seen (including the one provided by Masamune), the custom renderer would change the style for the entire column instead of partial strings within the same column as in the above scenario.

              Any other ideas? I'll do more reseach in the meantime.
              • 4. Re: Datagrid column text styles
                atta707 Level 2
                instead of using a label as item renderer use an HBox and place two labels in it, changing the color of each one based on you data.

                ATTA
                • 5. Re: Datagrid column text styles
                  10basetom Level 1
                  Hi ATTA,

                  These are strings in a DataGridColumn item. Do you how to format the string such that two words/numbers in this string have different colors?

                  Tom
                  • 6. Re: Datagrid column text styles
                    atta707 Level 2
                    Tom,

                    Are you saying these two strings are in just one column of the datagrid?

                    So here is what I'll do:

                    1) write a new item renderer based on a HBox
                    2) add two Text controls to this HBox
                    3) get the value of the this column from the data property of this renderer
                    4) parse the string into two string
                    5) set the value of the first text and set it's color to whatever color you like
                    6) set the value of the second text control to second string and set its color

                    Should work. Try it.

                    If it doesn't work, show be your renderer with a small working app.

                    ATTA


                    • 7. Re: Datagrid column text styles
                      10basetom Level 1
                      ATTA,

                      Yes, these two strings are in the same column of the datagrid. I know how to use an item renderer to change the color if each string is in its own column, but where I'm in the dark is how to update two strings to two different colors within the same datagrid column.

                      I really do not want to break these two strings into separate columns, but it's looking like that's the only solution? I'll give your suggestion a try and will report back shortly.

                      Thanks,
                      Tom
                      • 8. Re: Datagrid column text styles
                        10basetom Level 1
                        Hi ATTA,

                        After following your instructions, and with the help of http://livedocs.macromedia.com/flex/2/docs/00000854.html, I was finally able to accomplish what I wanted to do.

                        Thanks again!
                        Tom
                        • 9. Re: Datagrid column text styles
                          atta707 Level 2
                          Great! You url is perhaps not complete, could you paste it again?

                          did you end up using two text controls?

                          ATTA
                          • 10. Re: Datagrid column text styles
                            10basetom Level 1
                            Hmm...I think there's a bug in this forum's link parser that adds the comma to the url. If you delete the comma then the link should work.

                            Tom