Item Renderer passed to legend

Hi,
I have written an item renderer in Action script to change
the shape of the columns on a column chart. How can I pass this
through to the Legend?
I tried adding:
legendMarkerRenderer=
"myRenderer"
itemRenderer="myRenderer"
inside the column series tags of my mxml but this didn't work
- I just got a blank screen when I tried to run the application.
If I put
legendMarkerRenderer=
"mx.charts.renderers.DiamondItemRenderer" this works OK -
but of course, it isn't what I want.
Do I need to put something inside my action script to tell it
to pass the info to the legend?
Thanks in advance for any help.
M

Be sure to include the full classpath to your renderer in the
reference within your MXML. For example, if the package that your
renderer is in is com.example and the name of your renderer's class
is MyRenderer, you would write the following:
legendMarkerRenderer="com.example.MyRenderer". Keep in mind that
case matters.
If this doesn't work, there is probably something wrong with
your ItemRenderer, so you should post that code and we can help you
out.

Similar Messages

Passing a parameter to a Item Renderer

I have a dataGrid with about 12 columns. I want to render an
image in each cell based on the value of that node. Problem is: I
need the renderer to know what node to evaluate.
<mx:DataGridColumn width="20"
itemRenderer="com.apts247.www.renderers.Test" paddingLeft="0"
color="#990000"/>
<mx:DataGridColumn width="20"
itemRenderer="com.apts247.www.renderers.Test" paddingLeft="0"
color="#990000"/>
When these hit the item renderer, how can i make it know what
data to evaluate. I want to pass it, for example, "task_0", or
"task_1"

If the Itemrenderer implements the IDropInListItemRenderer
interface, you have access to the listData property which contains
information like column index and dataField.
Check out this tutorial:
http://flexgeek.wordpress.com/2007/05/30/tutorial-using-same-itemrenderer-for-multiple-col umns/
or the flex docs for more info.
Tracy

Click event on a item renderer stops data being passed

Hi
I'm trying to create a item renderer based on a Canvas, this renderer is then used in a List component. I'm trying to get a click event fired when the user clicks on one of the items in the List. I'm also formatting the data being passed into the item renderer to do this I'm overriding the set data property like this:
override public function set data(value:Object):void
title.text = value.marketName;
sellPrice.text = value.sellPrice;
buyPrice.text = value.buyPrice;
change.text = value.percentageChangeOnDay;
var i:String = "-";
if(String(value.percentageChangeOnDay).indexOf(i))
change.styleName = "PositiveChange";
else
change.styleName = "NegativeChange";
When I add a click event to my item renderer like this,
<view:DisplayItem click="itemClickedEvent( event )" />
I get a null reference error in my set data function. If I remove the click event the data is passed correctly, I've also found that if I use a rollOut event like this,
<view:DisplayItem rollOut="rolledOverEvent( event )"/>
the data is passed fine and the event works too, it seems that click events cause the data not to be passed.
Why does having a click event cause this problem? How can I have a click event on the item renderer and still format my data?
Cheers
Stephen

Found out that I can use the itemClick event of the List component I'm using my item renderer in, so really my item renderer does not need a click event.

Pass a value to an item renderer button

I have a datagrid. One of the columns has a value of "@recipe", with is a string that's a URL.
I need to replace this with a link button that goes to this url.
So I created an Item Renderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
     <![CDATA[
          private var linkToGoTo:String = XML(data).@recipe
          private function goRecipe(event:MouseEvent):void {
          trace("Link="+linkToGoTo);
     ]]>
</mx:Script>
<mx:LinkButton id="related" label="Related Recipe" click="goRecipe(event)" />
</mx:Canvas>
Problem is that I am not getting my XML value.   If I did this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
     <![CDATA[
          private function goRecipe(event:MouseEvent):void {
          trace(event.currentTarget.label);
     ]]>
</mx:Script>
<mx:LinkButton id="related" label="{XML(data).@recipe}" click="goRecipe(event)" />
</mx:Canvas>
This works, but of course I do not want the label to be this long URL. How would I do this?

OK, I got it to work like this, not sure if it's the best way:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
     <![CDATA[
          private var relatedRecipe:String
          override public function set data(value:Object):void
        if(value != null)
           super.data = value;
           relatedRecipe = value.@recipe
           if (relatedRecipe.length>1) {
                trace("recipe="+relatedRecipe);
                related.visible = true;
           } else {
                related.visible = false;
        private function goRecipe(event:MouseEvent):void {
             var linkToGoTo:URLRequest = new URLRequest(relatedRecipe);
             navigateToURL(linkToGoTo, "_blank");
     ]]>
</mx:Script>
<mx:LinkButton id="related" label="Related Recipe" click="goRecipe(event)" textDecoration="underline" fontSize="10" styleName="recipeLinkButton" />
</mx:Canvas>

Getting the value of a checkbox in an item renderer?

I have a list that uses an item renderer with buttons and data. I need to add a checkbox and get the value of this checkbox passed along with the event of the pushbutton.
When the user clicks "add to menu: there is a click handler:
protected function addButton_clickHandler(event:MouseEvent):void
                    doubleIt = double.selected;
                    owner.dispatchEvent(new Event("ADD_TO_MENU", true));
Back in the main application, there is a listener for this event. I want that handler to be able to "know" the status of that checkbox (i.e. the value of "doubleIt", defined as a public boolean).
private function addToMenuHandler(event:Event):void {
           var i:int = event.target.selectedIndex;
           var obj:Object = new Object();
           obj = recipeListCollection.getItemAt(i);
           menuList += obj;
I have tried various permutations of the event.target, but can't figure out how to access that variable.

Create a custom event and stuff anything you want in there.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Item Renderer in a Datagrid

I'm struggling with how to make a check mark ( image ) show
up or not based on the value of some data in each datagrid line
item. I'm using an item renderer but I'm missing something. Any
help would be greatly appreciated.
thanks,
STeveR

The following is my entire itemrenderer...please excuse any
bad style as this is a WIProgress..
Its probably easier to quote the adobe docs on listdata...If
a component implements the IDropInListItemRenderer interface, you
can use its listData property to obtain information about the data
passed to the component when you use the component in an item
renderer or item editor..I made sure the component implements the
interface as you can see in the code at the top of component. Then
add the couple of required functions regarding listdata, then you
can access the listdata in your own functions in the renderer, like
i do in set data function.
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
this line assigns the value from my datagrid to the renderers
button label. (this renderer is a button that the user can press)
so i want the buttons label to show the value coming in from the
datagrid. So listdata is just a way to
explicitly get the column name where the current data is
being sourced from in your datagrid.As the grid is being rendered,
it renders row by row. In each row it goes thru your columns . SO
initially it for row 1 it would begin rendering firstname, surname,
mark, average...etc etc. If i put an alert in on
value[DataGridListData(listData).dataField
I would see these column names popping up as they are getting
rendered in the DGrid.
Hope this helps...

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" width="74" height="30"
horizontalAlign="center" verticalAlign="middle"
implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer">
<mx:Metadata>
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.DataGrid;
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.collections.IViewCursor;
import mx.controls.Alert;
import mx.events.*;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.containers.TitleWindow;
private var panel:AssessmentMarkPopup = new
AssessmentMarkPopup();
var the_val = 0;
var col_index:int;
private var _listData:BaseListData;
public function get listData() : BaseListData
return _listData;
public function set listData( value:BaseListData ) : void
_listData = value;
private function showLoginForm():void {
var pop:AssessmentMarkPopup =
AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
pop.addEventListener("closepopup",onClose);
pop.TXT_***_mark.text = this.BTN_***_mark.label;
var row:int =
this.parentApplication.DG_class_students.selectedIndex;
pop.student_name =
this.parentApplication.DG_class_students.selectedItem.firstname + "
" + this.parentApplication.DG_class_students.selectedItem.lastname;
private function onClose(e:MyClosePopupEvent):void{
this.BTN_***_mark.label = e.data.mark;
public function newInstance():*
return new MarkEntry();
public override function get data():Object
return super.data;
override public function set data(value:Object):void {
var dg:DataGrid = (listData) ? DataGrid(listData.owner) :
null;
var column:DataGridColumn = (dg) ?
dg.columns[listData.columnIndex] as DataGridColumn : null;
col_index = listData.columnIndex;
var str:String = String(column.dataField);
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
]]>
</mx:Script>
<mx:Button click="showLoginForm()" id="BTN_***_mark"
width="52"/>
</mx:VBox>

Generic item renderer for Adv DG Columns?

Hello,
I'm trying to create a generic ItemRenderer for my Adv DG so that so that I can put a toolTip on the cells.
The Adv DG Column object doesn't have a toolTip property so I'm creating my own renderer...
As far as I'm aware I have to create an ItemRenderer that knows the fieldName that it is rendering so I can use {data.myFieldName}. I was hoping there was a property so that I can reference the value generically such as {data.text} but this obvisouly doesn't work...
Is there anyway around this? Can I pass a paramater to the itemRenderer? I'm doing it like this...
advancedDataGridColumn.itemRenderer = new ClassFactory(renderers.ToolTipFieldRenderer);
Alsok, there is a toolTip property of the AdvDG but the columns, what is the AdvDG.toolTip used for? Just a general toolTip? The reason why I need a toolTip is our client has asked to be able to mouse-over the cell to see the full value where the field value is chopped because it's too long for the column...
Hope that makes sense and hope you can help...
Cheers,
Nick

The AdvancedDataGridColumn class has dataTipField and dataTipFunction
properties and these are supported by the default item renderer
(AdvancedDataGridItemRenderer), which is also generic. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
<mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         private var dpADG:ArrayCollection = new ArrayCollection([
      ]]>
    </mx:Script>
    <mx:AdvancedDataGrid
        height="400"
        width="300"
        sortExpertMode="true"
        dataProvider="">
        <mx:columns>
            <mx:AdvancedDataGridColumn
                dataField="Artist"
                dataTipField="Artist"
                showDataTips="true" />
            <mx:AdvancedDataGridColumn
                dataField="Album"
                dataTipField="Album"
                showDataTips="true" />
            <mx:AdvancedDataGridColumn
                dataField="Price"
                dataTipField="Price"
                showDataTips="true" />
        </mx:columns>
   </mx:AdvancedDataGrid>
</mx:Application

Two item renderer for one datagrid column?

hi
i have one doubt
can we use two item renderer for one datagrid column
any possibilities
why i am asking this because
during drag and drop i need one itemrenderer and during application initialization i need another itemrenderer
any possibilities
karthik.k

Hi,
I think your requirement can be completed by using ViewStack you can pass selected index to it according to requirement.
See:
<itemRenederer ...
     <viewstack selectedIndex = 0 ...>
          <vBox id="vBox1" >
                    Your 1st itemrenderer will come here....
          </vBox>
          <vBox id="vBox2" >
                    Your 2nd itemrenderer will come here....
          </vBox>
     </viewStack>
</itemRenederer>
You have to just toggle selectedIndex.
Thanks

Inbuilt Item Rendering inside DataGrid .

Hi ,
Please find the screen shot attached with this Thread .
The data is been populated into the Datagrid from DataBase using ArrayCollection as DataProvider .
Now i want to have Radio Buttons displayed at the begning of the each row of Names Column .
When i tried to use , inbuilt itemRenderer as mx.controls.RadioButton , inside DataGridColumn of 'Names' Column of DataGrid   , the Data appeared in such a way that all the Data inside the Names Column is repalced by showing only RadioButtons .
Please tell me if this is possible using Inbuilt Item Rendering itself??(As Custom Rendering seems tough for me rigjt now )
Or suggest me an easy approach , basically my requirement is that i want to get the Selected Value Object into a function for doing Upadate and Delete facility .
Please help
Thanks in advance .

Thanks for the reply , sorry for th
late reply as i dont have Flex at my Work place .
This is my code :
            <mx:DataGrid id="MyDG" height="100%" width="100%"
                 dataProvider="{flightList}" change="GetTheValue()">
            <mx:columns>
                <mx:DataGridColumn headerText="Names" dataField="uname">
        <mx:itemRenderer>
mx.controls.RadioButton
</mx:itemRenderer>
                </mx:DataGridColumn>
<mx:DataGridColumn headerText="Pwds" dataField="pass" >
                </mx:DataGridColumn>
            </mx:columns>
                        </mx:DataGrid>
This is the screen shot earlier and now afeter adding Item Rendering , Any help .
Please find the screen shots attached

Any Help ? My Item Renderer fails with Reference Error: Error #1069:

So I have a basic inline dropdownbox itemrenderer as shown below, But after I click it and select a value I get an error "ReferenceError: Error #1069: Property TELEPH_USE_TYPE_DESC not found". I am guessing I am referencing something incorrectly. Any Ideas
Code
<mx:AdvancedDataGridColumn dataField="TELEPH_USE_TYPE_DESC" editorDataField="TELEPH_USE_TYPE_DESC">
    <mx:itemEditor>
        <fx:Component>            <s:MXAdvancedDataGridItemRenderer focusEnabled="true" height="22">
                <s:DropDownList                     id="dd"
                    top="5"
                    left="5"
                    labelField="TELEPH_USE_TYPE_DESC"                   selectedItem="{data.TELEPH_USE_TYPE_DESC}"                   dataProvider="{parentDocument.tpUseAc}" />            </s:MXAdvancedDataGridItemRenderer>         </fx:Component>
    </mx:itemEditor></mx:AdvancedDataGridColumn>

TELEPH_USE_TYPE_DESC is a field on the data object, but not a property on the item renderer which is defined within the mx:itemEditor tag.
You could add something like
<mx:Script>
<![CDATA[
    public function get newValue():Object
         return dd.selectedItem.TELEPH_USE_TYPE_DESC;
\]\]\>
</mx:Script>
And change the editorDataField to “newValue”

Problem with checkbox item renderer in datagrid

I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
[Bindable]
var listUnitMovement:XMLList=null;
In a function call
public function init(event:ResultEvent):void
    listUnitMovement=event.result.unitmovement;
     <mx:DataGrid id="dg_country"
                           dataProvider="{listUnitMovement}"
                              enabled="true">
                            <mx:columns>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:CheckBox selectedField="CHECK_PATH" />
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                <mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
                                <mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:Button label="Details"/>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                            </mx:columns>
                        </mx:DataGrid>

Hi,
Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
Do you want something like this...
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
</mx:Script>
<mx:DataGrid dataProvider="{listUnitMovement}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="NEW_LAT"/>
<mx:DataGridColumn dataField="NEW_LONG"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
Thanks,
Bhasker Chari.S

How to overlap datagrid colums line with item renderer

Hello guys I been stuck for a few days now and I'm wondering if there is a better way to do this.
I put an item renderer on a column of the datagrid. The renderer basically expands the column height and shows some controls.
Im using a border container as the container that is holding the items in the grid. However what I would like to do is make the border container as big as the grid with a plus sign button. and then basically hide that rows vertical grid lines.
i tried setting the depth eventhought i understant this is not a spark grid i though it should work but it does not. Any tip or direction would be greatly appreciated.
Miguel

ok i answered my own question. what i need to do is use the advance datagrid. Then set these properties.
<mx:AdvancedDataGrid defaultLeafIcon="{null}"
                         folderClosedIcon="{null}"
                         folderOpenIcon="{null}"
                         disclosureClosedIcon="@Embed(source='assets/plusSign.png')"
                         disclosureOpenIcon="@Embed(source='assets/plusSign.png')">
Message was edited by: miguel8312

How do you measure performance of an item renderer?

I'm creating an ItemRenderer in Flex 4.6 and I want to know how to measure total time to create, view and render an item renderer and how long it takes to view and render that item renderer when it's being reused.
I just watched the video, Performance Tips and Tricks for Flex and Flash Development and it describes the creation time, validation time and render time and also the reset time. This is described at 36:43 and 40:25.
I'm looking for a way to get numbers in milliseconds for total item renderer render time and reset time (what is being done in the video).

To answer your first question, in this video Ryan Frishberg recommends measuring and tuning your code. I'm trying to follow his example for my own item renderers.
I've taken some key slides out to show you.

Using a bitmap object as a item renderer in a datagrid

I have a UIComponent grabbed has a bitmap, and stored in an
array collection.
I want to display a thumbnail in a datagrid, I can make a
itemRenderer for an image with a local or remote file as a source.
But how do I use the bitmap in the array collection in an item
renderer.
Thanks
Dean

Here is an example with a HorizontalList:
<?xml version="1.0" ?>

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalGap="0" borderStyle="none" backgroundColor="white"
>
<mx:Image id="image" width="60" height="60"
source="{data.image}"/>
<mx:Label text="{data.name}" width="120"
textAlign="center"/>
<mx:Label text="${data.price}" fontWeight="bold"/>
</mx:VBox>
<?xml version="1.0"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Model id="catalog" source="catalog.xml"/>
<mx:HorizontalList id="myList"
columnWidth="125"
rowHeight="125"
columnCount="4"
dataProvider="{catalog.product}"
itemRenderer="myComponents.Thumbnail"/>
<mx:LinkButton label="Product images courtesy of Lavish"
click="navigateToURL(new URLRequest('
http://www.shoplavish.com'),
'_blank')"/>
</mx:Application>
<?xml version="1.0"?>
<catalog>
<product id="1">
<name>USB Watch</name>
<price>129.99</price>
<image>assets/products/usbwatch.jpg</image>
<thumbnail>assets/products/usbwatch_sm.jpg</thumbnail>
</product>
<product id="2">
<name>007 Digital Camera</name>
<price>99.99</price>
<image>assets/products/007camera.jpg</image>
<thumbnail>assets/products/007camera_sm.jpg</thumbnail>
</product>
<product id="3">
<name>2-Way Radio Watch</name>
<price>49.99</price>
<image>assets/products/radiowatch.jpg</image>
<thumbnail>assets/products/radiowatch_sm.jpg</thumbnail>
</product>
<product id="4">
<name>USB Desk Fan</name>
<price>19.99</price>
<image>assets/products/usbfan.jpg</image>
<thumbnail>assets/products/usbfan_sm.jpg</thumbnail>
</product>
<product id="5">
<name>Caffeinated Soap</name>
<price>19.99</price>
<image>assets/products/soap.jpg</image>
<thumbnail>assets/products/soap_sm.jpg</thumbnail>
</product>
<product id="6">
<name>Desktop Rovers</name>
<price>49.99</price>
<image>assets/products/rover.jpg</image>
<thumbnail>assets/products/rover_sm.jpg</thumbnail>
</product>
</catalog>

Data provider problem in custom item renderer

I have a complex, custom item renderer for a list. I add
items that I extracted from an xml to the data provider using the
IList interface. But when displaying the list, the items are all
screwed up. Each rendered item has some parts which are initialized
as different components depending on the values from the xml. This
initialization is called in the item renderer for the
creationComplete event.
The weird thing is that when I output the dataProvider to
check its values, some of the items have internal uids sometimes
and sometimes they don't. If I output the dataProvider right after
I add the items to it, none of them get internal uids. But from the
initialize method, some of them do and some don't.
To make things weirder, sometimes, as I scroll up and down
the list, the dynamic components get all switched up. I'm either
having a problem with internal uids or with the creation policies
for lists. Or it's probably some simpler mistake I have yet to see.
Anyone have any idea where the problem could lie? Any help is
greatly appreciated.

Any successful render must:
1) override the set data property of the component
Further, best practice is to store any data you need in the
override set data(), and call invalidateProperties(). Then do the
actual work in an override commitProperties() function.
The framework is smart about when to call commitProperties
efficiently. set data() gets called much more often.
Tracy

Item Renderer passed to legend

Similar Messages

Maybe you are looking for