DataGrid/ComboBox/ItemEditor
Hi all,
I've got a DataGrid, "dg", whose dataprovider is set to an
array of "thing" objects.
Each row then has several columns using a custom renderer, a
canvas containing a combobox. The combobox's dataprovider is set to
thing's array of "subthing" objects. The editorDataField for each
row is set to "selectedItem".
When a combobox is changed, I need to set Thing.subthing =
combobox.selectedItem. Unfortunately I can't make this happen.
If I don't include a "selectedItem" variable within the MXML
component definition, I get the following RTE on focus out of the
combobox:
ReferenceError: Error #1069: Property selectedItem not found
on renderers.worksheet.SubThingComboBox and there is no default
value.
Once I add selectedItem, then I get this RTE:
ReferenceError: Error #1069: Property null not found on Thing
and there is no default value.
Basically, how do I map the selectedItem of the combobox to
Thing.subThing?
The override set data() method returns a reference to the
current "thing". On combo box change, you can use this reference to
set the property in the thing item.
If you do not know what the "overide set data()" method is,
you need to study some more on itemRenderers. There are several
examples on cflex.net and many elsewhere on the net.
Tracy
Similar Messages
-
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 -
(URGENT) Skining problem of components (datagrid & combobox)
Hi,
I m using FLASH CS3, I used Datagrid and Combobox component from components panel, and simply add some data inside in that.
setupComboBox();
function setupComboBox():void
cb.setSize(200, 22);
cb.prompt = "Select a Credit Card";
cb.addItem( { label: "MasterCard", data:1 } );
cb.addItem( { label: "Visa", data:2 } );
cb.addItem( { label: "American Express", data:3 } );
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent
var dp:DataProvider = new DataProvider();
dp.addItem({col1:"item 1.A", col2:"item 1.B", col3:"item 1.C"});
dp.addItem({col1:"item 2.A", col2:"item 2.B", col3:"item 2.C"});
dp.addItem({col1:"item 3.A", col2:"item 3.B", col3:"item 3.C"});
dp.addItem({col1:"item 4.A", col2:"item 4.B", col3:"item 4.C"});
myDataGrid.addColumn("col1");
myDataGrid.addColumn("col2");
myDataGrid.addColumn("col3");
myDataGrid.dataProvider = dp;
myDataGrid.setSize(300, 200);
myDataGrid.move(10, 10);
It seems working fine.
My problem is , I want two different type of skining of two different component(DataGrid & Combobox). in the same fla.
.. e.g if datagrid have gray color skin type and combobox have black color skin type.
Can any one have any Idea?Thanks for reply..
@kennethkawamoto2
I already implemented that thing , that u suggest, The Main problem of this component is CellRenderer, what's the solution of it ?
If i apply this
cb.setStyle("upSkin", ComboBox_upSkin2);
cb.setStyle("overSkin", ComboBox_overSkin2);
cb.setStyle("downSkin", ComboBox_downSkin2);
Its change the header of Comobo box pattern, but the rest part e.g cell is remaining the same.
I tried like this also
cb.setStyle("upSkin",CellRenderer_upSkin2)
cb.setStyle("downSkin",CellRenderer_downSkin2)
cb.setStyle("overSkin",CellRenderer_overSkin2)
cb.setStyle("disabledSkin",CellRenderer_disabledSkin2)
cb.setStyle("selectedDisabledSkin",CellRenderer_selectedDisabledSkin2)
cb.setStyle("selectedUpSkin",CellRenderer_selectedUpSkin2)
cb.setStyle("selectedDownSkin",CellRenderer_selectedDownSkin2)
cb.setStyle("selectedOverSkin",CellRenderer_selectedOverSkin2)
but it gives error........
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/drawBackground()
at fl.controls::LabelButton/draw()
at fl.core::UIComponent/drawNow()
at fl.controls::List/drawList()
at fl.controls::List/draw()
at fl.core::UIComponent/drawNow()
at fl.controls::List/scrollToIndex()
at fl.controls::SelectableList/scrollToSelected()
at fl.controls::ComboBox/open()
at fl.controls::ComboBox/onToggleListVisibility()
When u click on combobox to open it up. The Component Assets of datagrid and combobox are the same so I am not able to apply different skin pattern of this two different component ..
Still is there any way pls let me .. -
Dynamic dataprovider in Datagrid combobox.
Hi,
i am using Flex 3. I have a data grid with first two rows having item renderers as ComboBoxes. What i want to implement is that, depending on my selection in the first combobox, the respective second combobox should get a dataprovider of my choice.
For e.g.
If I select the 1st combobox as India, then the adjacent combobox should have the cities in India.
If I select the 1st combobox as France, then the adjacent combobox should have the cities in France.
I dont have the values in any local variables. The values must be fetched at runtime because the list of Countries(in first combobox) is very exaustive so fetching the list of all cities for all countries would not be right. So for each selection of country i have to make an http service call to fetch the corresponding city list.
My question is how do i dynamically give the cities as dataprovider to each of the combo boxes in each row.
Hope my description is comprehensible enough.
Thanks
Sid.HI,
Can you check the below code. If that is what you need.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="application1_initializeHandler(event)">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
// Defines your collections
[Bindable]
public var countriesData:ArrayCollection=new ArrayCollection([{label: 'India'}, {label: 'Brazil'}]);
[Bindable]
public var citiesData:ArrayCollection;
[Bindable]
public var collection:ArrayCollection=new ArrayCollection();
protected function application1_initializeHandler(event:FlexEvent):void
dataGrid.addEventListener("countryChanged", country_changed_handler);
collection.addItem({cityData:citiesData});
// Change this method to the remote callings.
// In the resultEvent you will change the citiesData collection.
protected function country_changed_handler(event:DataEvent):void
if (event.data == 'India')
dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'Mumbai'}, {label: 'Delhi'}]);
else
dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'São Paulo'}, {label: 'Rio de Janeiro'}]);
dataGrid.invalidateList();
public function addRow(event:MouseEvent):void{
//collection.addItem(new Object());
collection.addItem({cityData:citiesData});
public function dropRow(event:MouseEvent):void{
]]>
</mx:Script>
<mx:DataGrid id="dataGrid"
dataProvider="{collection}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:ComboBox dataProvider="{this.parentDocument.countriesData}"
labelField="label"
change="combobox1_changeHandler(event)"
selectedIndex="-1">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
protected function combobox1_changeHandler(event:ListEvent):void
dispatchEvent(new DataEvent("countryChanged", true, true, this.selectedLabel));
]]>
</mx:Script>
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:ComboBox labelField="label">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
var prevSelectedItem:Object = this.selectedItem;
this.dataProvider = data.cityData ;
this.selectedItem = prevSelectedItem;
]]>
</mx:Script>
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="299" horizontalAlign="center" horizontalGap="51">
<mx:Button label="Add" click="addRow(event)"/>
<mx:Button label="Drop" click="dropRow(event)"/>
</mx:HBox>
</mx:Application> -
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 -
DataGrid ComboBox itemRenderer/editor not updating dataProvider properly
I have a DataGrid with one column using a ComboBox as the itemRenderer. The column is editable but if you trace the dataProvider, the changes lag behind by one. So uncheck two row's ComboBox and the dataProvider only shows one row's data updated.
Any ideas?Yep, its a CheckBox, too early in the morning.
Another component (DataGrid) will be filtered depending on what rows in the ADG have their CheckBox checked, so leaving the row may be too late.
Here is the code I have so far. In the itemEditEnd event handler I'm trying to set the field in the dataProvider manually, but it causes an infinite loop. preventDefault and stopImmediatePropagation don't help.
----- CheckBoxRenderer.mxml -----
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
[Bindable] public var newSelected:Boolean;
]]>
</mx:Script>
<mx:CheckBox id="selectedChbx" selected="{data.FLAG}"/>
</mx:VBox>
----- mainapp.mxml -----
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.AdvancedDataGridEvent;
import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
[Bindable] private var transactions:ArrayCollection = new ArrayCollection([
{orderID: "33725", theirOrderNumber: "10170", name: "Bob Smith", SKUs: "21", PICKS: "50", FLAG: "true"},
{orderID: "33729", theirOrderNumber: "10172", name: "Mary Wilson", SKUs: "3", PICKS: "6", FLAG: "true"},
{orderID: "33730", theirOrderNumber: "10176", name: "Fred Carson", SKUs: "1", PICKS: "2", FLAG: "true"},
{orderID: "33731", theirOrderNumber: "10177", name: "Morten Hills", SKUs: "5", PICKS: "16", FLAG: "true"},
{orderID: "33732", theirOrderNumber: "10178", name: "Bill Trundy", SKUs: "5", PICKS: "34", FLAG: "true"},
{orderID: "33734", theirOrderNumber: "10179", name: "Ocean Boat Supply", SKUs: "8", PICKS: "19", FLAG: "true"},
{orderID: "33736", theirOrderNumber: "10180", name: "Janet Aberdine", SKUs: "5", PICKS: "18", FLAG: "true"},
{orderID: "33737", theirOrderNumber: "10181", name: "Kim Restine", SKUs: "2", PICKS: "6", FLAG: "true"},
{orderID: "33738", theirOrderNumber: "10182", name: "Thomas Overby", SKUs: "5", PICKS: "12", FLAG: "true"}
public function handleGridChanged(evt:AdvancedDataGridEvent):void{
var newData:Boolean = CheckBoxRenderer(evt.currentTarget.itemEditorInstance).newSelected;
trace(evt.rowIndex);
var obj:Object = transactions.getItemAt(evt.rowIndex);
trace("BEFORE: " + obj.FLAG);
obj.FLAG = newData;
trace("AFTER: " + obj.FLAG);
transactions.setItemAt(obj, evt.rowIndex);
return;
evt.preventDefault();
evt.stopImmediatePropagation();
// for each(var item:Object in transactions){
//trace(item.FLAG);
]]>
</mx:Script>
<mx:Label fontSize="12" text="Bulk Print / Pull - Step 1"/>
<mx:HBox>
<mx:AdvancedDataGrid id="dgTransactions" dataProvider="{transactions}"
fontSize="12" editable="true" sortableColumns="true" height="500"
width="100%" itemEditEnd="handleGridChanged(event);">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="orderID" headerText="WMSOID" width="100"
editable="false" textAlign="center"/>
<mx:AdvancedDataGridColumn dataField="theirOrderNumber" headerText="Order #"
textAlign="center" width="130" editable="false"/>
<mx:AdvancedDataGridColumn dataField="name" headerText="Customer"
width="125" textAlign="left" editable="false"/>
<mx:AdvancedDataGridColumn dataField="SKUs" headerText="SKU's"
width="75" textAlign="right" editable="false"/>
<mx:AdvancedDataGridColumn dataField="PICKS" headerText="Picks"
width="75" textAlign="right" editable="false"/>
<mx:AdvancedDataGridColumn dataField="FLAG" headerText="I" width="20" textAlign="center"
editable="true" rendererIsEditor="true" editorDataField="newSelected"
itemRenderer="CheckBoxRenderer"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:DataGrid>
</mx:DataGrid>
</mx:HBox>
</mx:Application> -
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 as itemrenderer problem.
Hi All,
I have different problem. i have a datagrid with10-20 rows. Different item renderers in all columns(6 - 10 columns). In that a single column has combobox as item rederer.
I have to serve different dataprovider for each row's combobox. I assigned dataprovider by overriding data property. is this right?.
while my datagrid has scrollbar frequently my rows are refreshing. This makes bad my app.
Please help me.Yes, what you are doing is right, if you think that once the data provider is set on the combobox, and it does not change(except the selected value) then do not assign the data provider from override.
I would create a dirty flag in the combo itemrend and set this to true once the dataprovider is set on the combo, and will not set the dp again when the override data is called by looking at this dirty flag. -
DataGrid Combobox dataprovider erasing items
I have a DataGrid that is linked to an array of custom data objects which I call a seriesList. You are supposed to be able to choose the name of each series via a combobox in the datagrid. It works fine except when the user selects the combobox and then clicks somewhere else in the interface, which closes the combobox and erases whichever item is previously selected!
<!-- Definition in application -->
<!-- axis.seriesList is and ArrayCollection of actionscript objects called SeriesObjects which have a var name:String variable -->
<mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name" width="280" headerStyleName="centered" id="nameColumn"
rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.SeriesBoxRenderer"/>
</mx:columns>
</mx:DataGrid>
<!-- SeriesBoxRenderer -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" horizontalAlign="center">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Define a property for returning the new value to the cell.
public var result:String="";
[Bindable]
private var dpValue:ArrayCollection;
private function init():void {
// list of possible names to choose from for this series
dpValue = mx.core.Application.application.seriesArray;
// Override the set method for the data property.
override public function set data(value:Object):void {
if (dpValue == null) init();
super.data = value;
if (value != null) {
var currentValue:String = value.name;
var len:int = dpValue.length;
for (var i:int = 0; i < len; i++) {
if (dpValue[i].name == currentValue) {
editor.selectedIndex = i;
return;
editor.selectedIndex = 0; }
public function onChange():void {
var index:int = editor.selectedIndex;
result = dpValue[index].name;
data.name = dpValue[index].name;
]]>
</mx:Script>
<mx:ComboBox id="editor" textAlign="left" labelField="name" dataProvider="{dpValue}" change="onChange()"/>
</mx:VBox>I'm thinking the problem may be the dataprovider for the combobox. This array is also shared with another List component in another tab on the interface. The reason I am thinking this is because I have another item renderer which uses a combobox and does not erase itself when you click nothing. Here is the code for that item, and the only difference I can see between this code and the code that doesn't work is the fact that the dataprovider is shared with another part of the code. Still not sure how to fix this, however.
[Bindable]
private var dpValue:ArrayCollection;
private function init():void {
dpValue = mx.core.Application.application.aquisitionOptions.lastResult.system.data;
for ( var i:int=0; i<dpValue.length; i++ ) { //loop over the items in the dataProvider
if (dpValue[i].id == data.aquisitionID) { //compare desired value to current item.data value
editor.selectedIndex = i; //set the seletedIndex of the combo box
data.aquisitionDescr = dpValue[i].name;
break;
// Override the set method for the data property.
override public function set data(value:Object):void {
super.data = value;
if (dpValue == null) init();
if (value != null) {
var currentValue:String = value.aquisitionDescr;
trace ("\n current: ", currentValue);
var len:int = dpValue.length;
for (var i:int = 0; i < len; i++) {
if (dpValue[i].name == currentValue) {
editor.selectedIndex = i;
return;
editor.selectedIndex = 0;
public function onChange():void {
var index:int = editor.selectedIndex;
result = dpValue[index].name;
data.aquisitionDescr = dpValue[index].name;
data.aquisitionID = editor.selectedItem.id as String;
]]>
</mx:Script>
<mx:ComboBox id="editor" labelField="name" dataProvider="{dpValue}" change="onChange()"/>
<!-- definition in the datagrid -->
<mx:DataGridColumn dataField="aquisitionDescr" headerText="Data Aquisition" width="160" headerStyleName="centered" id="acquisitionColumn"
rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.AquisitionBoxRenderer"/> -
Datagrid ComboBox data repetition
I have made a datagrid and a column which has a ComboBox
control which references a fixe length and data array to display
the dropdown in the grid column. The problemis this array has to be
repeated for every row of data in the grid.
Is there anyway to make the drop down array just on list and
referenced on the dropdown Combox column no matter how many records
there?Hello Greg,
I think I may have answered with your help my own question:
I recoded the array as follows (and added a TextInput column
in the example):
This way I don't have to repeat the fixed 'aa' array in the
{lst} with literals.
Also I didnt understand that the DataGrid can had a different
dp from the components. Is that right? -
Mx:datagrid detect itemeditor change
I've got a datagrid with a checkbox renderer/editor like
this. I've tried several alternatives but I cannot get
click="myFunction()" to see myFunction even though it is
defined in the same file. I want to detect each change and send
that change to the server so I don't have to worry about the user
forgetting to save changes.
I've allso tried listening to the ArrayCollection, but my
listener only gets called on initial startup.
<mx:ArrayCollection id="AttendanceArray"
collectionChange="attendanceEventHandler(event)"/>
This can't be that hard, but I sure can figure it out.
Anyone?Based on your description this code may get you
started: -
Dynamic comboBox in a dataGrid?
i have a dataGrid that starts out blank. When a button is
clicked, it populates based on the contents of a few components.
The 3rd column needs a comboBox. I need the following
behaviors:
1-when the button is clicked, this populates with the text
values in a certain text field.
2-under certain circumstances, i need to be able to add and
subtract from this comboBox.
i have read this:
http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-examp le/
but it looks like the comboBox in that example has fixed
values. How can i dynamically alter the values in
these comboBoxes? i have the comboBoxes in the dataGrid
component, but i can't figure out how to access their
dataProviders!
thanks!You can have your comboBox itemRenderer populate based on an
ArrayCollection in your dataDrid dataProvider. Then, by changing
the dataProvider's ArrayCollection field, you could change each of
the comboBoxes accordingly. If you need different comboBox values
for different comboBoxes, then you will need something a bit
different. It would help to see your code.
Vygo -
Selecting item in combo box itemEditor, after passing it's dataprovider from a popup window
Hi..
I have a datagrid which has a combo box itemeditor in the first column. When I click on the combobox, there is an item called 'Search'. When this is selected, a pop up window appears where we can search for some contact names. The search results are populated in List component, within the pop up and on double click of any of the names from the list, all of the list content is passed on as dataprovider to the combobox itemeditor of the grid. It works fine till here. Now, how can I highlight the selected name(name on which I double click, in the list of the pop up window), as the 'selectedItem' of the combobox itemeditor? ie., as soon as I double click the name, that name should appear on that combo box. As of now, wehn I double click, the search result names are passed on as dataprovider to the combobox, but a blank entry will be selected in th combobox, instead of the selected name from teh list of the pop up window. Can you please help me out on how to achieve this? I had been cracking my head for 2days now, hasn't worked out yet for meHi...
there are two events which have been used, one is doubleclick event and the other one is on selecting the item from the list and clicking on OK button(this will be the most frequently used function, i cannot use event target event for this OK button... ) . I have attached the screen shot. Please have a look at it and let me know how can i achieve that...
I can use custom event, but the main problem is that the inline itemeditor's details are not accessible in the code.... I can access some function from within the inline itemeditor combo box using outerDocument.myFunction() (this is something like GET). Is there a similar way, to SET the data into this itemeditor? -
Item Renderer for Advance DataGrid
On AdvancedDataGrid, can we display one of the column as Text and when the user clicks on the text it should turns into a combo box.
When the user clicks on any where else it should turn into text back.
Please help me to implement this.Off the top of my head it's probably something like:
<mx:DataGrid id="dg1" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="Example">
<mx:itemEditor>
<mx:Component>
<mx:ComboBox>
<mx:String>1</mx:String>
<mx:String>2</mx:String>
<mx:String>3</mx:String>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
edit:
Just checked, Subeesh's example: http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-examp le/ has got a very good example on it. Pretty much exactly what you asked -
Applicatoopn root / dynamic dataProvider for itemEditor
How to reach the main application instance from a custom
datagrid itemEditor component? I need to use data in the
application for dataProvider of that ComboBox itemEditor.I think you should always be able to do
Application.application.
Maybe you are looking for
-
Acceptance at origin checkbox in PO
Hi All My point of concern is there comes a tab in PO at Item Detail level in Delivery tab "Acceptance at Origin".. I want to make it compulsory but the point is i am not able to find it in spro. The path i am refering is spro>>MM>>Purchasing>>purcha
-
Can't link to a cell in another sheet at certain point
Hello, this is the first time I use the support communities. I have a continuing promblem with numbers ( v. 2.3). I'm working on a projekt for my univerity and are quite familiar with number. But at a certain point it get's impossible to link to anot
-
Having an issue with Searching Contacts -IOS8 iPhone 5S - MS Exchange
When I search for a certain Contact by name EX: John Smith, I would get Jon Smith about 10 names down and others appear before him at the top of the list. When I click on the other contacts you can see his name in the contact notes which I guess is w
-
So I found out that data cells on a Planning form can be linked to URLs, and launched form the cell in Smart View. My question is, what is the use of this functionality? What uses does this typically server for the business users?
-
Today's Date Minus Record Date
I have a date created field and I want to know how many days it's been since that date until now. How can I do that? Would I calcuate that in the SQL string?