I have a list that uses a checkbox itemrenderer. The dataprovider is a collection of people. When I load the data from a file, each list item shows the person's name (last, first -- labelFunction), and the checkbox's selected property shows the person's included property. I.e.,
Smith, Doug - [x]
Williams, Bob - [ ]
Morris, Anne - [x]
However, each person also has an active property. I want to disable the checkbox for people who are inactive (meaning, "you can't include inactive people"). I have tried several methods to get this to work, including what's suggested here http://forums.adobe.com/thread/416786 to do the same thing in a datagrid. However, none of them work and all the checkboxes are enabled regardless of the person's active status. Here is my basic code:
<mx:List id="peopleIncludedList"
dataProvider="{someProvider}"
labelFunction="peopleLabelFunction">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox change="onChange(event)"
selected="{outerDocument.isIncluded(data)}">
<mx:Script>
<![CDATA[
private function onChange(e:Event):void
{
...
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Any help on this would be greatly appreciated. Thank you.
-- Ian
I'll take a crack at it, but sometimes it is hard to tell without sample data.
First, don't reference the outerDocument in arenderer, and don't use binding, instead listen to the dataChange event
<mx:List id="peopleIncludedList"
dataProvider="{someProvider}"
labelFunction="peopleLabelFunction">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox change="onChange(event)" dataChange="onDataChange()">
<mx:Script>
<![CDATA[
private function onChange(e:Event):void
{
// not sure what this method is doing
}
private function onDataChange():void{
this.selected = isIncluded(data); // whatever your processing is
if(data.person.active == true){
this.enabled = true;
} else {
this.enabled = false;
}
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Since stackoverflow only notifies me daily of new answers, I wasn't actively looking at this thread, and was more involved on the Adobe boards. Anyway, found a solution. Reference it here http://forums.adobe.com/message/3267367. Thanks everyone for your suggestions and helpfulness!
Related
OK you Flex experts, I need some help. I have a datagrid in my main application with an itemrenderer (mxml). When you press the image in the ir, a custom component (mxml) opens. The cc has a button that is supposed to call a function in the main application which updates the arraycollection (dataprovider) and therefore the datagrid updates. I've tried several variations of parentDocument, outerDocument, and custom events, but I cannot get that function to work from the button. I think it's b/c I have the cc nested in the ir. Anything that I call directly from within the ir works.
Does anyone have any suggestions or even better a working example I could take a look at?
Here's what I tried:
//in main application
public function creationComplete_handler(event:FlexEvent):void{
dgList.addEventListener("ceRD", fnt_ceRD);
}
public function fnt_ceRD():void {
Alert.show("called");
}
<mx:AdvancedDataGrid id="dgList" dataProvider="{acLists}" designViewDataType="flat">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Roster" sortable="false" itemRenderer="c_CO.AppLocal.ListManager.iRenderers.irADVStudents" /> </mx:columns>
</mx:AdvancedDataGrid>
In itemrenderer, used the popupmanager so that I could center on top of application as opposed to button in datagrid
public function btnRoster(event:MouseEvent):void{
var rShow:rosterDetails = new rosterDetails();
PopUpManager.addPopUp(rShow, FlexGlobals.topLevelApplication.mainContent, true);
PopUpManager.centerPopUp(rShow);
}
In custom component:
<fx:Metadata>
[Event("ceRD", true, false)]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flash.events.Event;
protected function btnSave(event:MouseEvent):void {
var i_ceRD:Event = new Event("ceRD");
dispatchEvent(i_ceRD);
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
You are experiencing trouble because the listener for "ceRD" is added to the DataGrid while the event is being dispatched from the Roster Details component. There is no relationship between the DataGrid and RosterDetails.
Consider moving the logic to create and display the RosterDetails out of the ItemRenderer. I would suggest having the irADVStudents renderer dispatch an 'imageClick' event which can be handled in your main application.
Inline renderers are helpful for adding simple event handling:
<mx:AdvancedDataGrid dataProvider="{acLists}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Roster" sortable="false">
<mx:itemRenderer>
<mx:Component>
<local:irADVStudents imageClick="outerDocument.onRoster(event)"/>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
Then you can simply add a listener for your 'save' event. Ensure to remove the listener as this is a potential memory leak. (A weak listener is also an option).
public function onRoster(event : Event) : void
{
var rosterDetails : RosterDetails = new RosterDetails();
rosterDetails.addEventListener("save", onSave);
PopUpManager.addPopUp(rosterDetails, this, true);
PopUpManager.centerPopUp(rosterDetails);
}
protected function onSave(event:Event):void
{
Alert.show("SAVED");
}
Custom events can be used to pass data around the application, such as which item was clicked on from the renderer.
I have a TileList cp with 10 item.
How can i call a function in 4. item (for example) from outside, where i created a TileList cp?
Thanks
UPDATE:
Based on your comments, this should be even easier. You would just loop through each of the rows in your List's dataProvider and make whatever changes are necessary. At the end of the function just call the refresh function on the ArrayCollection. Using my example below:
public function myFunction(evt:Event):void
{
for each (var o:MyObject in myDataProvider)
{
o.someProperty = "Updated";
}
myArrayCollection.refresh();
}
After the ArrayCollection is updated, calling the refresh function should cause the List to refresh its item renderers as well.
ORIGINAL ANSWER:
It sounds like you want to call a function outside your ItemRenderer when a button or something is clicked in the ItemRenderer but still be able to access the data for the item that was clicked.
Assuming I've got this correct, you still wouldn't need to access the ItemRenderer itself. You can just do something like this (just a rough example):
<fx:Script>
<![CDATA[
public function myFunction(evt:Event):void
{
trace(MyObject(myList.selectedItem).someProperty.toString());
}
]]>
</fx:Script>
<mx:List id="myList" dataProvider="{myDataProvider}" >
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox selectedField="IsSelected" change="outerDocument.myFunction(event);" />
</fx:Component>
</mx:itemRenderer>
</mx:List>
If you do need to pass a completely separate parameter that's not stored in your List's dataProvider, just pass it as an argument to the change eventHandler.
change="outerDocument.myFunction(event, someOtherValue);"
<mx:DataGrid x="10" y="10" width="180" height="302" id="dgActions" dataProvider="{actionCollection}">
<mx:columns>
<mx:DataGridColumn headerText="Action" dataField="name"/>
<mx:DataGridColumn headerText="" dataField="setting" width="30" rendererIsEditor="true">
<mx:itemRenderer >
<mx:Component>
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:CheckBox selected="{data.setting}" click="setActionSetting()">
<mx:Script>
<![CDATA[
private function setActionSetting(){
data.setting = String(this.selected);
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
For some reason I'm getting an error at the data.setting= String(this.selected) line which says "Access to possibly indefined property selected through a reference with static type".
[edit] The solution to the above problem (albeit not the entire mess) was that once you're inside a <mx:Component> tag you are within the scope of said component. To get access to the script and nodes outside this component you have to use the outerDocument object.
[end edit]
I'm not sure what it's expecting, I'm assuming that it's going to pass the true/false value of the selected(ness) of the checkbox into the method, but it appears not to understand what "this" is, in this context.
Am I doing something obviously wrong? All I want is for the data source to reflect the change in the status that it initially fed into the checkbox.
EDIT:
I just noticed that when I add trace('foo') to the function, it never writes anything back to the console. Is the checkbox's native behavior (and event capture) preventing it from bubbling past to my function?
Additionally, when I add references to objects outside in the rest of the document, it tells me it doesn't recognize them. I'm totally confused as to how Flex scopes things... any additional guidance or links to reference would be really handy.
this in this (ha) case is referring to the component renderer and not the surrounding class (or the checkbox, datagridcolumn, datagrid, etc). You are really better off breaking the renderer out into a real component so you won't be obfuscating the scope as much as when the inline component approach is used.
Peter Ent's series on itemRenderers is extremely useful and should explain everything you want to know on the subject.
If I had to guess "this" is the mx:Script element, try "parent.selected".
CheckBox.selected requires a Boolean value. The fact that you're setting data.setting to a String value tells me that data.setting is NOT a Boolean.
So, after a great deal of agony I have finally figured out how this all works....
Joel is on the right track, this doesn't refer to what you would hope it would refer to (namely the checkbox). Additionally, even if you pass this into the method FROM the checkbox node, it refers to the parent wrapper class and not the checkbox itself. So, the solution is to pass in the event, and then access its target, which FINALLY is the checkbox. And then you're home.
In other words...
<mx:CheckBox selected="{data.setting}" click="setActionSetting(event)">
<mx:Script>
<![CDATA[
private function setActionSetting(e:Event):void{
data.setting = e.target.selected;
trace("n=" + data.name + " set to " + data.setting);
//the name is the other piece of the data that I omitted for clarity
}
]]>
</mx:Script>
</mx:CheckBox>
I'm going spare trying to figure out the "correct" way to embed a ComboBox inside a Flex (3.4) DataGrid. By Rights (e.g. according to this page http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/) it should be easy, but I can't for the life of me make this work.
The difference I have to the example linked above is that my display value (what the user sees) is different to the id value I want to select on and store in my data provider.
So what I have is:
<mx:DataGridColumn headerText="Type" width="200" dataField="TransactionTypeID" editorDataField="value" textAlign="center" editable="true" rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:ComboBox dataProvider="{parentDocument.transactionTypesData}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Where transactionTypesData has both 'data' and 'label' fields (as per what the ComboBox - why on earth it doesn't provide both a labelField and idField I'll never know).
Anyway, the above MXML code doesn't work in two ways:
The combo box does not show up with any selected item.
After selecting an item, it does not store back that selected item to the datastore.
So, has anyone got a similar situation working?
While Jeff's answer is a partial answer for one approach for this (see http://flex.gunua.com/?p=119 for a complete example of this being used to good effect), it isn't as general as I wanted.
Thankfully, I finally found some great help on Experts Exchange (the answers by hobbit72) describes how to create a custom component that works in a grid as a ItemRenderer.
I've extended that code to also support using the combo box as an ItemEditor as well. The full component is as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
dataChange="setSelected()"
change="onSelectionChange(event)"
focusEnabled="true">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.DataGridListData;
private var _ownerData:Object;
private var _lookupField:String = "value";
// When using this component as an itemEditor rather than an itemRenderer
// then set ' editorDataField="selectedItemKey"' on the column to
// ensure that changes to the ComboBox are propogated.
[Bindable] public var selectedItemKey:Object;
public function set lookupField (value:String) : void {
if(value) {
_lookupField = value;
setSelected();
}
}
override public function set data (value:Object) : void {
if(value) {
_ownerData = value;
setSelected();
}
}
override public function get data() : Object {
return _ownerData;
}
private function setSelected() : void {
if (dataProvider && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
for each (var dp:Object in dataProvider) {
if (dp[_lookupField] == _ownerData[col.dataField]) {
selectedItem = dp;
selectedItemKey = _ownerData[col.dataField];
return;
}
}
}
selectedItem = null;
}
private function onSelectionChange (e:ListEvent) : void {
if (selectedItem && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
_ownerData[col.dataField] = selectedItem[_lookupField];
selectedItemKey = selectedItem[_lookupField];
}
}
]]>
</mx:Script>
</mx:ComboBox>
Using this component is straight forward. As an ItemRenderer:
<mx:DataGridColumn headerText="Child" dataField="PersonID" editable="false" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Using this component is straight forward. And as an ItemEditor:
<mx:DataGridColumn labelFunction="lookupChildName" headerText="Child" dataField="PersonID" editable="true" editorDataField="selectedItemKey">
<mx:itemEditor>
<mx:Component>
<fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
Note that when using it as an ItemEditor, a custom labelFunction (that looks up the Name from the PersonID in my case) must be used, otherwise you only see the key in the grid when the field isn't being edited (not a problem if your keys/values are the same).
Note that in my case, I wanted the item focus out event to propogate up to provide immediate feedback to the user (my DataGrid has itemFocusOut="handleChange()"), hence the change event creating an ITEM_FOCUS_OUT event.
Note that there are probably simpler ways to have a ComboBox as an ItemEditor when you don't mind the ComboBox only shown when the user clicks on the cell to edit. The approach I wanted was a generic way to show a combo box in a DataGrid for all rows, and being editable and with decent event propogation.
The easiest way to add itemRenderers to DataGrids is to make a custom MXML component. In your case make a canvas, HBox, or VBox as the custom component and add the combobox as a child.Set the dataProvider on the dataGrid itself and assign the itemRenderer to the column, and then override the set data function of the itemRenderer to access all data from the given data provider for that instance as seen below:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
trace(value.data);
trace(value.name);
}
]]>
</mx:Script>
<mx:ComboBox width="100%" height="100%" id="myComboBox"/>
</mx:HBox>
This method will be called for each instance of the itemRenderer
In my case I used a spark datagrid where one of the columns has an ItemRenderer that utilises a DropDownListBox. My problem was that when my item list change, the DropDownLists doesn't get updated with the new dataProvider. To solve this, I had to pass the dataProvider for the DropDownListBox as part of the data (of the ItemRenderer), and then by overriding the setter of the data to just assign the DropDownlListBox's dataProvider. Probably a bit of overhead, but if someone have a better solution, please let me know:
<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">
<fx:Script>
<![CDATA[
override public function set data(v : Object) : void {
super.data = v;
if (v == null)
return;
dropDown.dataProvider = data.dataProvider;
}
]]>
</fx:Script>
<s:DropDownList id="dropDown" width="100%" height="100%" dataProvider="{data.dataProvider}" labelField="name"/>
How would I display a backgroundImage on a List when the List is empty?
At the moment the list is populated when items are dropped inside after a drag-and-drop but I would prefer a solution that checks for any change to the data to determine if the list is empty.
The List inherits a backgroundImage from its ScrollControlBase but what would be the best way to make it appear when the list is empty and disappear when an item is added.
Any suggestions?
Thanks!
In the past, I've done it with states for a component. Quick and dirty example would be something like this in your custom component:
<mx:List currentState="{(listItemsDataProvider.length > 0) ? 'HasItemsState' : 'NoItemsState'}">
// anything else you need
</mx:List>
and of course creating those states in the component, with the NoItemsStates changing the background image, or if your component is a container, like a Canvas, then you can have the state not display the List at all.
<?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] public var listItems:ArrayCollection = new ArrayCollection();
private function removeAllItemsFromList():void
{
this.listItems.removeAll();
backgroundCheck()
}
private function addItemToList():void
{
this.listItems.addItem({data:null,label:"test"});
backgroundCheck()
}
private function backgroundCheck():void
{
if(this.listItems.length>0)
{
this.myList.setStyle("backgroundImage", null)
}
else
{
this.myList.setStyle("backgroundImage", "me.png")
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:List id="myList" width="100%" height="100%" backgroundImage="me.png" dataProvider="{this.listItems}"/>
<mx:HBox width="100%">
<mx:Button id="addItemButton" click="addItemToList()" label="add item"/>
<mx:Button id="removeItemsButton" click="removeAllItemsFromList()" label="remove all items"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
This is how I would approach it, checking the dataProvider length. In your case you'd do so when the drop is complete.
You could extend the List control and override updateDisplayList(). Draw the backgroundImage if dataProvider.length == 0 else call super.updateDisplayList() to get normal List behavior. This will make the new List control easy to reuse if you need to.
Use the same property, set the image to null when you have some data. You may take a look at custom ItemRenderers as well.