1 Reply Latest reply on Sep 2, 2009 4:31 AM by Andrew Rosewarn

    column color change at runtime

    woodson.gen

      hi,

            how to change the column color in datagrid at runtime after bind the data into the grid.kindly tell me which event i would like to handle .

       

      thanks

      Woodson.

        • 1. Re: column color change at runtime
          Andrew Rosewarn Level 3

          Hi

           

          You can listen for changes to the datagrids dataProvider, and reacting to that, set the backGround color using the style property for the column.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="handleCreation()" >
              <mx:Script>
                  <![CDATA[
                      import mx.events.CollectionEvent;
                      import mx.collections.ArrayCollection;
                     
                      private var myArray:Array = new Array({name :'Chris'});
                     
                      [Bindable]
                      private var ac:ArrayCollection = new ArrayCollection([
                      {name : 'Andrew'}]);
                     
                      private function handleCreation():void {
                          ac.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleDataChange);
                      }
                 
                      private function handleDataChange(event:CollectionEvent):void {
                          col1.setStyle('backgroundColor',0xe5e5e5);
                      }
                     
                      private function changeData():void {
                          ac.source = myArray;
                         
                      }
                  ]]>
              </mx:Script>
             
              <mx:DataGrid id="dg" x="101" y="112" dataProvider="{ac}">
                  <mx:columns>
                      <mx:DataGridColumn id="col1" headerText="name" dataField="name" />
                      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                  </mx:columns>
              </mx:DataGrid>
              <mx:Button x="101" y="288" label="Change Data" click="changeData()"/>
             
          </mx:Application>

           

          Hope that helps.

           

          Andrew