Access ItemEditor in Datagrid
Hey
I have a DataGrid in which one particular column is editable. The Column looks like this -
<mx:DataGridColumn id="AgeCol" headerText="Age" headerWordWrap="true" editable="true" dataField="Age" headerStyleName="headerCustomStyle" >
<mx:itemEditor>
<mx:Component>
<mx:TextInput restrict="0-9" text="{data.Age}"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
I wish to access the textInput in the column to be editable or not based on a certain condition.
I tried making the entire coumn aditable but it does not affect the editable state of the TextInput.
(dgResources.columns[3] as DataGridColumn).editable = false;
How do I go about with that ?
Thanks in advance.
Thanks Alex.
Similar Messages
-
I use flex sdk 3.
I have two datagrids sharing same data provider.
I have the folowing situation.
1. Each DataGrid has a CheckBox as itemEditor ( the DataGrid
are identical in first phase );
When i change the checkbox state in one , the change is
reflected to the second dataGrid, only when the item loose focus,
but i can`t intercept any change event on the data provider. (And i
tried ).
2. Because the Checkbox must be enabled or disabled based on
a third information in the item data, i use a custom simple item
renderer : a vbox handling a checkbox and an overrided data()
getter/setter for VBox.
I have "Bindable" tags and everything is broken for now. I
mean, the changes on data are not visible for the other, until i
call validateNow() for the unchanged DataGrid.
The question is what is wrong with the code and if this is
the only way to do it, for witch event to call validateNow() ?
see the codes"Oceanyahoo" <[email protected]> wrote in
message
news:gccvoq$pk2$[email protected]..
>I use flex sdk 3.
> I have two datagrids sharing same data provider.
> I have the folowing situation.
> 1. Each DataGrid has a CheckBox as itemEditor ( the
DataGrid are identical
> in
> first phase );
> When i change the checkbox state in one , the change is
reflected to the
> second dataGrid, only when the item loose focus, but i
can`t intercept any
> change event on the data provider. (And i tried ).
What did you try? I don't see where you've put in an event
handler for
itemEditEnd.
> 2. Because the Checkbox must be enabled or disabled
based on a third
> information in the item data, i use a custom simple item
renderer : a
> vbox
> handling a checkbox and an overrided data()
getter/setter for VBox.
> I have "Bindable" tags and everything is broken for now.
I mean, the
> changes
> on data are not visible for the other, until i call
validateNow() for the
> unchanged DataGrid.
>
> The question is what is wrong with the code and if this
is the only way to
> do
> it, for witch event to call validateNow() ?
Have you tried calling itemUpdated on the dataprovider
collection? -
hi,
i am building a flex app which is a world map with
destination labels e.g. north america. when the user hovers over
the label for north america, a listbox should appear containing the
names of holiday companies which go there. the holiday companies
are in an xml file which i have successfully accessed using a
datagrid for testing. the xml file will be updated from a database
using php (that part is covered).
what i need to know is what method to use for getting the
data into actionscript so that i can manipulate it and populate
listboxes, according to where the user's mouse is.
the remote xml example in the help files doesn't work and I'm
not used to AS3 (I have used as2 in flash 8). Normally I would
populate some arrays with the XML data and use those arrays to
populate the listboxes. Please can someone let me know how to do
that in Flex Builder 2 with AS3, including whether I need to add
import statement in my mx:script tags?
thanks!
lukemack.Below is some sample code. Post if you do not understand
something.
Tracy
Sample code using HTTPService, e4x, handler function to
populate a list item.
Also shows usage of AsyncToken.
The DataGrid tag:
<mx:DataGrid id="dg" dataProvider="{_xlcMyListData}"
.../>
The HTTPService tag:
<mx:HTTPService id="service" resultFormat="e4x"
result="onResult(event)" fault="..../>
Script block declaration:
import mx.rpc.Events.ResultEvent;
[Bindable]private var _xlcMyListData:XMLListCollection;
Invoke send:
var oRequest:Object = new Object();
oRequest.Arg1 = "value1";
var callToken:AsyncToken = service.send(oRequest);
token.callId = "myQuery1";
Result Handler function:
private function onResult(oEvent:ResultEvent):void {
var xmlResult:XML = XML(event.result); //converts result
Object to XML. can also use "as" operator
var xlMyListData:XMLList = xmlResult.myListData; //depends
on xml format, is row data
_xlcMyListData = new XMLListCollection(xlMyListData); //wrap
the XMLList in a collection
trace(_xlcMyListData.toXMLString()); //so you can see
exactly how to specify dataField or build labelFunction
var callToken:AsyncToken = oEvent.token;
var sCallId = callToken.callId; //"myQuery1"
switch(sCallId) {
case "myQuery1":
doQuery2();
break;
}//onResult -
Datagrid itemRenderer/itemEditor trouble
I have a datagrid in a Flex project, the data grid has an XML file as the source (contents below), now due to the way it is formatted (I cannot change this) some of the data I want to display is inside a tag that isnt at the initial array level. Here is the file:
<?xml version="1.0" encoding="utf-8" ?>
<Categories>
<Category>
<CategoryName>Cat 1</CategoryName>
<CategoryLink>http://www.google.com</CategoryLink>
<CategoryData>
<CategoryDescription>This is the description of category 1</CategoryDescription>
<CategoryHeader>My Category Title 1</CategoryHeader>
<CategoryNumber>1</CategoryNumber>
</CategoryData>
</Category>
</Categories>
I need to display CategoryName, CategoryLink, CategoryData.CategoryDescription, CategoryData.CategoryNumber.
Now I blindly dropped the datagrid into the project and bound it to the data source, I get the following returned for CategoryData:
[object CategoryData_type]
Not much use, but with what appears to be a hack I changed the code for the column to read dataField="CategoryData.CategoryDescription", and hooray it works. I didnt realise at the time that this was wrong, and when I dropped in an itemEditor things went wrong. When the datagrids load they display the correct data, but then when you try to edit any of the child property fields you get the following error:
ReferenceError: Error #1069: Property CategoryData.CategoryDescription not found on valueObjects.Category_type and there is no default value.
I have looked up the error and I realise that it means that there is no value for CategoryData.CategoryDescription, but if I can display it why can i not edit it! What do I have to do to make this work?
Anyway, here is the code, it shows the default bound datagrid, a second datagrid with the hack applied, and a third hacked datagrid with an itemRenderer and itemEditor on the number columns
Can you please take a look and tell me what I did wrong, well more to the point, if there is a doc that explains how to deal with XML like this then please point me at it.
I did try changing the return type for ANY of the columns, but this fails, I also tried a labelFunction, but again I can get the [object CategoryData_type] to display, but I get the null reference exception as the datagrid loads if I try to get to the child props.
Here is the Flex code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:categories="services.categories.*"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
getDataResult.token = categories.getData();
protected function lftest(item:Object, column:GridColumn):String
var t:String = item.CategoryData;
return t;
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<categories:Categories id="categories"
fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
showBusyCursor="true"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:DataGrid id="dataGrid" x="10" y="10" width="684"
creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid2" x="10" y="147" width="684" editable="true" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryDescription" headerText="Desc"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryHeader" headerText="Head"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Num"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid3" x="10" y="284" width="684" editable="true" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
<s:GridColumn headerText="Number">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Number">
<s:itemEditor>
<fx:Component>
<s:GridItemEditor>
<s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
</s:GridItemEditor>
</fx:Component>
</s:itemEditor>
</s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
</s:Application>
All and any advice welcome.
ShaineOne last try, I now know for sure that the data in the file is loading, I created a labelFunction on the CategoryDescription column that looks like this:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = item.CategoryData.CategoryDescription;
return s;
Because it returns s, which I now know is undefined (which is the problem!) I managed to get a debug output. As you can see the value of t is the categorydata, and it appears to have the 3 values I need to get access to, but I have no idea how to do this. I also changed the function to read:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = t.CategoryDescription;
return s;
But this undefines t and s! Very confused
this test2 (@d2e10a1)
item valueObjects.Category_type (@91f8a51)
[inherited]
column spark.components.gridClasses.GridColumn (@d61b239)
t valueObjects.CategoryData_type (@91f8c11)
[inherited]
_cacheInitialized_isValid false
CategoryDescription "This is the description of category 1"
CategoryHeader "My Category Title 1"
CategoryNumber "1"
_changedObjects mx.collections.ArrayCollection (@d5d9e41)
_changeWatcherArray [] (@cfab061)
_dminternal_model _CategoryData_typeEntityMetadata (@d4286a1)
_doValidationCacheOfCategoryDescription null
_doValidationCacheOfCategoryHeader null
_doValidationCacheOfCategoryNumber null
_doValidationLastValOfCategoryDescription null
_doValidationLastValOfCategoryHeader null
_doValidationLastValOfCategoryNumber null
_internal_CategoryDescription "This is the description of category 1"
_internal_CategoryHeader "My Category Title 1"
_internal_CategoryNumber "1"
_invalidConstraints [] (@ca50fd9)
invalidConstraints_der <setter>
_isValid false
isValid_der <setter>
managingService <setter>
_managingService null
_model _CategoryData_typeEntityMetadata (@d4286a1)
_validationFailureMessages [] (@cfab0b1)
s undefined
As always all help welcome.
Shaine
Message was edited after a oops moment by: ProcessEndNow -
Reusing command logic between itemEditor and parent DataGrid
I have a component that allows users to edit one of the
properties of individual items in a DataGrid with an itemEditor
that extends my custom PopMenuButton component. The component also
allows users to edit multiple items using that same component.
Right now, I have duplicate logic - both in the itemEditor
class and the DataGrid's parent component - to handle the user's
selection and update the data object. The logic in the itemEditor
updates the one item that the editor is accessing, and the logic in
the DataGrid's parent component loops through the selectedItems
Array of the DataGrid and updates the items one at a time.
I'd like to eliminate the need for duplicate code here. Is
there easy way to have the itemEditor bubble an event to the parent
an have it access the functions in that component to perform it's
updates?
Thanks.Nevermind... I'm off today. Forgot how easy it is to simply
use the itemEndEvent.... -
DataGrid - Error #1009: Cannot access a property or method of a null object reference.
I am getting a runtime error when I click a button that fires
the addPerson function.
TypeError: Error #1009: Cannot access a property or method of
a null object reference.
at main/addPerson()[C:\Documents and Settings\edunn\My
Documents\Flex Builder 3\workspace2\Test-1\src\main.mxml:178]
at main/___main_Button4_click()[C:\Documents and
Settings\edunn\My Documents\Flex Builder
3\workspace2\Test-1\src\main.mxml:228]
I am new to Action Script - and object programming - so
understand...
I do not understand what I have done wrong here...
I have a result list coming from an external web service that
populates in a datagrid. I'd like to be able to update that
datagrid and then push back to the web service the new array.
Any ideas?????
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import generated.webservices.FxAppiaUserFeaturesService;
import generated.webservices.UserSimRingConfig;
import generated.webservices.SimRingType;
public var plist:ArrayCollection
//Updated Function to populate the data from WS
public function
retrieveUserSimRingConfig(e:ResultEvent):void {
var UsrSimRngCfgNumList:Array = new
UserSimRingConfig().simRingNumberList;
var plist:ArrayCollection = e.result.simRingNumberList;
dgSimPhoneList.dataProvider = plist;
if (e.result.active) {
chboxSimultaneousRingPhones.selected=true;
} else {
chboxSimultaneousRingPhones.selected=false;
if (e.result.simRingType == "NO_RING_WHILE_ONCALL") {
chboxSimultaneousRing.selected=true;
} else {
chboxSimultaneousRing.selected = false;
// Add a person to the ArrayCollection.
public function addPerson():void {
plist.addItem({simRingNumberList:txtPhoneNumber1.text});
I posted this in the General Section first by
mistake...can u explain abt this line
var plist:ArrayCollection = e .
result.simRingNumberList; -
Hi,
I have a datagrid in my application with custom itemRenderer & itemEditor. The rendererIsEditor property is false for the column. I also have a menu bar in my application. Now if I edit any cell the itemRenderer will be replaced with itemEditor and as the focus moves out the itemEditor switches to itemRenderer. It is the default nature of datagrid.
Requirement: I am editting a cell, now if I select any menu item, then the itemEditor of the cell in which I was working should not be destroyed. As I would like to perform an operation in edit mode of that cell.
Thanks in advance.Ok Alex
I'll wait.
Thanks.
I have one more issue regarding datagrid itemEditor.
I have rendererIsEditor property of datagrid column as "false" .
In my itemEditor I have 2 extra components than itemRenderer. So I need to have some extra row height in edit mode. The height of the row which is in edit mode should only grow.
I tried with editorHeightOffset but it overlaps the next row. But I need that height of the current row in which I am should grow instead.
Can we achieve this?
If not please suggest me any alternative or work around.
Thanks. -
Flex datagrid custom itemEditor - not returning data
Hi,
I am new to flex and this is a basic "How to" question.
I want to write custom item editors and renderers for a datagrid column.
I am facing two problems here
1) override public function get data() : Object is not working. however, if the type of the column is just text then override public function get text():String is working. Specifying editorDataField in the datagrid column definition is working for some types ex:Strings, Numbers
2) Nothing is working for slightly more complex types like an Image. even editorDataField is not working. Somewhere between the user editing the data (in the case of an image, edit = browse, select & load an image) and grid asking for data at itemEditEnd, the entire data loaded by the user is disappearing and it is returning null or some default value I'd set it to in override public function set data().
I am aware that datagrid reuses both editors and renderers but I dono how the data user has set is getting lost while the focus is on the same cell
I have tried to use getter setter for this custom data field mentioned in editorDataField but when I do so, nothing works.. it fails even for string type
It should be a simple thing to do and I am sure I am making some silly mistake .. please help me out. It has driven me nuts since today morning..
any pointers would be really appreciated.Hi,
thanks for the info. This is the understanding that I had after reading livedocs about item renderers.
I have given the correct editorDataField and dataField. But it isnt working..I am not sure what you mean by For complex renderers, make sure the property is properly implemented on the outer component.
The weird part is specifying editorDataField works for String and not for an image. I am pasting some of code (highlighting relevant parts) below.. please have a look and tell me what I am missing.
Datagrid :
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498"
dataProvider="{this.slideArray}">
<mx:columns>
<mx:DataGridColumn headerText="Text" width="100"
resizable="true" sortable="false"
itemRenderer = "mx.controls.Label"
itemEditor="editors.TextEditor"
dataField="text" editorDataField="myData"/>
<mx:DataGridColumn headerText="Image" width="600" resizable="true" sortable="false"
itemRenderer="mx.controls.Image"
itemEditor="editors.ImageEditor"
dataField="image" editorDataField="myData"/>
</mx:columns>
</mx:DataGrid>
Text editor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true"
initialize="initEditor()">
<mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
<fx:Script>
<![CDATA[
import domain.Slide; // has two properties : public var text : String and public var image : mx.controls.Image;
override public function set data(value:Object):void{
super.data = value;
this.edit.text = (value as Slide).text;
public var myData : String; // editor data field
import mx.binding.utils.BindingUtils;
private function initEditor():void{
BindingUtils.bindProperty(this,"myData", this.edit, "text");
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
ImageEditor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
focusEnabled="true" contentBackgroundColor="#F1B4B4">
<mx:Image id="img" x="0" y="0" width="200" height="200" />
<s:Button label="Click to Add Image" id="addImageButton" click="addImageButton_clickHandler(event)"
x="0" y="{this.height - addImageButton.height}"/>
<fx:Script>
<![CDATA[
import domain.Slide;
public var myData : Image; //editor data field
override public function set data(value:Object):void{
super.data = value;
if( (value as Slide).image != null) this.img.source = (value as Slide).image.source;
protected function addImageButton_clickHandler(event:MouseEvent):void
// select image from file system
var imgFilter : FileFilter = new FileFilter("Images","*.jpg;*.png;*.gif");
var fileRef : FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, fileSelectHandler);
fileRef.addEventListener(Event.OPEN, fileOpenHandler);
fileRef.addEventListener(Event.CANCEL, fileCancelHandler);
fileRef.browse([imgFilter]);
function fileRefSelectListenerUp(e:Event):void{}
private function fileSelectHandler(event : Event):void{
var fileRef : FileReference = event.target as FileReference;
fileRef.addEventListener(Event.COMPLETE, fileLoadHandler);
fileRef.load();
private function fileLoadHandler(event : Event) : void{
var fileRef : FileReference = event.target as FileReference;
this.myData = new Image;
this.myData.name = fileRef.name;
this.myData.source = fileRef.data;
this.img.source = fileRef.data;
private function fileOpenHandler(event : Event):void{}
private function fileCancelHandler(event : Event):void{}
]]>
</fx:Script>
</s:MXDataGridItemRenderer> -
Datagrid combobox itemEditor event
I have a datagrid populated by managed arraycollection by
dataservice. One of the columns has an item Editor using a
component ComboBox. Sofar all is fine but I have not been able to
define an event that will be triggered when the combobox has
changed and a new value is selected. I have tried itemEditEnd which
will only trigger if one clicks outside the itemEditor which
generates an "other" event. "Change" method of DG will trigger an
event before any selection is made. Any ideas? I need the trigger
to commit the change to database.
ThxHi,
I'm sorry to bug you with a non-technical discussion, but I
am a recruiter in San Diego. My client is in need of 3 Senior Flex
Developers for their project. I have had an extremely rough time
finding someone for this position. Would you be interested in this
position, or do you know of anyone that might be? We do pay
referral fees. This position may be open to telecommuting.
Job Description:
They are in the midst of a major re-architecting of their
Corporate Management system utilizing many cutting edge
technologies. As it relates to the position they are using Flex as
their UI.
This is either a contract, or a full-time position.
Pay: Market Rate
Thanks for your help!
Natalie Fay
Outsource Technical
www.ostechnical.com
[email protected]
858.874.5637 -
Accessing DataGrid currentTarget from a dataGridColumn button
I am trying to access the row item clicked from within a datagrib button. Any thoughts? It seems to only accept event or mouseevent...
public function onDeleteItem(e:Event):void{
trace(e.currentTarget.parent);
<mx:DataGridColumn headerText="Remove" width="60">
<mx:itemRenderer>
<mx:Component>
<mx:Box horizontalAlign="center" verticalAlign="middle">
<mx:Button skin="@Embed('assets/remove_icon.png')"
buttonMode="true" scaleX=".6" scaleY=".6" click="outerDocument.onDeleteItem(event)" />
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>You need to access the dataProvider using the DataGrid selectedItem property.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var ac:ArrayCollection = new ArrayCollection([
{test: "one"}, {test: "two"}, {test: "three"}, {test: "four"}, {test: "five"}
public function clickFunc():void{
txt.text = dg.selectedItem.test;
]]>
</mx:Script>
<mx:DataGrid id="dg" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn dataField="test">
<mx:itemRenderer>
<mx:Component>
<mx:Button label="Click Me" click="outerDocument.clickFunc();"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Text id="txt"/>
</mx:Application>
If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services -
How to access the datagrid in one mxml in another component
I have a datagrid in a.mxml. when click on the add button, it comes to a b.as file (not a class) to do some things and then, b.as call a popupwindow (c.mxml) to add a row into table (call backend). After I added the row to database table successfully, I want to add the row into datagrid to display, but I could not access the datagrid in a.mxml from c.mxml. How can I do this?
Thank you in advance.If this post answers your question or helps, please mark it as such.
To add a row to the DataGrid you really need to just add data to the dataProvider collection object.
You can access components by going through the main app:
mx.core.Application.application.myA.myVar = myC.cVar;
But you should really be using custom events to communicate between components, though it is more complex. Here is my Flex 3 Cookbook post of the topic of custom events:
http://cookbooks.adobe.com/post_Building_a_wizard_using_a_simplified_MVC_architect-11246.h tml
Here are some sample apps on custom events on my web site (right click to View Source):
http://www.chikaradev.com/learning/flex3/customevents/CustomEventSimple/CustomEventSimple. html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents1/index.html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents2/CustomEvents2.html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents3/CustomEvents3.html
Here is my tutorial on custom events:
http://www.chikaradev.com/learning/flex3/customevents/StudentsTutoringCustomEvents1.pdf -
Tab not working properly for Datagrid ItemEditor ComboBox
When you run the app type a1 in the find an App combo box then hit the tab key.
Click in the 3rd row in the As Bs column and a combobox will show.
Type a3 and then hit enter. Notice that A3 is saved as the selected item and saved to the dataprovider
Hit the backspace key and hit enter. Notice that the null is saved and nothing is selected.
Type a3 again and hit enter.
Hit the backspce again but this time hit the tab key. Notice the previous value is back. ooops.
{Code}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:vo="valueObjects.*"
width="100%" height="100%">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
protected function aCBLabel(item:Object):String
if (item != null)
return item.name;
else
return "";
protected function bDG_creationCompleteHandler(event:FlexEvent):void
bDG.selectedIndex = 0;
protected function bAFormat(item:Object, column:DataGridColumn):String
if (item [column.dataField] != null)
return item [column.dataField].name;
else
return "";
]]>
</fx:Script>
<fx:Declarations>
<vo:ADto id="aDto"/>
<vo:BDto id="bDto"/>
<s:ArrayCollection id="aList">
<vo:ADto>
<vo:id>1</vo:id>
<vo:name>a1</vo:name>
<vo:bs>
<vo:BDto>
<vo:id>1</vo:id>
<vo:aDto>
<vo:ADto>
<vo:id>1</vo:id>
<vo:name>a1</vo:name>
</vo:ADto>
</vo:aDto>
</vo:BDto>
<vo:BDto>
<vo:id>2</vo:id>
<vo:aDto>
<vo:ADto>
<vo:id>2</vo:id>
<vo:name>a2</vo:name>
</vo:ADto>
</vo:aDto>
</vo:BDto>
<vo:BDto>
<vo:id>0</vo:id>
</vo:BDto>
</vo:bs>
</vo:ADto>
<vo:ADto>
<vo:id>2</vo:id>
<vo:name>a2</vo:name>
<vo:bs>
<vo:BDto>
<vo:id>3</vo:id>
<vo:aDto>
<vo:ADto>
<vo:id>3</vo:id>
<vo:name>a3</vo:name>
</vo:ADto>
</vo:aDto>
</vo:BDto>
<vo:BDto>
<vo:id>0</vo:id>
</vo:BDto>
</vo:bs>
</vo:ADto>
</s:ArrayCollection>
<s:ArrayCollection id="bAList">
<vo:ADto>
<vo:id>1</vo:id>
<vo:name>a1</vo:name>
</vo:ADto>
<vo:ADto>
<vo:id>2</vo:id>
<vo:name>a2</vo:name>
</vo:ADto>
<vo:ADto>
<vo:id>3</vo:id>
<vo:name>a3</vo:name>
</vo:ADto>
</s:ArrayCollection>
</fx:Declarations>
<fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>
<s:Form id="AForm" width="700" height="170">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:HGroup x="0" y="50" width="670" height="60">
<s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>
<s:ComboBox id='aCB'
prompt="Enter or Select an A Name"
labelFunction="aCBLabel"
x="110" y="10" width="375">
<mx:ArrayCollection id="asList" list="{aList}"/>
</s:ComboBox>
</s:HGroup>
</s:Form>
<mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"
editable="true"
dataProvider="{aDto.bs}"
creationComplete="bDG_creationCompleteHandler(event)">
<mx:columns>
<mx:DataGridColumn id="bidDC"
headerText="id"
editable="true"
dataField="id"
editorDataField="value"
width="50"/>
<mx:DataGridColumn id="bNameDC"
headerText="As Bs"
editable="true"
dataField="aDto"
labelFunction="bAFormat"
editorDataField="value"
width="150">
<mx:itemEditor>
<fx:Component>
<s:MXDataGridItemRenderer implements="mx.managers.IFocusManagerComponent">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.FlexEvent;
import spark.events.DropDownEvent;
import spark.events.IndexChangeEvent;
[Bindable]
public var bAs:ArrayCollection;
protected function cb_InitializeHandler(event:FlexEvent):void
bAs = outerDocument.bAList;
aDto = outerDocument.bDG.selectedItem.aDto;
if (aDto != null)
var t:ADto;
for (var i:int = 0; i<bAs.length; i++)
t = bAs[i];
if (aDto.id == t.id)
cb.selectedIndex = i;
break;
override public function setFocus():void
cb.setFocus();
public function get value():ADto
if (cb.isDropDownOpen)
cb.closeDropDown(true);
cb.validateNow();
aDto = cb.selectedItem as ADto;
return aDto
protected function cb_closeHandler(event:DropDownEvent):void
aDto = cb.selectedItem as ADto;
]]>
</fx:Script>
<fx:Declarations>
<vo:ADto id="aDto"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:ComboBox id="cb"
width = "100%"
prompt="{aDto.name}"
dataProvider="{bAs}"
labelField="name"
initialize="cb_InitializeHandler(event)"
close="cb_closeHandler(event)">
</s:ComboBox>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</s:Application>
{Code}
{Code}
package valueObjects
import com.adobe.fiber.services.IFiberManagingService;
import com.adobe.fiber.valueobjects.IValueObject;
import mx.collections.ArrayCollection;
import valueObjects.BDto;
import com.adobe.fiber.core.model_internal;
use namespace model_internal;
public class ADto implements com.adobe.fiber.valueobjects.IValueObject
private var _internal_id : int;
private var _internal_name : String;
private var _internal_bs : ArrayCollection;
model_internal var _internal_bs_leaf:valueObjects.BDto;
public function ADto()
public function get id() : int
return _internal_id;
public function get name() : String
return _internal_name;
public function get bs() : ArrayCollection
return _internal_bs;
public function set id(value:int) : void
var oldValue:int = _internal_id;
if (oldValue !== value)
_internal_id = value;
public function set name(value:String) : void
var oldValue:String = _internal_name;
if (oldValue !== value)
_internal_name = value;
public function set bs(value:*) : void
var oldValue:ArrayCollection = _internal_bs;
if (oldValue !== value)
if (value is ArrayCollection)
_internal_bs = value;
else if (value is Array)
_internal_bs = new ArrayCollection(value);
else if (value == null)
_internal_bs = null;
else
throw new Error("value of bs must be a collection");
private var _managingService:com.adobe.fiber.services.IFiberManagingService;
public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
_managingService = managingService;
{Code}
{Code}
package valueObjects
import com.adobe.fiber.core.model_internal;
import com.adobe.fiber.services.IFiberManagingService;
import com.adobe.fiber.valueobjects.IValueObject;
import valueObjects.ADto;
import mx.collections.ArrayCollection;
use namespace model_internal;
public class BDto implements com.adobe.fiber.valueobjects.IValueObject
private var _internal_id : int;
private var _internal_aDto : ADto;
private static var emptyArray:Array = new Array();
public function BDto()
_internal_id = 0;
public function get id() : int
return _internal_id;
public function get aDto() : ADto
return _internal_aDto;
public function set id(value:int) : void
var oldValue:int = _internal_id;
if (oldValue !== value)
_internal_id = value;
public function set aDto(value:ADto) : void
var oldValue:ADto = _internal_aDto;
if (oldValue !== value)
_internal_aDto = value;
private var _managingService:com.adobe.fiber.services.IFiberManagingService;
public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
_managingService = managingService;
{Code}the reason the tab was not working is because it was not changing the selection and just exiting the combo box. So, in the value function add if (cb.textInput.text == "") cb.selectedIndex = -1; This will change the selection as desired and fixes the problem.
-
How do I access listData for a DataGrid itemRenderer?
I want to make simple reusable components in .mxml to use in
my dataGrid classes. I do NOT want to specify the data field
because I might use the same renderer in multiple columns of the
same Grid (for example a check box renderer) and I do not want to
make several identical components whose only difference is the
value they draw from "data". To do this, I need access to
"listData". Specifically listData.dataField. According to the docs
I need to implement mx.controls.listClasses.IDropInListRenderer. I
have tried the following in my mxml code:
<mx:Component id="reusableEditor">
<mx:HBox
implements="mx.controls.dataGridClasses.DataGridItemRenderer">
import mx.controls.dataGridClasses
.. contents and logic for displaying
data[listData.dataField]..
</mx:HBox>
</mx:Component>
I get an unhelpful error in Flex Builder saying that "An
internal build error has occurred" and only now guess that it comes
from the line
"implements="mx.controls.dataGridClasses.DataGridItemRenderer""
(when I remove that line, things work fine). I have not found
anywhere to check if I am implementing this correctly because there
is no example to work from that does what I want to do--even though
I use DataGrid 100s of times more often than any other list class!
The TreeRenderer example later in the docs is the only code
addressing this issue but it involves an AS Class that does not
extend (as far as I can tell) a Container like HBox and implements
no interface.
To put the question simply, how can I get access to
listData???the <mx:DataGridItemRenderer> tag was not the solution
either...
I finally figured out what the ambiguous compiler error
meant... I hadn't implemented the functions required for the
interface. Below is working code that either declared as an
internal component or an external .mxml file will display the value
of its column without explicitely defining what that value is.
Although this component is extremely simple, it was very
difficult to figure out how to implement from the docs... I hope
someone from Adobe takes note.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var dp:Array = [{num:2, bool:true}, {num:3,
bool:false}];
]]>
</mx:Script>
<!-- BrainlesslySimpleCheckBoxRenderer class -->
<mx:Component id="cbren3">
<mx:HBox horizontalAlign="center" verticalAlign="middle"
implements="mx.managers.IFocusManagerComponent,
mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
private var _listData:DataGridListData;
[Bindable("dataChange")]
public function get listData():BaseListData {
return _listData;
public function set listData(value:BaseListData):void {
_listData = DataGridListData(value);
override public function drawFocus(focused:Boolean):void {
check.setFocus();
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (super.data) {
var dgListData:DataGridListData =
DataGridListData(listData);
//for some reason, setting check.selected here results in
buggy behavior
//check.selected = data[dgListData.dataField];
//defining a getter based on the "dataChange" event seems to
update the CheckBox value properly when
//clicked, rolledOut, sorted, etc...
//also, doing it this way circumvents those annoying "Data
binding will not be able to detect changes... blah blah"
[Bindable("dataChange")]
public function get val():Boolean {
return Boolean(data[_listData.dataField]);
]]>
</mx:Script>
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{val}"
change="blorch=check.selected"
updateComplete="blorch=check.selected" />
</mx:HBox>
</mx:Component>
<mx:DataGrid id="test" editable="true"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="num" headerText="num" />
<mx:DataGridColumn dataField="bool" headerText="Sent"
itemRenderer="{cbren3}" rendererIsEditor="true"
editorDataField="blorch">
</mx:DataGridColumn>
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
if anyone has suggestions or feedback, please let me know...
I am still trying to figure out the best way to do this. -
Accessing nested child in model to populate datafield in datagrid.
I am using Rails + Flex and I have problems to access nested
xml in a datagrid.datafield.
I reproduce this in a simple mxml sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" width="954">
<mx:Model id="md">
<root>
<e1>el1</e1>
<e2>el2</e2>
<child>
<c1>c1</c1>
<c2>c2</c2>
</child>
<e3>el3</e3>
</root>
</mx:Model>
<mx:DataGrid id="myGrid"
dataProvider="{md}" >
<mx:columns>
<mx:DataGridColumn dataField="e1"/>
<mx:DataGridColumn dataField="e2"/>
<mx:DataGridColumn dataField="child"/>
<mx:DataGridColumn dataField="child.c1"/>
<mx:DataGridColumn dataField="e3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Basically, at runtime the content of 3rd column is object
(alright) and the 4th column is empty whereas it should be "c1".
Am I doing something obviously wrong ?
Thanks for any help.
Romain.http://www.adobe.com/devnet/flex/articles/e4x_03.html
http://www.adobe.com/devnet/flex/articles/e4x_04.html
you can use the labelfunction -
Spark datagrid - access Editors data
Is it possible to access item Editor's data from the outside of the datagrid?
ThanksDataGrid has an "itemEditorInstance" property for the current active editor. If it's a GridItemEditor, it has a data property. So you can access it like this:
var editor:GridItemEditor = dataGrid.itemEditorInstance as GridItemEditor
if (editor)
data = editor.data;
Maybe you are looking for
-
I have 2 sets of playlists in the sidebar of itunes. I have recently upgraded to 10.6.1.7 but this condition remains the same The top list refers to greyed out listings and does not function The list below works fine How do I get rid of the "false" l
-
Can I have a conditional javascript:apex.confirm when column is null
Hi All, I am relatively new to the product but am picking up things all the time. I was recently asked to create a confirmation on submit dialog which I did quite easily using javascript:apex.confirm. I was then asked to only display the confirmation
-
HT1386 Sync problem from Macbook Pro to iPad 4
I managed to download the music I purchased from iTunes to my Macbook Pro. I also managed to sync the music with my iPhone 5 so that I have all purchased music on the iPhone. However, I fail to sync the same music from the Macbook to my iPad 4. Any c
-
EP 7.3 Browser compatability issue
Hi All, We have implemented EP 7.3 SP 04. We could not access the portal in chrome or IE 11. It is giving an error that "Could not open iView. The iView is not compatible with your browser, operating system, or device. Contact your system administrat
-
Hello all, Is there a way to audit BPM processes in SAP CE? Lets say I have an approval process for vendors built in BPM. There are plenty of reasons why I may need to go back and show when and who approved a particular vendor. I think there are s