title: How can I create a custom MXAdvancedDataGridItemRenderer in Flex4?
body: <p>Well, I created one but it has a bunch of issues:</p>
  
  <ul>
  <li>if I click in the rendered column I get an error:</li>
  </ul>
  
  <blockquote>
    <p>TypeError: Error #1009: Cannot access a property or method of a null object reference.
        at Test/clickHandler()[C:\Documents and Settings\NDEGRAEV\workspace-dummy\Test\src\Test.mxml:27]
        at Test/___Test_AdvancedDataGrid1_click()[C:\Documents and Settings\NDEGRAEV\workspace-dummy\Test\src\Test.mxml:31]</p>
  </blockquote>
  
  <ul>
  <li>the text is stuck to the top left corner of the cell;</li>
  <li>the cell's background doesn't change to the selected one.</li>
  </ul>
  
  <p>I'm new to Flex and I'm probably doing it completely wrong but here aren't many examples of custom MXAdvancedDataGridItemRenderer on the Net. Can you point me in the right direction?</p>
  
  <p><strong>Test.mxml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                 xmlns:test="*"
                 initialize="init()"&gt;
      &lt;fx:Script&gt;
          &lt;![CDATA[
              import mx.collections.ArrayCollection;
              import mx.controls.Alert;
  
              [Bindable]
              private var data:ArrayCollection = new ArrayCollection();
  
              private function init():void {
                  var dataItem:DataItem = new DataItem(1000, 1000);
                  this.data.addItem(dataItem);
                  dataItem = new DataItem(1001, 1001);
                  this.data.addItem(dataItem);
              }
  
              private function clickHandler(e:Event):void {
                  var dataItem:DataItem = e.currentTarget.selectedItem as DataItem;
                  Alert.show(dataItem.col1 + ' ' + dataItem.col2);
              }
          ]]&gt;
      &lt;/fx:Script&gt;
      &lt;mx:AdvancedDataGrid dataProvider="{data}" click="clickHandler(event);" x="0" y="0" designViewDataType="flat"&gt;
          &lt;mx:columns&gt;
              &lt;mx:AdvancedDataGridColumn dataField="col1" headerText="Column 1"/&gt;
              &lt;mx:AdvancedDataGridColumn dataField="col2" headerText="Column 2" id="column2"/&gt;
          &lt;/mx:columns&gt;
          &lt;mx:rendererProviders&gt;
              &lt;mx:AdvancedDataGridRendererProvider column="{column2}" renderer="MyRenderer" /&gt;
          &lt;/mx:rendererProviders&gt;
      &lt;/mx:AdvancedDataGrid&gt;
  &lt;/s:Application&gt;
  </code></pre>
  
  <p><strong>MyRenderer.mxml</strong>  </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                    xmlns:s="library://ns.adobe.com/flex/spark" 
                                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                                    focusEnabled="true"&gt;
      &lt;s:Label id="lblData" /&gt;
      &lt;fx:Declarations&gt;
          &lt;mx:NumberFormatter id="numberformatter" useThousandsSeparator="true" /&gt;
      &lt;/fx:Declarations&gt;
      &lt;fx:Script&gt;
          &lt;![CDATA[
              override public function set data(value:Object):void {
                  if (value.col1 &gt; 1000) {
                      lblData.text = numberformatter.format(value.col2);
                  } else {
                      lblData.text = value.col2;
                  }
              }
          ]]&gt;
      &lt;/fx:Script&gt;
  &lt;/s:MXAdvancedDataGridItemRenderer&gt;
  </code></pre>