DataGrid reference is NULL after event was dispatched.

Question

Hi

I'm a total Flex newbie and I struggle with event model. I have the following scenario:

• having DataGrid with dataProvider set to ArrayCollection
• the data grid is a simple to-do list, first column contains check box as item renderer
• other columns are plain strings

What I need to achieve is that after data grid has been created or initialised, I need to update the colour style of item renderers values conditionally. The condition says, if value of property Done (stored in data provider) is true, then set colour of text to grey.

The problem is that item renderers are initialised before data grid is created, therefore data grid reference which I can obtain in item renderer is NULL. So I decided to notify item renderers after data grid is completed. Question is how to do it using Flex event model.

It looks like event dispatched by data grid is not listened by item renderer. Please have a look at my code:

<!-- Data grid inside root panel main.mxml -->
<mx:DataGrid id="taskGrid" dataProvider="{tasks}" creationComplete="dispatchEvent(new Event('update',true));">
 <mx:columns>
  <mx:DataGridColumn dataField="done" headerText="!">
   <mx:itemRenderer>
     <mx:Component>
       <c:StatusCheckBox change="this.onChange(event);"/>
     </mx:Component>
   </mx:itemRenderer>
  </mx:DataGridColumn>
  <mx:DataGridColumn dataField="status" headerText="Status" editable="false" itemRenderer="components.CustomLabel"/>
 </mx:columns>
</mx:DataGrid>

<!-- components.CustomLabel.mxml -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
 <mx:Script >
   <![CDATA[
    import (...)
    private var dg:DataGrid; 
    private var tasks:ArrayCollection;

    private function init():void {
     dg = this.listData.owner as DataGrid;  
     addEventListener("update",updateStyle); 
     if (dg) Alert.show("dg is not null!"); // data grid is not null when init() finish
    }

    private function updateStyle(e:Event = null):void {
     if (dg) {
      if (listData.rowIndex < dg.dataProvider.length) {
       var task:Task = dg.dataProvider[listData.rowIndex] as Task;
        if (task.done) this.setStyle("color","Blue");
        else this.setStyle("color","Black");
       }
      } 
     }
   ]]>
  </mx:Script>
 </mx:Label>

When I start-up my application and data grid is created the 'update' event is triggered. However the data grid instance (dg) used in updateStyle function in CustomLabel component is null. Why it's now null? As you can see in init() method dg variable is not null (the Alert pops up for every instance of item renderer)

Could you help me? Many thanks guys.

Answer 1

If you listens dataChange event, it can trigger the handler.