Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null

I am currently using the 4.12.0 SDK. I have a Spark DataGrid setup that makes use of an externally-defined itemRenderer:
<s:DataGrid id="dgEquipment"
            width="100%" height="100%"
            doubleClickEnabled="true"
            creationComplete="init()" doubleClick="popTab(event)">
<s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="renderers.equipment.IconRenderer"
                    dataField="EXISTING"
                    width="22"/>
The data provider is set programmatically after a remote call has returned a result.
I have the renderer setup as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    dataChange="init()" remove="dispose()">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
    <![CDATA[
      import mx.controls.Menu;
      import mx.events.MenuEvent;
      import spark.components.DataGrid;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 1.png")]
      private var ico1:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 2.png")]
      private var ico2:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 3.png")]
      private var ico3:Class;
      private var isExisting:Boolean;
      private var popUp:Menu;
      private function init():void
        if (data)
          isExisting = data.EXISTING == 1;
      private function dispose():void
        if (popUp)
          popUp.removeEventListener(MenuEvent.ITEM_CLICK, popUp_click);
          popUp = null;
        if (imgActions)
          imgActions.removeEventListener(MouseEvent.CLICK, image_click);
          imgActions = null;
      override public function prepare(hasBeenRecycled:Boolean):void
        if (data)
          if ((data.TYPE == "A" || data.TYPE == "B") && !data.X && !data.Y)
            disableLink();
            imgActions.source = ico3;
            imgActions.toolTip = "Blah blah.";
          else if (data.TYPE == "C" || data.TYPE == "D")
            disableLink();
          else if (isExisting)
            imgActions.source = ico1; //******************************            imgActions.toolTip = "More blah blah.";
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
          else
            imgActions.source = ico2;
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
            imgActions.toolTip = "Even more blah blah.";
            initPopUp();
      private function initPopUp():void
      private function popUp_click(event:MenuEvent):void
      private function image_click(event:MouseEvent):void
      private function disableLink():void
    ]]>
</fx:Script>
<s:Image id="imgActions"
           height="18" width="18"/>
</s:GridItemRenderer>
When the code reaches the line where I have added a comment full of asterisks, I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:81 ]
    at spark.components.gridClasses::GridViewLayout/initializeItemRenderer()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1808]
    at spark.components.gridClasses::GridViewLayout/createTypicalItemRenderer()[/Users/justinmcl ean/Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/ GridViewLayout.as:1243]
    at spark.components.gridClasses::GridViewLayout/updateTypicalCellSizes()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1374]
    at spark.components.gridClasses::GridViewLayout/measure()[/Users/justinmclean/Documents/Apac heFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/GridViewLayout.as: 875]
    at spark.components.supportClasses::GroupBase/measure()[/Users/justinmclean/Documents/Apache Flex4.12.0/frameworks/projects/spark/src/spark/components/supportClasses/GroupBase.as:1156 ]
    at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[/Users/justinmclean/Documents/ApacheFlex4.12.0/frameworks/projects/framework/src/mx/cor e/UIComponent.as:9038]
    at mx.core::UIComponent/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/framew orks/projects/framework/src/mx/core/UIComponent.as:8962]
    at spark.components::Group/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/fra meworks/projects/spark/src/spark/components/Group.as:1074]
    at mx.managers::LayoutManager/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/ frameworks/projects/framework/src/mx/managers/LayoutManager.as:673]
    at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFl ex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:824]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ ApacheFlex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
Running the debugger shows that this occurs with the first item in the data provider. If I alter the prepare method to check for the existence of imgActions before doing anything, everything works fine after the first item. So I'll have one row in the DataGrid with a missing icon, and all the rest will have icons.
So the question is, is it normal for prepare to run before any children of the item renderer are created? If so, how should I handle this?
Many thanks in advance.

A little more info. I added some event handlers to the renderer and the image (for events that I thought would be relevant), and here is the order of events based on trace statements within the handlers:
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
griditemrenderer1_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_addedToStageHandler
imgActions_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_initializeHandler
griditemrenderer1_elementAddHandler
imgActions_addHandler
griditemrenderer1_initializeHandler
griditemrenderer1_addHandler
prepare called
imgActions_resizeHandler
griditemrenderer1_resizeHandler
imgActions_creationCompleteHandler
imgActions_updateCompleteHandler
griditemrenderer1_creationCompleteHandler
griditemrenderer1_updateCompleteHandler
griditemrenderer1_removeHandler
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
imgActions_addedToStageHandler
griditemrenderer1_addHandler
griditemrenderer1_dataChangeHandlerTypeError: Error #1009: Cannot access a property or method of a null object reference.
prepare called
at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:91 ]
imgActions_renderHandler
griditemrenderer1_renderHandler

Similar Messages

Spark datagrid item renderer - adjust height

I am using a textinput as an item renderer for DataGrid:
<s:GridColumn dataField="Comment" headerText="Comment"
                                                                                  itemRenderer="DataGridRenderer">
</s:GridColumn>
// Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                          xmlns:s="library://ns.adobe.com/flex/spark"
                                          xmlns:mx="library://ns.adobe.com/flex/mx"
                                          xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"
                                          xmlns:ns="library://commons.stoneriver.com"
                                >
          <fx:Script>
                    <![CDATA[
                              override public function prepare(hasBeenRecycled:Boolean):void
                                        super.prepare(hasBeenRecycled);
                                        if (data)
                                                  if(data.FormCode == "")
                                                            Comment.text = data[column.dataField];
                                                            Comment.setStyle("backgroundColor", 0xFFFFFF);
                                                  else
                                                            Comment.text = "";
                                                            Comment.setStyle("backgroundColor", 0xB1CCF0);
                    ]]>
          </fx:Script>
          
          <s:TextInput id="Comment" width="100%" borderVisible="false" fontSize="{column.grid.dataGrid.getStyle('fontSize')}"/>
</s:GridItemRenderer>
How can I adjust a height of this renderer to fill the whole cell? Right now it comes out with a smaller height than a row height.
Thanks

I actually got word wrapping working with RichEditableText . But now when I specify height=100% all rows have the same extremely large height.

DataGrid Item Renderer loading duplicates after scroll

HI,
I have a report that loads into a datagrid, these reports are
about thumbnail images that are on a server.
I have a datagrid item renderer that loads the thumb nails.
When the grid first loads the first set of rows that are visible
display the correct images. But after I scroll the new rows have
images that are repeated and not the correct ones.
?xml version="1.0" encoding="utf-8"?>
<HBox xmlns="
http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="{init()}">
<Script>
<![CDATA[
import mx.controls.Image;
[Bindable]
[Embed(source="/images/folderBlack.png")]
private var folderIcon:Class;
private function suffix(url:String):String {
var i:Number;
if ((i = url.lastIndexOf(".")) > -1) {
url = url.substr(i+1);
return url;
private function init():void {
var fileSuffix:String = new String;
fileSuffix = '';
fileSuffix = suffix(data.filename);
var staticPortalImage:String = new String;
staticPortalImage = '/PULLIMAGE.php?type=small&id=' +
data.FileID +
'&path=' + data.filename +
'&server=MTI3LjAuMC4x&siteurl=L0F1dGhNb2R1bGU=';
var thumbNailImage:Image = new Image();
thumbNailImage.height = 80;
switch(fileSuffix){
case 'jpg':
thumbNailImage.source = staticPortalImage;
break;
imageContainer.addChild(thumbNailImage);
texttest.text = fileSuffix;
]]>
</Script>
<Text id="texttest" />
<HBox id="imageContainer" height="80" />
</HBox>

Thanks
Great article I ended up getting rid of the creationcomplete
changing my init():void too override public function set data(
value:Object ) : void
and adding
super.data = value;
I was able then to clean up my code considerably.
Once again Thanks
Dean

Datagrid Item renderer Help

Hi all,
I need a help/suggestion in a datagrid item renderer. In a datagrid, for one particular cell (particular column of a row) i need to change the background color depending upon the condition.The color for particular cell not for the entire row or entire column, how can i achieve this ?
Thanks in advance.
Heman

Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

Datagrid Item Renderer not displaying correct data

I have a datagrid that displays information from a web service, which is refreshed every 60 seconds.
When the status is no 0 for a line a corresponding color is used to fill in the background. I created a Item Renderer to fill in the background color.
When the table is initially created, the colors are correct. After the data is refreshed, then the background color value is carried over to the next row.
The Spark DataGrid works better than the MX AdvancedDateGrid or DataGrid. This was working in Flex 3, but I used an function which replaced the DataGridColumn that doesn't work in Flex 4.
protected function init(event:FlexEvent):void
                var showBackground:Boolean = false;
                var backgroundColor:uint = new uint();
                var labelTextColor:uint = new uint();
                var dgListData:DataGridListData = listData as DataGridListData;
                var dataGrid:DataGrid = dgListData.owner as DataGrid;
                // comment this out if you want to see the background over the
                // selection and highlight indicators
                if (dataGrid.isItemSelected(data) || dataGrid.isItemHighlighted(data))
                    // clear the background so you can see the selection/highlight colors
                    showBackground = false;
                    return;
                switch(data["MessageLevel"])
                    case 0:
                        showBackground = false;
                        backgroundColor = 0xFFFFFF;
                        labelTextColor = 0x000000;
                        break;
                    case 1:
                        showBackground = true;
                        backgroundColor = 0x00FF00; // light green
                        labelTextColor = 0x000000;
                        break;
                    case 2:
                        showBackground = true;
                        backgroundColor = 0x015F00; // dark green
                        labelTextColor = 0xFFFFFF;
                        break;
                    case 3:
                        showBackground = true;
                        backgroundColor = 0xFDFF00; // yellow
                        labelTextColor = 0x000000;
                        break;
                    case 4:
                        showBackground = true;
                        backgroundColor = 0x7F6E3F; // tan
                        labelTextColor = 0xFFFFFF;
                        break;
                    case 5:
                        showBackground = true;
                        backgroundColor = 0xFF8A00; // orange;
                        labelTextColor = 0x000000;
                        break;
                    case 6:
                        showBackground = true;
                        backgroundColor = 0xFFDFE0; // rose
                        labelTextColor = 0x000000;
                        break;
                    case 7:
                        showBackground = true;
                        backgroundColor = 0xFF0000; //red
                        labelTextColor = 0xFFFFFF;
                        break;
                if(showBackground) {
                    var bgFill:SolidColor = new SolidColor();
                    bgFill.color = backgroundColor;
                    dataContainer.setStyle("backgroundColor",backgroundColor);
                    lblData.setStyle("color", labelTextColor);

I added an "else" statement to make sure that a color was always added, even if the level was 0. I also added a backgroundAlpha style to both, to turn the value off or on.
So far, this seems to be the solution.
if(showBackground) {
var bgFill:SolidColor = new SolidColor();
bgFill.color = backgroundColor;
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",1);
} else {
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",0);

Datagrid item renderer delete button

I have a datagrid with an item renderer. In the item renderer
is a delete button img. Onclick it will remove the item from the
datagrid with the exception of the first item. I am using outer
document to call my function but when I do I get an error that says
Attempt access of inaccessible method deleteContact through a
reference with static type myTitleWindowContact?
private function deleteContact(event:Event,data:*):void{
if (contactData.selectedIndex >= 1) {
caseVO.acCont.removeItemAt(contactData.selectedIndex);
<mx:DataGrid dataProvider="{model.currentVO.acCont}"
id="contactData"
width="651"
height="117"
click="showForm()" >
<mx:columns>
<mx:DataGridColumn editable="false" width="5">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="15"
horizontalAlign="center" verticalAlign="middle">
<mx:Button
icon="@Embed(source='/com/serg/reportingTool/assets/images/delete.png')"
click="outerDocument.deleteContact(event,data)"
label="D"
toolTip="Delete"
width="15"
height="15"
/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

That fixed that issue Thanks so much! One other question
though. Is it possible to have my delete button appear on all items
in the datagrid except for the first item??

Datagrid item renderer destroys on mouse over

Hi,
     I used Flex 3.5 datagrid. I used item renderes in my datagrid. and i set 'rendererIsEditor = true'.
     Everything is very smooth and good. But somtimes my datagrid acting badly. When i put cursor on itemRenderer, It open-up for
editing. When i move mouse, item renderer destroyed.
     Once it happens it is the default behaviour of my datagrid. No editing can be performed.
      But i can not reproduce it always. sometimes it a happens.
      please help me. anybody know about this?

Simplify your test case. Try using a simple TextInput as the renderer and
see if you have the same problem.

Datagrid item renderer numberstepper tabIndex

I have a datagrid with a item renderer in it that contains a
numberStepper. There are two columns that have number steppers in
them. If I hit tab when I am in the first number stepper I want it
to tab to the second one. I have tried setting a tabIndex and I
can't get it to tab? Any thoughts?

Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

Spark datagrid item editor font see through

I am using a default item editor on a spark datagrid.
When the user attempts to edit the field the old value shows through.
How do I get rid of this?
I am using out of the box stuff? Is this a listed bug?
Code is...
<s:GridColumn dataField="Actual" headerText="Actual" width="75" editable="true">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:DefaultGridItemRenderer textAlign="right"   background="true" backgroundColor="#FFFFFF" alpha="1.0" color="#000000" />
                        </fx:Component>
                    </s:itemRenderer>
    </s:GridColumn>
Thanks
Dan Pride

Try <s:DefaultGridItemEditor if you are wanting to make it editable.
here is an example of combobox, but it is similiar ....
<s:itemEditor>
<fx:Component>
<s:ComboBoxGridItemEditor >
<s:dataProvider>
<s:ArrayList>
<fx:String>Edit</fx:String>
<fx:String>Read</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBoxGridItemEditor>
</fx:Component>
</s:itemEditor>
Don

Strange Problem with datagrid item renderer in flash palyer 10

Hi All
In Flash player 10 when i use a text input as a item renderer in grid with a custom textinput skin , it does not show us the text , where as in flash player 11 it shows us. is there any work around for it or it's a bug.
Plz help me on this.

The url works for me. Please verify that you entered it correctly. There are other sites that will verify your player version. Search for them, pick one and report the results.
Before you file a bug, it is probably best to do some investigation first to make sure it isn’t a known issue or an issue in your code.

Datagrid item renderer with drop down need help.

Hi Guys,
I am populating an advance data grid in which one column has an item renderer containing a drop down. This drop down has 4 items. When user selects more than one row the drop down should contain only two items. In my case when user selects multiple rows using control key and then clicks on any of the rows drop down then that row gets de selected which I don’t want I tried stop propagation and stop immediate propagation but that also didn’t helped. Please help
Thanx
Mahesh.

Hi
This is a default bahviour of dropdown.. dropdown will not allow you multiple selections.. you should create your own component by extending the combobox and try your thing,, If you click on one item.. then it calls internally change event. If the change event called then the dropdown will automatically closed.. so you should restrict this ...
Thanks
Ram

Question about Using States in DataGrid Item Renderer

I have a DataGridColumn with an ItemRenderer that extends the
Box component. The default display is a Text component. When the
user clicks on the text component, I change the State to add a
PopUpMenuButton child, and make the Text component invisible. This
works fine. However, I only want to allow one PopUpMenuButton to be
visible in the DataGrid at a time (similar to how an itemEditor
works). I don't want to use an itemEditor, because I've run into
too many problems trying to get that to work in this instance.
I am implementing IDropInListItemRenderer in my itemRenderer,
in order to access the listData property, which will give me the
owner (DataGrid), but I don't know how to "turn off" the "editing"
state in other itemRenderers in the DataGrid.
How can I accomplish this?
Thanks.

Here we go. I simply added an Listener for Change Events in
the listData.owner - if it is triggered, i update the currentState
to null. Works like a charm. Much easier than trying to access the
itemRenderers in the column and resetting them all. Better on
performance too.

DataGrid Item renderer

I have this code:
<mx:AdvancedDataGridColumn
headerText="Person" dataField="person" width="120"
editable="false"
itemRenderer="CustomComponents.comboItemRenderer"
id="cboPerson">
</mx:AdvancedDataGridColumn>
How do I access my combo to assign a dataProvider?
Thanks

Add the module as a child to an existing display element on
the page.
There's a good example towards the bottom of "Loading and
unloading modules" in the docs.

Help! Spark Datagrid overriding a method

Hi!
I need help!
Do you know how to override a select item/row method in a spark datagrid? In mx datagrid, the method is selectItem, how about for the spark datagrid?

You didn't override the method handleException in JBDCBatchJob, you just overloaded it. So int JBDCBatchJob, you actually had two versions of handleException, one that took a parameter of the type Exception, one that took a parameter of the type SQLException.
So, in SimpleJDBCBatchJob, you need to have a catch block like
try {
// statements that may throw SQLException or in general Exception
catch (SQLException sqle) {
handleException( sqle );
catch (Exception e) {
handleException( e );
This would call your handleException in BatchJob if a general exception was thrown, and the handleException in JBDCBatchJob if a SQLException was thrown from the try block.
Hope that makes things clearer for you.
Alan

Setting Focus to datagrid next Item renderer column

Hi
I am having spark datagrid with 7 colum, I am facing problem to set focus for item renderer element.
Below is my datagrid, when user enter some text in text input and press TAB key, I want trade button to be in focus. and from trade column Tab key press I want delete button to be in focus.
I tried giving
tabEnabled="true" tabChildren="false" tabFocusEnabled="true" editable="true" hasFocusableChildren="true"
for datagrid.
Also i tried giving selectedCell
var _focusedCell:Object = new Object();
                                                            _focusedCell.rowIndex = dgTermDepo.selectedIndex;
                                                            _focusedCell.columnIndex = 5;
                                                            dg.selectedCell = _focusedCell as CellPosition;
but nothing is working, I know I am missing some logic or property, Please suggest me on this
Thanks
Sonu

You need to dig down into the event object and look at the
listData.
public function clickMe(e : MouseEvent ):void {
var rowIndex : int = e.currentTarget.listData.rowIndex
var colIndex : int = e.currentTarget.listData.columnIndex
if the listData object is null when you try this you may need
to add the following methods as overrides to the renderer or create
a base renderer and extend all your renderers from the base
renderer so that you always override these methods.
[Bindable("dataChange")]
private var _listData : BaseListData;
override public function get listData() : BaseListData {
return _listData;
override public function set listData( value : BaseListData )
: void {
_listData = value;
}

Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null

Similar Messages

Maybe you are looking for