[flexcoders] custom datagrid item render not seeing changes made by custom datagrid item editor
Hi,
I'm having some trouble with a datagrid item editor and renderer. I
think I must have missed something obvious.
I have a datagrid with editable cells which are bound to Number-like
properties of an object. I want to display these values using the
CurrencyFormatter. I want to edit these as Numbers without the dollar sign.
I am trying to make these renders/editors lightweight because the grid
has a lot of columns and rows(its basically a spreadsheet) so i'm trying
to use actionscript to extend rather than using composition and
containers in MXML.
I have an item editor that extends TextInput.
I have a renderer that extends Label.
The renderer displays its value correctly as $100.00.
The editor updates the property of the object when I mouse click outside
of the cell.
My gridcolumn has:
dataField=columnOne
itemEditor=path.to.editor
itemRender=path.to.renderer
editorDataField=newValue
newValue is a function of my editor that returns the updated value, it
seems to be doing the right thing as I can see the value updated in the
set function of my object.
I'm not really sure what my render should look like code-wise. I have
something like the following at the moment.
class renderer extends Label{
public function set data(value:Object):void{
if (value != null){
super.data = value;
text = formatter.format(text);
}
}
}
Any ideas where Ive gone wrong or what I might have missed?
cheers,
shaun
RE: [flexcoders] custom datagrid item render not seeing changes made by custom datagrid item editor
are you dispatchng events when the dataprovider item changes or calling
itemUpdated on the collection?
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of shaun etherton
Sent: Thursday, April 12, 2007 12:40 AM
To: [EMAIL PROTECTED]
Subject: [flexcoders] custom datagrid item render not seeing changes
made by custom datagrid item editor
Hi,
I'm having some trouble with a datagrid item editor and renderer. I
think I must have missed something obvious.
I have a datagrid with editable cells which are bound to Number-like
properties of an object. I want to display these values using the
CurrencyFormatter. I want to edit these as Numbers without the dollar
sign.
I am trying to make these renders/editors lightweight because the grid
has a lot of columns and rows(its basically a spreadsheet) so i'm trying
to use actionscript to extend rather than using composition and
containers in MXML.
I have an item editor that extends TextInput.
I have a renderer that extends Label.
The renderer displays its value correctly as $100.00.
The editor updates the property of the object when I mouse click outside
of the cell.
My gridcolumn has:
dataField=columnOne
itemEditor=path.to.editor
itemRender=path.to.renderer
editorDataField=newValue
newValue is a function of my editor that returns the updated value, it
seems to be doing the right thing as I can see the value updated in the
set function of my object.
I'm not really sure what my render should look like code-wise. I have
something like the following at the moment.
class renderer extends Label{
public function set data(value:Object):void{
if (value != null){
super.data = value;
text = formatter.format(text);
}
}
}
Any ideas where Ive gone wrong or what I might have missed?
cheers,
shaun
Re: [flexcoders] custom datagrid item render not seeing changes made by custom datagrid item editor
Hi Alex,
Alex Harui wrote:
are you dispatchng events when the dataprovider item changes or calling
itemUpdated on the collection?
No, I am not dispatching any events. I assumed the grid renderer would
notice the value had changed. I guess I need to dispatch an event for
this to occur. But I dont know where I'd need to do that.
I've got a basic working solution at the moment. Instead of extending
Label for my renderer i'm extending DataGridItemRenderer.
I think extending Label was the cause of my original problem. I would
still like to understand how to make it work when extending Label
though. I have the feeling that it should have been trivial (if you'd
like to write a blog entry about how it do it that would be great:).
Here is the current implementation. Note: Ive only tested this with a
dataProvider that contained one object(row).
mx:DataGridColumn headerText=Column 1 dataField=col1
itemEditor=view.CurrencyEditor
itemRenderer=view.CurrencyRenderer
editorDataField=fNumber
rendererIsEditor=false
/
package view
{
import helper.FNumber;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.formatters.CurrencyFormatter;
public class CurrencyEditor extends TextInput
{
private var cformatter:CurrencyFormatter;
private var _fNumber:FNumber;
public function CurrencyEditor(){
cformatter = new CurrencyFormatter();
cformatter.precision=2;
cformatter.rounding=none;
//Only allow the following characters to be entered.
restrict = $0-9\\.\\,;
}
override public function set data(value:Object):void{
if (value != null){
super.data = value;
var dg:DataGrid = DataGrid(listData.owner);
var column:DataGridColumn =
dg.columns[listData.columnIndex];
fNumber = data[column.dataField];
this.text = cformatter.format(fNumber.toString());
}
}
public function get fNumber():FNumber{
var dollarExp:RegExp = new RegExp(\\$,g);
var commaExp:RegExp = new RegExp(,,g);
var x:String = text.replace(dollarExp,);
x = x.replace(commaExp,);
return new FNumber(new Number(x));
}
public function set fNumber(v:FNumber):void{
this._fNumber = v;
}
}
}
package view
{
import mx.formatters.CurrencyFormatter;
import mx.controls.dataGridClasses.DataGridItemRenderer;
public class CurrencyRenderer extends DataGridItemRenderer
{
private var cformatter:CurrencyFormatter;
public function CurrencyRenderer(){
cformatter = new CurrencyFormatter();
cformatter.precision=2;
}
override public function validateProperties():void{
super.validateProperties();
this.text = cformatter.format(text);
}
}
}
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of shaun etherton
Sent: Thursday, April 12, 2007 12:40 AM
To: [EMAIL PROTECTED]
Subject: [flexcoders] custom datagrid item render not seeing changes
made by custom datagrid item editor
Hi,
I'm having some trouble with a datagrid item editor and renderer. I
think I must have missed something obvious.
I have a datagrid with editable cells which are bound to Number-like
properties of an object. I want to display these values using the
CurrencyFormatter. I want to edit these as Numbers without the dollar
sign.
I am trying to make these renders/editors lightweight because the grid
has a lot of columns and rows(its basically a spreadsheet) so i'm trying
to use actionscript to extend rather than using composition and
containers in MXML.
I have an item editor that extends TextInput.
I have a renderer that extends Label.
The renderer displays its value correctly as $100.00.
The editor updates the property of the object when I mouse click outside
of the cell.
My gridcolumn has:
dataField=columnOne
itemEditor=path.to.editor
itemRender=path.to.renderer
editorDataField=newValue
newValue is a function of my editor that returns the updated value, it
seems to be doing the right thing as I can see the value updated in the
set function of my object.
I'm not really sure what my render should look like code-wise. I have
something like
RE: [flexcoders] custom datagrid item render not seeing changes made by custom datagrid item editor
Yeah, the DG should kick the events but only when changing rows. Going
from column to column in the same row does not kick an event (there's a
performance reason behind it).
Label shouldn't be different from DGIR, just heavier. Most of what you
want to do you can do with DGIR. I really can't think of when I'd use
Label, maybe for a gradient background, but even then I might just put a
DGIR in a UIComponent.
If you're still curious and you can build a small test case with label
that fails, we might be able to see what went wrong.
-Alex
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of shaun etherton
Sent: Thursday, April 12, 2007 8:32 PM
To: [EMAIL PROTECTED]
Subject: Re: [flexcoders] custom datagrid item render not seeing changes
made by custom datagrid item editor
Hi Alex,
Alex Harui wrote:
are you dispatchng events when the dataprovider item changes or
calling
itemUpdated on the collection?
No, I am not dispatching any events. I assumed the grid renderer would
notice the value had changed. I guess I need to dispatch an event for
this to occur. But I dont know where I'd need to do that.
I've got a basic working solution at the moment. Instead of extending
Label for my renderer i'm extending DataGridItemRenderer.
I think extending Label was the cause of my original problem. I would
still like to understand how to make it work when extending Label
though. I have the feeling that it should have been trivial (if you'd
like to write a blog entry about how it do it that would be great:).
Here is the current implementation. Note: Ive only tested this with a
dataProvider that contained one object(row).
mx:DataGridColumn headerText=Column 1 dataField=col1
itemEditor=view.CurrencyEditor
itemRenderer=view.CurrencyRenderer
editorDataField=fNumber
rendererIsEditor=false
/
package view
{
import helper.FNumber;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.formatters.CurrencyFormatter;
public class CurrencyEditor extends TextInput
{
private var cformatter:CurrencyFormatter;
private var _fNumber:FNumber;
public function CurrencyEditor(){
cformatter = new CurrencyFormatter();
cformatter.precision=2;
cformatter.rounding=none;
//Only allow the following characters to be entered.
restrict = $0-9\\.\\,;
}
override public function set data(value:Object):void{
if (value != null){
super.data = value;
var dg:DataGrid = DataGrid(listData.owner);
var column:DataGridColumn = dg.columns[listData.columnIndex];
fNumber = data[column.dataField];
this.text = cformatter.format(fNumber.toString());
}
}
public function get fNumber():FNumber{
var dollarExp:RegExp = new RegExp(\\$,g);
var commaExp:RegExp = new RegExp(,,g);
var x:String = text.replace(dollarExp,);
x = x.replace(commaExp,);
return new FNumber(new Number(x));
}
public function set fNumber(v:FNumber):void{
this._fNumber = v;
}
}
}
package view
{
import mx.formatters.CurrencyFormatter;
import mx.controls.dataGridClasses.DataGridItemRenderer;
public class CurrencyRenderer extends DataGridItemRenderer
{
private var cformatter:CurrencyFormatter;
public function CurrencyRenderer(){
cformatter = new CurrencyFormatter();
cformatter.precision=2;
}
override public function validateProperties():void{
super.validateProperties();
this.text = cformatter.format(text);
}
}
}
From: [EMAIL PROTECTED] mailto:flexcoders%40yahoogroups.com
[mailto:[EMAIL PROTECTED] mailto:flexcoders%40yahoogroups.com
] On
Behalf Of shaun etherton
Sent: Thursday, April 12, 2007 12:40 AM
To: [EMAIL PROTECTED] mailto:flexcoders%40yahoogroups.com
Subject: [flexcoders] custom datagrid item render not seeing changes
made by custom datagrid item editor
Hi,
I'm having some trouble with a datagrid item editor and renderer. I
think I must have missed something obvious.
I have a datagrid with editable cells which are bound to Number-like
properties of an object. I want to display these values using the
CurrencyFormatter. I want to edit these as Numbers without the dollar
sign.
I am trying to make these renders/editors lightweight because the
grid
has a lot of columns and rows(its basically a spreadsheet) so i'm
trying
to use actionscript to extend rather than using composition and
containers in MXML.
I have an item editor that extends TextInput.
I have a renderer that extends Label.
The renderer displays its value correctly as $100.00.
The editor updates the property of the object when I mouse click
outside
of the cell.
My gridcolumn has:
dataField=columnOne
itemEditor=path.to.editor
itemRender=path.to.renderer
editorDataField=newValue
newValue is a function of my editor that returns the updated value, it
seems to be doing the right thing as I can see the value updated in
the
set function of my object.
I'm not really sure what my render should look like code-wise. I have
