DateField As ItemRenderer
Im having a problem when i try ot use a datefield as a itemRenderer in a dataGrid. When i click in the datagrid it lets me select and date and works as expect but when i click outside the dataGrid and then click back inside dataGrid it gives me a error saying "cannot convert 11/02/09 to Date." any ideas how i could fix this?
heres some code:
<mx:DataGrid width="173" height="51" textAlign="center" borderColor="#000000" dataProvider="{iddArray}" sortableColumns="false" editable="true" verticalScrollPolicy="off" rowHeight="24" x="0" y="10" color="#000000">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="idd" editorUsesEnterKey="true">
<mx:itemEditor>
<mx:Component>
<mx:DateField editable="true">
<mx:dataProvider>
<mx:Date id="iddBox">
</mx:Date>
</mx:dataProvider>
</mx:DateField>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
public var iddArray:ArrayCollection = new ArrayCollection([{idd: null}]);
Similar Messages
-
Datefield as Item renderer problem
I am having problems with the datefield while using it in a
renderer. If you click the text area of the datefield to bring up
the datechooser everything works, if you click the datefield icon
the date is not bound properly.
Try out the code below and you will see what I am talking
about. Any idea what im doing wrong?
dateRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="{newDate = data.Date}">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.binding.utils.ChangeWatcher;
import mx.formatters.DateFormatter;
// Define a property for returning the new value to the
cell.
[Bindable]
public var newDate:Date;
private var df:DateFormatter = new DateFormatter();
private function test(event:Event):void {
trace(df.format(dateFieldTI.selectedDate));
newDate= new Date(dateFieldTI.text);
this.dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END, true, false, 0,
"newDate", -1, null, this));
]]>
</mx:Script>
<mx:DateField id="dateFieldTI"
showToday="false"
selectedDate="{newDate}"
text="{df.format(newDate)}"
click=""
change="test(event)"/>
</mx:VBox>
/////////////////////////////////////////// dateRenderer.mxml
File///////////////////////////////////////////////////////
/////////////////////////////////////////////// Begin
application ///////////////////////////////////////////////////
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
height="700" width="700">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Date: new Date("3/14/2007")},
{Date: new Date("3/14/2007")}]);
[Bindable]
public var displayedDate:String;
private function getDate():void {
displayedDate = initDG[0].Date;
]]>
</mx:Script>
<mx:DataGrid id="myDG"
width="500" height="250"
dataProvider="{initDG}"
variableRowHeight="true"
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Date"
width="200"
editable="true"
rendererIsEditor="true"
itemRenderer="dateRenderer"
editorDataField="newDate"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="getIt" click="getDate()"/>
<mx:Text text="{displayedDate}"/>
</mx:Application>Hi Proeliata ,
I am using mx.controls.DateField as itemRenderer in the
DataGridColumn as Below.
<mxataGrid
id="dgDetailsContainer" dataProvider="{alphaGroups}"
variableRowHeight="true"
sortableColumns="true" editable="true" width="100%"
itemEditEnd="editGrid(event)">
<mx:columns>
<mxataGridColumn
headerText="ETA Date" itemRenderer="mx.controls.DateField"
editorDataField="selectedDate"
rendererIsEditor="true"
editable="true" dataField="EtaDate" />
</mx:columns>
</mxataGrid>
While I was submitting the dataGrid values If I try to alert
the EtaDate using the below call
I am getting null value always.
private function submitChanges():void
try{
Alert.show("EtaDate0 is"+alphaGroups[0].EtaDate);
Alert.show("EtaDate1 is"+alphaGroups[1].EtaDate);
commonWebService.submitChanges(alphaGroups);
}catch(err:Error){
Alert.show("Please choose Title and Alpha");
Please help me to re-solve,If any one handled this scenario
please provide me the sample code to update dataProvider.
Back to top
Thanks,
Ravindra -
Need help getting data out of a itemrenderer component
I have a datagrid populated via a dataprovider (arrayCollection). No issue there
I have a dateField Custom itemRenderer (as a component) and this is populated fine, so no issue there either.
However I can't seem to find any way of getting the data out (it can be edited, so it is no longer the original data). I can get the original data, but not the new data.
I can't use an event as there are hundreds of rows that I need to manipulate to write back to the database. I just want to get all the values as displayed in the datagrid.
I just want to loop through the datagrid and pull out the data as entered in the itemrenderer component object. In debug mode I can see
event --> itemrenderer --> [inherited] --> mycustomecomponent --> text. I just can't seem to get at it.
Any Ideas. It's got to be simple and I am just missing it I guess.In your ItemRenderer, assign your data.yourDataFieldHere to the new value after editing is complete. This will allow you to then loop through the dataProvider in the main application and get all the values needed.
function onEdit(evt:Event):void {
data.yourDataField = evt.currentTarget.text; // Or use whatever property of the edited item you need here.
Chris -
Reappearing date in datefield itemRenderer of DataGrid
Hello, I have a datagrid with an item renderer on one column,
which is a datefield. The column (and the whole datagrid) is linked
to a MySQL db. when you edit a column it edits the db real time. My
problem is that when i delete a date from the datefield, it
spuratically reapears when i start editing another cell. anyone
know of this or can help me fix this?myDateField component:
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
<![CDATA[
private function onChange():void{
// df.text = dtformat.format(df.selectedDate);
public function set _selected(val:String):void{
df.text = dtformat2.format(val);
public function get _selected():String{
return dtformat.format(df.selectedDate);
]]>
</mx:Script>
<mx:DateFormatter id="dtformat"
formatString="YYYY-MM-DD"/>
<mx:DateFormatter id="dtformat2"
formatString="MM-DD-YYYY"/>
<mx:DateField editable="true"
yearNavigationEnabled="true" change="onChange()" id="df" width="90"
horizontalCenter="0" height="22" />
</mx:Canvas>
column inside datagrid:
<mx:DataGridColumn id="dgc36" headerText="Init Call Date"
dataField="call_date" rendererIsEditor="true"
editorDataField="_selected">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:Script>
<![CDATA[
public function get _selected():String{return
mdf._selected};
]]>
</mx:Script>
<assets:myDateField id="mdf"
_selected="{data.call_date}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn> -
Editable DataGrid With DateField
I'm new to flex and struggling with the editable DataGrid. I
have a DataGrid with an ItemRenderer that outputs a DateField. I
can't figure out how to get the new value of the DateField after
the edit.
Here is my DataGrid (the endDate column):
<mx:DataGrid id="allHistoryGrid"
dataProvider="{allEntries}" height="313" width="782" y="-4"
itemEditEnd="saveGridChange(event)" editable="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="dietDescription"
headerText="Diet"/>
<mx:DataGridColumn dataField="allergyDescription"
headerText="Allergy"/>
<mx:DataGridColumn dataField="labDescription"
headerText="Lab"/>
<mx:DataGridColumn dataField="labResult" width="50"
headerText="Result" itemRenderer="LabResultItemRenderer"/>
<mx:DataGridColumn dataField="medicationDescription"
headerText="Medication"/>
<mx:DataGridColumn dataField="height" width="65"
headerText="Height" itemRenderer="HeightItemRenderer"/>
<mx:DataGridColumn dataField="weight" headerText="Weight"
itemRenderer="WeightItemRenderer"/>
<mx:DataGridColumn dataField="bmi" width="35"
headerText="BMI" itemRenderer="BmiItemRenderer"/>
<mx:DataGridColumn dataField="circumference" width="45"
headerText="Circ." itemRenderer="CircumferenceItemRenderer"/>
<mx:DataGridColumn headerText="Start Date" width="75"
sortCompareFunction="startDateSortCompare">
<mx:itemRenderer>
<mx:Component>
<mx:VBox clipContent="false">
<mx:DateFormatter id="dateFormatter"
formatString="MM/DD/YYYY"/>
<mx:Text width="100"
text="{dateFormatter.format(data.startDate)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="endDate" width="45"
headerText="End Date" itemRenderer="EndDateItemRenderer"
rendererIsEditor="true"/>
<mx:DataGridColumn id="deleteEntry" width="50"
textAlign="center"
headerText="Delete" sortable="false"
itemRenderer="DeleteItemRenderer"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
Here is my itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
paddingLeft="16" horizontalAlign="center">
<mx:DateFormatter id="dateFormatter"
formatString="MM/DD/YYYY"/>
<mx:DateField x="16" y="67" id="AllHistoryEndDate"
text="{dateFormatter.format(data.endDate)}"/>
</mx:VBox>
How do I get the new value in the saveGridChange function?
private function saveGridChange(event:DataGridEvent):void {That gives me this error:
TypeError: Error #1034: Type Coercion failed: cannot convert
EndDateItemRenderer@51a70a1 to mx.controls.TextInput. -
Access DataField in Itemrenderer when submitting to Database
Hello,
I'm really stuck on this one. I have setup an Itemrenderer in a Datagrid which manages a DateField. Users can enter a date and other values directly in the datagrid. When they click 'submit', I want to populate a row in a database and I have setup a service for this. A row is created in the db as expected however the date is not populated despite users having entered a value. Below is a code snippet:
Datagrid
<s:GridColumn dataField="datf" headerText="Period From" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer dataChange="updateRenderer()">
<fx:Script>
<![CDATA[
public function updateRenderer():void {
periodFrom.text = outerDocument.dtf1.format(data.datf);
private function dateField_labelFunc(item:Date):String {
periodFrom.text = outerDocument.dtf1.format(item);
return outerDocument.dtf1.format(item);
]]>
</fx:Script>
<mx:DateField horizontalCenter="0" verticalCenter="0" width="90%" id="periodFrom" labelFunction="dateField_labelFunc"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Handler
protected function createBillResult_resultHandler(event:ResultEvent):void
var dataProvider = itemsDg.dataProvider;
var item = null;
for (var i:int = 0; i < dataProvider.length; i++){
item = dataProvider.getItemAt(i);
trace(item.datf); <--- THIS IS 'UNDEFINED'
billItems.days = item.days;
billItems.ratu = item.ratu;
billItems.lnid = item.lnid;
trace(billItems.datf = dtf2.format(item.datf));
createBillItemsResult.token = billingService.createBillItems(billItems);
I would have thought that I can access the value from the itemrenderer using the dataField property like I do with the other items.
Please, please, please help.
BrianThis error "TypeError: Error #1009: Cannot access a property or method of a null object reference" usually show when you are trying to set something that doesn't exist at the time of calling.
I create a test code and it works for me. Try to replicate you issue here:
<?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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
// Data includes URL to album cover.
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{ Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, datf:'01/01/2012'},
{ Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, datf:'01/01/2012'}
private function addEmptyRow():void{
myGrid.dataProvider.addItem({
'Artist':'',
'Album':'',
'Price':0,
'datf':''
private function showData():void{
Alert.show('Done');
]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="myGrid" dataProvider="{initDG}" width="100%" variableRowHeight="true" editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist"/>
<s:GridColumn dataField="Album"/>
<s:GridColumn dataField="Price"/>
<s:GridColumn dataField="datf" headerText="Period From" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
public function updateData():void {
data.datf = periodFrom.selectedDate;
]]>
</fx:Script>
<mx:DateField horizontalCenter="0" verticalCenter="0" width="90%" id="periodFrom" formatString="MM/DD/YYYY" text="{data.datf}" change="updateData()" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:Button label="Add Row" click="addEmptyRow()" />
<s:Button label="submit" click="showData()" />
</s:VGroup>
</s:Application> -
Adding Datefield in Datagrid column
I have a requirement to have datefield control in the
datagrid column. I have to create the datagrid from actionscripts
and also render the datefield from it. I tried using the
datagriditemrenderer but its not working. Is there a sample code i
can taken help from? Thanks in advance.Create one item rennderer which provides you radio button
and in actionscript file specify this
columnname.itemRenderer = new ClassFactory(itemrendererName);
So it will add itemrenderer at runtime...
Hope it will help you!!! -
ItemRenderer woes - a simple one causing big issues :(
I have a simple data grid with one of the cells being
rendered by an itemRenderer in the form of a DateField (see code
below).
When the person changes the date in the DateField in the
grid, all that I want it to do is shoot off a HTTPService with the
details, and the result being to remove the row from the
datagrid....
Sounds simple doesn't it?
Well i thought it was but I am having big issues with it. I
think it is down to my lack of understanding about how exactly
itemRenderers work with respect to the set thingy... anyway... what
is happening is that when the date changed, it shoots off the
HTTPService as expected but the date field mysteriously shifts one
row down :'(I have a simple data grid with one of the cells being
rendered by an itemRenderer in the form of a DateField (see code
below).
When the person changes the date in the DateField in the
grid, all that I want it to do is shoot off a HTTPService with the
details, and the result being to remove the row from the
datagrid....
Sounds simple doesn't it?
Well i thought it was but I am having big issues with it. I
think it is down to my lack of understanding about how exactly
itemRenderers work with respect to the set thingy... anyway... what
is happening is that when the date changed, it shoots off the
HTTPService as expected but the date field mysteriously shifts one
row down :'( -
Inline item mx:Image ... in mx:itemRenderer could not see the defination of method
I have following code and got a compilation error ("possiblely called an undefined function") because the <mx:Image ...> in the <mx:itemRenderer > could not see the defination of "aMethod" method:
<mx:Form ....>
<mx:Script><![CDATA[
private function aMethod(evt:Event):void {
// code...
]]></mx:Script>
<mx:Canvas label="Tile View" width="100%" height="100%" >
<mx:TileList id="photosTileList" dataProvider="{this.photoDP}" width="100%" height="100%" >
<mx:itemRenderer >
<mx:Component>
<mx:Image horizontalAlign="center" source="{data.url.text()}"
toolTip="{data.caption.text()}" width="55" height="38" complete="aMethod(event)"/> <!-- It causes the error -->
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Image .... complete="aMethod(event)"/> <!-- It is OK here -->
</mx:Canvas>
</mx:Form>
I do not know why the inline <mx:Image> inside <mx:itemRenderer> can not see the "aMethod" function defination in the same mxml file.
Any suggestions?You need outerDocument, and the method cannot be private, it should be public:
complete="outerDocument.aMethod(event)"
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services -
DataChange event not triggering in itemRenderer
Hi,
I have a tileList on the stage, which is dataBound to an
XMLList object, the items of which are programatically updated with
the results from an httpService.
The tileList uses a custom itemRenderer. Inside the
itemRenderer, I want to be able to change the color of the
background based on the data. For example, when data.@arrow = 1, I
want the background to be green, and when data.@arrow = 0, red etc.
I am trying to call this function on dataChange event of one
of the containers inside the itemRenderer. however it doesnt seem
to be firing when the data updates
Please advise as to what I am doing wrong?Found the answer. My stupidity!
I wasnt updating the arrow field properly -
Image Not getting displayed in DataGridColumn ItemRenderer
I have a DataGridColumn ItemRenderer and based on the value,
I am displaying image in the DataGridColumn
However the image is not getting displayed.
Below is my code. What could be the problem?
Thanks"ajesing" <[email protected]> wrote in
message
news:gbcd0n$8sn$[email protected]..
>I have a DataGridColumn ItemRenderer and based on the
value, I am
>displaying
> image in the DataGridColumn
> However the image is not getting displayed.
>
> Below is my code. What could be the problem?
@Embed embeds at compiletime, so it can't take a variable. If
you want to
embed the graphics, embed them to the main file and use
DataGrid's
iconFunction to pass an icon to the itemRenderer.
HTH;
Amy -
Getting selected item from combobox itemrenderer and storing in object
Hi Guys,
Can anyone help me in this regard. Its very urgent.
I have a combo box itemrenderer in datagrid column. I want to get the user selected item from the dropdown of the row(s) (User may select values from combo box from multiple rows of datagrid) and corressponding values of all other columns of the rows and store it in an object . Then pass this object to database to update only those rows that user has changed.
I am able to get the selected item from combo box using "event.currentTarget.selectedItem" and corressponding values of all other columns of the rows using "valueSelect.ID", etc where valueSelect is object which contains data for datagrid. But am stuck up with, how to store the selected item value of the combobox and corressponding values of all other columns of the rows into an Object ?.
Can anybody help me with sample to store selected item from combobox and its corressponding values of all other columns into an object which i can send to db...?
Kindly help me in this regard.
Thanks,
Anand.Hi!
Are you using a collection of VO or DTO as the dataprovider of the combobox component?
If so, have you created some attribute there to control the user's selection in the combobox?
For instance:
private var selected:Boolean = false;
If your solution fits this approach, you may create a new collection that contains just the objects that were selected by the user, it means you can loop through the datagrid's dataprovider and only insert in this new collection those objects that have the attribute "selected" set to true.
For instance:
private function getSelectedRecords(datagridDataProvider:ArrayCollection):ArrayCollection
var newCollection:ArrayCollection = new ArrayCollection();
for each (var item:Object in datagridDataProvider)
if (item.selected)
newCollection.addItem(item)
return newCollection;
Afterwards, you may serialize this new collection with your back-end.
Hope it helps you!
Cheers,
@Pablo_Souza -
Creating a common itemRenderer different data properties
Ok, first let me set the context. I creating a dashboard-like
table where each row represents an object, and the first column of
the table shows the name of the object and subsequent columns are
various dashboard compliance items.
[Name] [Prop A] [Prop B] [Prop C] [Prop D]
Item 1 {graphic) {graphic) {graphic) {graphic)
Item 2 {graphic) {graphic) {graphic) {graphic)
Item 3 {graphic) {graphic) {graphic) {graphic)
Each dashboard cell displays a different graphic based on
that property. There are 6 graphics, so the itemRenderer looks at
the data for that given property, and then translates the #0-#5
into a class reference for 1 of those 6 graphics using the Switch
method.
override public function set data(value:Object):void {
super.data = value;
switch(value.type) {
case 0:
img.source = scanFailed8;
break;
case 1:
img.source = needsScan8;
break;
etc...
So since the calculation is the same for all of these
properties, what I want to do is create a generic itemRenderer
where I can pass in the property name and then use that reference
in the Switch method. My problem is that the Switch method works
fine if it's:
switch(value.PropA)
But in need to set a public variable that can get passed in
to replace that value. I tried this as a string, and that clearly
failed. Can someone help me get through this issue? I really don't
want to have to maintain a separate item renderer for each
property. :)
Thanks.OK, here it is in all it's infamy....
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalAlign="center" verticalAlign="middle"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
preinitialize="preinit()" creationComplete="init()">
<mx:states>
<mx:State name="long">
<mx:SetStyle name="horizontalAlign" value="left"/>
<mx:SetStyle name="paddingLeft" value="10"/>
</mx:State>
<mx:State name="short">
<mx:RemoveChild target="{theLabel}"/>
</mx:State>
</mx:states>
<!--Load classes for image sources -->
<mx:Script source="../Scripts/LoadIcons.as" />
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import flash.events.Event;
[Bindable]
public var showLongFormat:Boolean;
//private var _listData:DataGridListData;
private var _listData:BaseListData;
// Make the listData property bindable.
[Bindable("dataChange")]
// Define the getter method for listData.
public function get listData():BaseListData {
return _listData;
// Define the setter method for listData
public function set listData(value:BaseListData):void {
_listData = value;
public function preinit():void {
// When data changes the handleDataChanged function is
called
addEventListener("dataChange", handleDataChanged);
public function handleDataChanged(event:Event):void {
// Cast listData to DataGridListData object.
var theListData:DataGridListData =
DataGridListData(listData);
// Access information about the data passed to the item
renderer
// and spit out the right image and text.
switch(theListData.label) {
case '0':
theIcon.source = scanFailed8;
theIcon.toolTip = theListData.dataField + ': Scan Failed';
theLabel.text = 'Scan Failed';
break;
case '1':
theIcon.source = needsScan8;
theIcon.toolTip = theListData.dataField + ': Needs
Scanning';
theLabel.text = 'Needs Scanning';
break;
case '2':
theIcon.source = scanning8;
theIcon.toolTip = theListData.dataField + ': Scanning';
theLabel.text = 'Scanning';
break;
case '3':
theIcon.source = noncompliant8;
theIcon.toolTip = theListData.dataField + ': Non-Compliant';
theLabel.text = 'Non-Compliant';
break;
case '4':
theIcon.source = partial8;
theIcon.toolTip = theListData.dataField + ': Partial
Compliance';
theLabel.text = 'Partial Compliance';
break;
case '5':
theIcon.source = compliant8;
theIcon.toolTip = theListData.dataField + ': Compliant';
theLabel.text = 'Compliant';
break;
default:
theIcon.source = notApplicable8;
theIcon.toolTip = 'Not Applicable';
break;
// Check to see if form is 'long' or 'short'
public function init():void {
if (showLongFormat == true) {
currentState='long';
}else{
currentState='short';
]]>
</mx:Script>
<mx:Image id="theIcon" />
<mx:Label id="theLabel" />
</mx:HBox>
That's a lot of code to just stick an image in a cell. Ok, I
guess it does a little more than that. ;-) -
Using a custom itemrenderer in datagrid to update value in the same row but different column/cell
Here's what I have so far. I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled. Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level. Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window. I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well. Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2). I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
xmlns:components="components.*" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.TextInput;
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.events.CloseEvent;
import mx.events.DataGridEvent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.events.SliderEvent;
import mx.events.SliderEventClickTarget;
import mx.managers.DragManager;
import mx.managers.PopUpManager;
import mx.utils.ObjectUtil;
[Bindable]private var myDP1:ArrayCollection;
[Bindable]private var myDP2:ArrayCollection;
[Bindable]public var temp:String;
[Bindable]public var slideTemp:Number;
private var win:Dialog;
protected function init(event:FlexEvent):void{
myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
{col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
{col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
{col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
myDP2 = new ArrayCollection()
protected function button1_clickHandler(event:MouseEvent):void
event.preventDefault();
if(txt.text != "")
Alert.yesLabel = "ok";
Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
private function image_dragEnter(evt:DragEvent):void {
var obj:IUIComponent = IUIComponent(evt.currentTarget);
DragManager.acceptDragDrop(obj);
private function image_dragDrop(evt:DragEvent):void {
var item:Object = dg2.selectedItem;
var idx:int = myDP2.getItemIndex(item);
myDP2.removeItemAt(idx);
protected function dg1_changeHandler(event:ListEvent):void
temp=event.itemRenderer.data.col1;
protected function dg2_dragDropHandler(event:DragEvent):void
event.preventDefault();
dg2.hideDropFeedback(event as DragEvent)
var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
win.btn.addEventListener(MouseEvent.CLICK, addIt);
PopUpManager.centerPopUp(win);
win.mySlide.addEventListener(Event.CHANGE, slideIt);
private function txtClickHandler(event:CloseEvent):void {
trace("alert");
if (event.detail==Alert.YES){
myDP2.addItem({label:temp});
private function addIt(event:MouseEvent):void{
myDP2.addItem({col1:temp, col2:slideTemp})
private function slideIt(event:SliderEvent):void{
slideTemp = event.target.value;
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
<mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
<mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
dragDrop="dg2_dragDropHandler(event)" rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
<mx:columns>
<mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
<mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
<mx:itemRenderer>
<mx:Component>
<components:Compslide/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
<mx:TextInput x="10" y="380" width="311" id="txt"/>
<mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list. Type and click "Add to List"
" width="311" height="51" fontSize="12"/>
<mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
</mx:Panel>
</mx:Application>how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?
-
Problem with Checkbox ItemRenderer in a DataGrid
Hello Everyone,
I'm using a datagrid with two columns, which is used as a data entry grid. The first column has a simple text input field and the 2nd column has a checkbox as an itemrenderer. On creationComplete event, I'm passing an arraycollection as the dataprovider for this datagrid. The arraycollection:
<mx:ArrayCollection id="psAC">
<mx:source>
<mx:Array>
<mx:Object PaText="line1" PaCheckbox="0" />
<mx:Object PaText="line2" PaCheckbox="0" />
<mx:Object PaText="line3" PaCheckbox="1" />
<mx:Object PaText="line4" PaCheckbox="0" />
<mx:Object PaText="line5" PaCheckbox="0" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
There is a datagrid (dGa) in the main application. On click of this, a pop up window comes up which has the same datagrid layout(i.e, 2 columns). And this is where the data is entered. Here, if the user checks the check box, I have assigned a value of '1' for the 2nd column of the arraycollection. THis code(below) works fine.
<datagrid in pop up window>
<mx:DataGridColumn headerText="Best Possible Action?" textAlign="center" width="200" editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
if(value.PaCheckbox == 1){
this.selected = true;
}else{
this.selected = false;
]]>
</mx:Script>
<!--<mx:change>
<![CDATA[
if(this.selected == true){
data.PaCheckbox = 1;
}else{
data.PaCheckbox = 0;
]]>
</mx:change>-->
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
But I would also need to set the PaCheckbox value to 0 or 1, based on teh check condition of the check box. I tried using change event (commented in the code above). But there I get an error: Cannot access a property or method of a null object reference. I checekd in debug mode, there the data object is null! Can you please help me on how to pass back the values(0 o 1) to my arraycollection, based on the checkbox's status?
Cheers,
Deepakheyo,
I solved it.....
i was missing this line of code super.data = value; in the ovverriden function...Once we have this line, the data object will have teh field names and their values in it, which can be accessed on the change event...
Maybe you are looking for
-
Photoshop Elements ver7; Editor
So i bought a new laptop and along with it i orderded adobe photoshop elements version 7. after i finished installing everything i went to try and open the photoshop editor. it brings up the first screen with the blue box where it shows everything i
-
PL/SQL parser -- OTN Please reply
The contents of the xml file is as follows. <Node1> <Node2> <Node3>asdf</Node3> <Node4>jklm</Node4> </Node2> <Node5> <Node6>xyza</Node6> <Node7>abcd</Node7> </Node5> </Node1> The schema design is such that in Node2 table I can directly insert Node3 a
-
When I turn my ipod on it shows the usb cable. When I plug my ipod touch into my computer itunes comes up and it says it can't access my ipod because it is locked with a password, to unlock it. I can't unlock it cause it won't leave the screen that h
-
I have had an ipod mini for a year and have had no problems with itunes untill i updated to itunes5 know ever time i try to open itunes iam told itunes has incurred a problem and needs to shut down this has been happening for over a month now and im
-
Disc stuck in drive, tried every thing
This isn't a mechanical problem, I can hear the computer trying to read the disc. When I restart the computer and hold the mouse button it just tries to read the disc for hours... Even if I restart the computer and don't hold the mouse button, it jus