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.

Similar Messages

How to dispatch custom events from an item renderer used for Datagrid Column

Hi,
I am using an Item Renderer for a Data Grid Column and in that mxml, I am dispatching a custom event with data.
But the main mxml which has the DataGrid is not able to resolve the event. How can I solve this?
Thanks

Hi,
This is the constructor for Event.
public function Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
When you created your custom event after extending from Event, for the parent container receives the event, the bubbles property must be set to true.
Please check if you have done so. That should solve the problem. Let me know if it doesn't.
Nishad

How to call click event to HorizontalList item after it's been initialized

How do I to call the click event of a HorizontalList item
after the dataprovider property of the HorizontalList object's been
set and the first item's been created. I need to call it's click
event.

http://www-03.ibm.com/support/ezserv/home.jsp

Stopping data being 'pushed'

Hi,
Jus wondered what I need to switch off to stop any data being 'pushed' into cyberspace. Already turned off iCloud,Bluetooth and location services.... Anything else ?
Thanks in advance.

Synced means being kept up to date. If you change a reminder on an iPhone that information will be pushed through the cloud to a iPad and/or Mac and vice versa. If your email is iMap, email may be synced with the server through push or pull, but in either case the iPad needs to communicate and receive information from the server. To receive notifications, messages and facetime calls you need to have access to Apple's servers from your device.
In the end, cutting off the data will severely hinder your ability to use the device. Many games won't work if they don't have connectivity to game center or the games servers for storing high scores and save states. Your apps that link to cloud storage services (Dropbox, OneDrive, Google Drive, etc) won't be able to sync and save your data.
Put your iPad in Airplane mode and see what breaks. If you just want to turn off iCloud (based on your other posts) just go into Settings -> iCloud and start movingn the switches so none of them are green. That will stop all syncing with iCloud data services. Then go to Settings -> Notification Center and for each app listed you'll need to turn off notifications. Under Settings -> Privacy you'll probably want to go through each item and make sure you cut off data access for each of them. Under Settings -> Messages make sure you flip the switch so it's not green, and the same with Facetime. Under Safari in Settings turn on do not track and start cookie blocking.
If I missed any I'll fill it in later.

Trouble w/ items button, request not being passed

I'm having trouble w/ a button created as a region's item.
I have a search box, and a P100_GO button.
The GO button generates a GO request.
I then have an branching that is conditional
on Request=Expression 1
and in Expression 1 I put GO.
but this request never gets picked up.
Any suggestions as to what I may be doing wrong?
Thanks,
Erik

Jeff,
Your situation does not even remotely resemble the original problem posted in this thread. But that's okay.
I recommend that you take a look at some of the how-tos at: http://otn.oracle.com/products/database/htmldb/howtos/index.html, download and go through the HTML DB User Guide (http://download-west.oracle.com/docs/cd/B13789_01/appdev.101/b10992/toc.htm) , and most importantly, request a workspace on our hosted site (htmldb.oracle.com). Then if you have a particular problem with your application, we can look at it directly and offer help. It's much more efficient than using the forum to communicate all the details of how your application is built, what's not working, etc.
Scott

DataGrid Using an item renderer that spans an entire row

Anyone know how can I do this using DataGrid?

I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
     <mx:transitions>
          <mx:Transition fromState="*" toState="*">
               <mx:Resize target="{this}"/>
          </mx:Transition>
     </mx:transitions>
     <mx:states>
          <mx:State name="normal"/>
          <mx:State name="expanded"/>
     </mx:states>
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var ac:ArrayCollection;
          private function changeState(event:Event) : void {
               if( event.target.selected )
                    currentState = "expanded";
               else
                    currentState = "normal";
          override public function set data(value:Object) : void {
               super.data = value;
               ac = new ArrayCollection(value.models);
     ]]>
     </fx:Script>
     <mx:CheckBox label="{data.title}" click="changeState(event)"/>
     <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:ct="*"
     height="100%" width="100%">
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var dp:ArrayCollection = new ArrayCollection([
          {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
               {title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
               {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
               {title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
     ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
          <mx:columns>
               <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
               <mx:DataGridColumn dataField="style" headerText="style" />
          </mx:columns>
     </mx:DataGrid>
</s:Application>

Activating Click event on Item Renderer only

Hey. I'm working on a s:list and a click event problem. I have everything working just fine on the component and linking, but as you probably guessed, the event cues when anything on the s:list is clicked, including the scroll bar or empty space.
Is there a quick fix to make the event only cue when an Item Renderer is clicked inside the list? Help would be much appreciated, I've been trying to solve this problem for a while.
Thanks!
RKaster

Hi RKaster,
do you need the reference to the item renderer by force or could you immagine a different approach? If you could work around that you could use the change event instead of the click event. The change event gets fired whenever the selection of items in the list change. A click on an item renderer of course will change the selection if the underlying item isn't already selected.
If you can't work around the need of an item renderer reference you should experiment with the mouseChildren property of the List component (inherited from DisplayObjectContainer, see http://bit.ly/dhqCFS). IMHO of course
Regards,
Thilo

Checkbox item renderer populated with data from 2 sources

I have a list object that has a check box and a label (using an inline item renderer). The list itself is populated with an array of objects and whether the checkbox is selected takes those objects and adds them to another list (for outbound purposes). Since the selected list can change elsewhere in my app how do I keep the binding of selections consistent? The dataprovider for my checkbox list is the first array of objects and is binded, but the second one (selected array) is not. What would be the best way to provide that binding to make sure the selected is consistent when the second array changes. Some of the code is below to better show...
<cms:HilightList
     id = "distributorList"
     width = "100%"
     height = "100%"
     drawHighlight="{ViewUtils.drawHighlightIndicator}"
     drawSelection="{ViewUtils.drawHighlightIndicator}"
     dataProvider="{pmDistributors.distributors}">
     <mx:itemRenderer>
          <mx:Component>
               <mx:HBox>
                    <mx:CheckBox
                                       selected = "{outerDocument.isSelected(data)}"
                           change = "{outerDocument.handleSelectedChange(event)}"/>
                    <mx:Label text="{data.name}"/>
               </mx:HBox>
          </mx:Component>
     </mx:itemRenderer>
</cms:HilightList>
public function isSelected(item:Object):Boolean
     var partner:Partner = item as Partner;
     var selected:Boolean = false;
     for each(var schedPartner:Partner in scheduleAssets.partners)
          if(schedPartner.id == partner.id)
               selected = true;
     return selected;
public function handleSelectedChange(event:Event):void
     var partner:Partner = event.currentTarget.parent.data as Partner;
          if(event.currentTarget.selected)
               addPartnerEvent(partner);
          } else {
               removePartnerEvent(partner);

Hi Aakcse,
In this condition, you need to make use of both the Precedence Constraint between Control Flow Tasks and the Conditional Split Transformation. Supposing you get the value in the flat file and store it in a variable via Script Task, you can create two Data
Flow Tasks, and connect the Script Task to the two DFTs.
For the Precedence Constraint between the Script Task and the Data Flow Task 1, set the “Expression and Constraint” expression to @[User::vEntryStatus]=="Y". And for the Precedence Constraint between the Script Task and the Data Flow Task 2, set the “Expression
and Constraint” expression to @[User::vEntryStatus]=="N".
In Data Flow Task 1, add a Conditional Split Transformation with this expression [Entry]==”YES”, and direct this output to the destination component. In Data Flow Task 2, also add a Conditional Split Transformation with expression [Entry]==”NO”, and direct
the output to the destination component.
Regards,
Mike Yin
If you have any feedback on our support, please click here
Mike Yin
TechNet Community Support

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

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);

Data grid Click event

I have 4 columns in my datagrid,and 4 list box and test input
field when i select some value in list box and then press a button
it is added to Datagrid 1st row in 3 columns , and when i click
another button to add a value in 4th column of 1st row it should
display, but it displays in 4th column of 2nd row . kindly let me
know the process how to display two click events in a single row of
datagrid
thanks in advance
Clicking Two buttons should display two different values in
Datagrid in a single row

The second click has no way of knowing the data from the
first click exists. You could just add the second click data to the
dataprovider last item, but then you need to think about how to
structure and access the data. XML in XMLListCollection is probably
best.

PopupMenuButton: Can not Stop 'click' event

Hello Everybody,
I am working with a PopupMnuButton. The PopupMenuButton is
skined so the selected value is not visible. The menu has four
items which when clicked performs respective operations. But when
the main button of the PopupMenuButton is clicked it performs the
operation for the first menu item. I wish to stop that from
happening.
Going through the help files I found that PopupMenuButton
dispatches a click event when the main button part of the
PopupMenuButton is clicked, which further dispatches the itemClick
event for the last selected index.
Is there a way around to stop the click event from firing
when the main button is clicked?
I dont want any action to take place if the button is
clicked. The user has to select an item from the menu.
Please advise.
Regards,
Paromita

Hi Tracy,
No setting selectedIndex value to -1 did no work as
slectedIndex is a private property for PopupMenuButton so can't
access from the application. Whenever, I try clicking the button it
fires the itemClick. Even could not get the standard change event
to work....it seems that only itemClick method operates and the
click on button fires the itemclick event.
It would be great if anyone could suggest any workaround.
Thanks and Regards,
Paromita

Item Renderer in Advanced Data Grid

I have checkbox against each folder in the datagrid and
binded to XMLListCollection. When the value in the field is true, i
want that checkbox to be selected. Its not working. Here is the
code. I want to know how item render is working in AdvancedDataGrid
Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
import mx.collections.XMLListCollection;
]]>
</mx:Script>
<mx:XMLList id="dpHierarchyXML" >
<Clegs>
<Cleg name="Cleg1" sel="true">
<FlightLeg createdDate="10/10/2008"
effectiveDate="10/10/2008"
endDate="10/10/2008" modifiedDate="10/12/2008"
station="ATL" carrier="Delta"
flightNo="9W756" acType="122"
beginDate="10/10/2008" timeRange="10"
doop="123" region="XYZ"
year_duration="0.24" moons="0"
cost="1250"
/>
</Cleg>
<Cleg name="Cleg2" sel="true">
<FlightLeg createdDate="10/10/2008"
effectiveDate="10/10/2008"
endDate="10/10/2008" modifiedDate="10/12/2008"
station="ATL" carrier="Delta"
flightNo="9W756" acType="122"
beginDate="10/10/2008" timeRange="10"
doop="123" region="XYZ"
year_duration="0.24" moons="0"
cost="1250"
/>
</Cleg>
</Clegs>
</mx:XMLList>
<mx:AdvancedDataGrid
id="adg"
dataProvider="{new HierarchicalData(dpHierarchyXML.Cleg)}"
rowCount="20"
width="100%"
treeColumn="{leg}"
variableRowHeight="true"
wordWrap="true" dropEnabled="true" dragEnabled="true"
dragMoveEnabled="true" sortExpertMode="true"
>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="@sel"
headerText=" " width="25" rendererIsEditor="true"
editable="true" editorDataField="selected" />
<mx:AdvancedDataGridColumn dataField="@name" id="leg"
headerText="cLeg" />
<mx:AdvancedDataGridColumn dataField="@createdDate"
headerText="Created Date" />
<mx:AdvancedDataGridColumn dataField="@effectiveDate"
headerText="Effective Date" />
<mx:AdvancedDataGridColumn dataField="@endDate"
headerText="End Date" />
<mx:AdvancedDataGridColumn dataField="@modifiedDate"
headerText="Modified Date" />
<mx:AdvancedDataGridColumn dataField="@station"
headerText="Station" />
<mx:AdvancedDataGridColumn dataField="@carrier"
headerText="Carrier" />
<mx:AdvancedDataGridColumn dataField="@flightNo"
headerText="Flight No" />
<mx:AdvancedDataGridColumn dataField="@acType"
headerText="Account Type" />
<mx:AdvancedDataGridColumn dataField="@beginDate"
headerText="Begin Date" />
<mx:AdvancedDataGridColumn dataField="@timeRange"
headerText="Time Range" />
<mx:AdvancedDataGridColumn dataField="@doop"
headerText="DOOP" />
<mx:AdvancedDataGridColumn dataField="@region"
headerText="Region" />
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider columnIndex="0"
columnSpan="1" depth="1" renderer="mx.controls.CheckBox">
</mx:AdvancedDataGridRendererProvider>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>

2) You do not set an item editor only an item renderer.
<mx:AdvancedDataGridRendererProvider columnIndex="0"
columnSpan="1" depth="1" renderer="mx.controls.CheckBox">
3) You do not have rendererIsEditor on any columns that I can
see.
<mx:AdvancedDataGridColumn dataField="@sel"
headerText=" " width="25" rendererIsEditor="true"
editable="true" editorDataField="selected"/>
If I use the itemrender for that column, i am gettting the
check box for all the rows. Which i dont want . I want check box
only for the folder node. so i am using renderer provider
I want only one column to be editable

Using multiple data points in an item renderer?

I have a datagrid, bound to data from an XML file. My XML has
multiple items,such as:
<book>
<title></title>
<author></author>
<description></description>
<cover>someimage.jpg</cover>
</book>
I need to display each book as a unit, something like:
[image] Moby Dick
Herman Melville
A long book about a whale.
How would I accomplish this? Obviously, I can easily display
the discrete info in columns, but I'd like to lay it out as one
unit.
Thanks.

Use a list control instead of a datagrid. Then use a custom
item renderer based on HBox or VBox depending on your preference
for horizontal or vertical layout... possibly even just a Box
control so you can change it at your whim.

How to Flex tree control using folder click event to pass coldfusion to get data from dynamiclly ?

Hi friends.........
Iam using flex tree control data coming from coldfusion file to display grid. As i click the tree folder to change the data from dynamic from grid.
How to pass the folder id from coldfusion file.. Is it possible ?.. Means give any example please....
Any One Help Me......
With Regards.,
Lingu.......

When you set the dataProvider for your tree control, you actually pass an array or arraycollection or whatever to that property. The array contains objects coming from your server, right? Each object should contain a property with the folder id, something like:
var arr:Array = [{id: 1, folderID: 34, name: "..."}, {id: 2, folderID: 4, name: "..."}, ...];
Now, when you click an item in your tree or your dataGrid, you can access the folder id by:
myTree.selectedItem.folderID
Hope this helps
Dany

Click event on a item renderer stops data being passed

Similar Messages

Maybe you are looking for