6 Replies Latest reply on Jun 15, 2010 8:28 AM by goldensuits

    Coloring a column

    goldensuits Level 1

      Hi,

       

      I am trying to color the text of a column based on conditions. I have seen some examples, but they use the renderers.

       

      I have a datagrid with a column that has a combobox as a component itemeditor, I want that column text to be colored based on conditions

       

      <datagrid id="myGrid>
      <columns>

       

      <datagridcolumn headerText="project" dataField="project" />
      <datagridcolumn headerText="status" dataField="status_type" itemEditor="statuscombobox" editorDataField="newValue" />

       

      </columns>
      </datagrid>

       


      statuscombobox.mxml

       

      <vbox>
      <script>
      ....
      </script>
      <combobox id="cbStatus" />
      </vbox>

       

      I would like to have the text of column 'status' to be colored based on conditions and when clicked on the column, the combobox shows up (which need not be colored).

       

      any suggestions

       

      Thank you,

        • 1. Re: Coloring a column
          Dajji Level 3

          You can do that with headerStyleName property of DataGridColumn. Following code snippet will give you an idea how to use it.

           

              <mx:Style>
                   .hColor{
                        color: #ff0000;
                   }
              </mx:Style>
          
          
               <mx:DataGrid>
                    <mx:columns>
                         <mx:DataGridColumn headerStyleName="hColor" dataField="name"/>
                    </mx:columns>
                    <mx:dataProvider>
                         <mx:Array>
                              <mx:Object name="A1"/>
                              <mx:Object name="A2"/>
                              <mx:Object name="A3"/>
                              <mx:Object name="A4"/>
                         </mx:Array>
                    </mx:dataProvider>
               </mx:DataGrid>
          

          • 2. Re: Coloring a column
            goldensuits Level 1

            Hi,

             

            the header style name would color the header of the column,

            I would like to have the text in the entire column to be colored based  on conditions,

            grid.JPG

            the zipcode column is an item editor with a combobox as a component


            thank you

            • 3. Re: Coloring a column
              Sebastien V. Level 3

              You need to use an itemRenderer for the zipcode column.

              The simplest way of doing so, given what you need to do, is to extend the DataGridItemRenderer class, and to override the data setter.

              Then, ising the conditions on the given data, you use the setStyle() method to change the color of the text ( setStyle( 'color' , yourColor ); ).

              1 person found this helpful
              • 4. Re: Coloring a column
                goldensuits Level 1

                Hi Sebastien,

                 

                thanks for your quick reply,

                 

                I have seen an example using the itemrenderes, in my case the zipcode field is a itemeditor as I use a combobox for the zipcode field,

                 

                Is it possible to achieve this functionality for the zipcode field being an item editor

                 

                thank you

                • 5. Re: Coloring a column
                  Sebastien V. Level 3

                  This doesn't change a thing about what I posted.

                  The itemEditor and the itemRenderer are two distinct things. The itemRenderer is used on every cell that is not being edited. The itemEditor is used only on a cell that is being edited. So changing the itemRenderer without changing the itemEditor will do what you want: change the way column is rendered, but keeping the combobox editor unchanged.

                  • 6. Re: Coloring a column
                    goldensuits Level 1

                    thank you sebastien.