Spark datagrid item editor font see through
I am using a default item editor on a spark datagrid.
When the user attempts to edit the field the old value shows through.
How do I get rid of this?
I am using out of the box stuff? Is this a listed bug?
Code is...
<s:GridColumn dataField="Actual" headerText="Actual" width="75" editable="true">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" background="true" backgroundColor="#FFFFFF" alpha="1.0" color="#000000" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Thanks
Dan Pride
Try <s:DefaultGridItemEditor if you are wanting to make it editable.
here is an example of combobox, but it is similiar ....
<s:itemEditor>
<fx:Component>
<s:ComboBoxGridItemEditor >
<s:dataProvider>
<s:ArrayList>
<fx:String>Edit</fx:String>
<fx:String>Read</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBoxGridItemEditor>
</fx:Component>
</s:itemEditor>
Don
Similar Messages
-
Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null
I am currently using the 4.12.0 SDK. I have a Spark DataGrid setup that makes use of an externally-defined itemRenderer:
<s:DataGrid id="dgEquipment"
width="100%" height="100%"
doubleClickEnabled="true"
creationComplete="init()" doubleClick="popTab(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer="renderers.equipment.IconRenderer"
dataField="EXISTING"
width="22"/>
The data provider is set programmatically after a remote call has returned a result.
I have the renderer setup as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
dataChange="init()" remove="dispose()">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Menu;
import mx.events.MenuEvent;
import spark.components.DataGrid;
[Bindable]
[Embed(source="../../../assets/images/Icon 1.png")]
private var ico1:Class;
[Bindable]
[Embed(source="../../../assets/images/Icon 2.png")]
private var ico2:Class;
[Bindable]
[Embed(source="../../../assets/images/Icon 3.png")]
private var ico3:Class;
private var isExisting:Boolean;
private var popUp:Menu;
private function init():void
if (data)
isExisting = data.EXISTING == 1;
private function dispose():void
if (popUp)
popUp.removeEventListener(MenuEvent.ITEM_CLICK, popUp_click);
popUp = null;
if (imgActions)
imgActions.removeEventListener(MouseEvent.CLICK, image_click);
imgActions = null;
override public function prepare(hasBeenRecycled:Boolean):void
if (data)
if ((data.TYPE == "A" || data.TYPE == "B") && !data.X && !data.Y)
disableLink();
imgActions.source = ico3;
imgActions.toolTip = "Blah blah.";
else if (data.TYPE == "C" || data.TYPE == "D")
disableLink();
else if (isExisting)
imgActions.source = ico1; //****************************** imgActions.toolTip = "More blah blah.";
imgActions.addEventListener(MouseEvent.CLICK, image_click);
else
imgActions.source = ico2;
imgActions.addEventListener(MouseEvent.CLICK, image_click);
imgActions.toolTip = "Even more blah blah.";
initPopUp();
private function initPopUp():void
private function popUp_click(event:MenuEvent):void
private function image_click(event:MouseEvent):void
private function disableLink():void
]]>
</fx:Script>
<s:Image id="imgActions"
height="18" width="18"/>
</s:GridItemRenderer>
When the code reaches the line where I have added a comment full of asterisks, I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:81 ]
at spark.components.gridClasses::GridViewLayout/initializeItemRenderer()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1808]
at spark.components.gridClasses::GridViewLayout/createTypicalItemRenderer()[/Users/justinmcl ean/Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/ GridViewLayout.as:1243]
at spark.components.gridClasses::GridViewLayout/updateTypicalCellSizes()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1374]
at spark.components.gridClasses::GridViewLayout/measure()[/Users/justinmclean/Documents/Apac heFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/GridViewLayout.as: 875]
at spark.components.supportClasses::GroupBase/measure()[/Users/justinmclean/Documents/Apache Flex4.12.0/frameworks/projects/spark/src/spark/components/supportClasses/GroupBase.as:1156 ]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[/Users/justinmclean/Documents/ApacheFlex4.12.0/frameworks/projects/framework/src/mx/cor e/UIComponent.as:9038]
at mx.core::UIComponent/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/framew orks/projects/framework/src/mx/core/UIComponent.as:8962]
at spark.components::Group/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/fra meworks/projects/spark/src/spark/components/Group.as:1074]
at mx.managers::LayoutManager/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/ frameworks/projects/framework/src/mx/managers/LayoutManager.as:673]
at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFl ex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:824]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ ApacheFlex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
Running the debugger shows that this occurs with the first item in the data provider. If I alter the prepare method to check for the existence of imgActions before doing anything, everything works fine after the first item. So I'll have one row in the DataGrid with a missing icon, and all the rest will have icons.
So the question is, is it normal for prepare to run before any children of the item renderer are created? If so, how should I handle this?
Many thanks in advance.A little more info. I added some event handlers to the renderer and the image (for events that I thought would be relevant), and here is the order of events based on trace statements within the handlers:
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
griditemrenderer1_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_addedToStageHandler
imgActions_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_initializeHandler
griditemrenderer1_elementAddHandler
imgActions_addHandler
griditemrenderer1_initializeHandler
griditemrenderer1_addHandler
prepare called
imgActions_resizeHandler
griditemrenderer1_resizeHandler
imgActions_creationCompleteHandler
imgActions_updateCompleteHandler
griditemrenderer1_creationCompleteHandler
griditemrenderer1_updateCompleteHandler
griditemrenderer1_removeHandler
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
imgActions_addedToStageHandler
griditemrenderer1_addHandler
griditemrenderer1_dataChangeHandlerTypeError: Error #1009: Cannot access a property or method of a null object reference.
prepare called
at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:91 ]
imgActions_renderHandler
griditemrenderer1_renderHandler -
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; -
DataGrid item editor in Flash CS3
Does anyone have a good example of how to define custom item
editors and custom cell renderers for the DataGrid in Flash CS3
with Action Script 3.0?
I'm trying to put things like combo boxes and numeric
steppers in certain columns.Found an example.
Click
Here -
Spark datagrid item renderer - adjust height
I am using a textinput as an item renderer for DataGrid:
<s:GridColumn dataField="Comment" headerText="Comment"
itemRenderer="DataGridRenderer">
</s:GridColumn>
// Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"
xmlns:ns="library://commons.stoneriver.com"
>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
super.prepare(hasBeenRecycled);
if (data)
if(data.FormCode == "")
Comment.text = data[column.dataField];
Comment.setStyle("backgroundColor", 0xFFFFFF);
else
Comment.text = "";
Comment.setStyle("backgroundColor", 0xB1CCF0);
]]>
</fx:Script>
<!--- The renderer's visual component. -->
<s:TextInput id="Comment" width="100%" borderVisible="false" fontSize="{column.grid.dataGrid.getStyle('fontSize')}"/>
</s:GridItemRenderer>
How can I adjust a height of this renderer to fill the whole cell? Right now it comes out with a smaller height than a row height.
ThanksI actually got word wrapping working with RichEditableText . But now when I specify height=100% all rows have the same extremely large height.
-
Combobox as Datagrid Item editor
Hi there, i'm trying to use a combobox as an itemEditor for a datagridcolumn, and i'm having some difficulties in doing this.
I'm using the code below to define the column, so far so good the itemeditor appears and selects the item accordingly to the value of the datafield.
My problem is, if I open the combobox and do not choose none of the items, the value that passes to the datagrid is 0, but i want to pass the old value. So that the value remains the same.
the dataprodiver for the combobox is this one (rows from database)
id description
1 xxxxx
2 yyyyy
the datafield banda_horaria_id holds an integer witch match one of the values above.
Can anyone help me, and tell me what should i do to maintain the value if none of the combobox items is selected.
Thanks in advance.
PlumbSoldier
<mx:DataGridColumn headerText="Banda Horária" dataField="banda_horaria_id" id="bandaHoraria"
rendererIsEditor="false" editorDataField="selectedItem" >
<mx:itemEditor>
<mx:Component>
<mx:ComboBox initialize="outerDocument.cbBandaHoraria(event)"
fontWeight="normal" labelField="descricao" >
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
private var columnDataField:String;
private var dtGrid:DataGrid;
override public function set data(value:Object):void
dtGrid=listData.owner as DataGrid;
columnDataField=dtGrid.columns[listData.columnIndex].dataField;
super.data = value;
if (value != null)
var len:int = this.dataProvider.length;
for (var i:int = 0; i < len; i++)
if (this.dataProvider[i].id == value[columnDataField])
this.selectedIndex = i;
break;
public function onChange():void
var index:int = this.selectedIndex;
if (index !=-1){
id = this.dataProvider[index].id;
} else{
var len:int = this.dataProvider.length;
for (var i:int = 0; i < len; i++)
if (this.dataProvider[i].id == data[columnDataField])
this.selectedIndex = i;
break;
]]>
</mx:Script>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>Thanks for your help rgadiparthi , but that didn't helped me.
But i managed to solve my problem. -
Spark DataGrid Embedded Font Quandary
01. In everything that follows, I am talking about the latest [21328] version of the SDK, not that I believe that my problems have anything to do with that release, just so anyone interested and willing to help will know the version.
02. My application happens to be rooted in AIR's WindowedApplication, but again, I do not think that has any impact on my problems; I believe the same results would obtain for a Flex Application.
03. I have a custom renderer for the Spark DataGrid which extends DefaultGridItemRenderer. It works fine. Its primary job is to change the font characteristics of each row in the list as a visual clue to the user as to the specific nature of the content that is accessible. Some entries are just in the Regular font, some in Bold, some in Italic, and some in Bold-Italic.
04. I have, for most of the project, embedded the necessary fonts like this:
[Embed (source="C:/Windows/Fonts/ArnoPro-Caption.otf", fontName="ArnoPro_BI_4",
fontStyle="italic",
fontWeight="bold",
mimeType="application/x-font",
embedAsCFF="true",
unicodeRange="U+0021-U+00ff, U+20ac-U+20ac")]
private const ArnoPro_BI_4:Class;
As I said, that all works just as advertized. But, that method of embedding carries the somewhat painful burden of slower compilations, so for the last 24 hours I have unseccessfully been trying to replace that with:
[Embed (source = "../resources/assets/ArnoPro_BI_4.swf", symbol="ArnoPro_BI_4")]
private const ArnoPro_BI_4:Class;
where the swf file was produced via fontswf, using this incantation:
fontswf -4 -u U+0021-U+00ff,U+20ac-U+20ac -b -i -a ArnoPro_BI_4 -o ArnoPro_BI_4.swf C:/Windows/Fonts/ArnoPro-Caption.otf
06. By all that is holy, the two different means of embedding the font ought to yield the same result, but they do not. I have debugging code inserted to print out the list of fonts upon initiation of the application, and they are identical. Both means of embedding do succeed in getting the embedded fonts into the .swf, but the attempt to use the fonts fails using the second approach.
There is, of course, no change being made to the code in the item renderer which merely uses setStyle() to effect the row-by-row result. The result in the second case is that the only style of the embedded font that renders is 'regular'.
07. I have used the 'keep-generated' facility to look at the code being generated by the mxmlc compiler and can see that different code is emitted, but it does not help me find a fix to the problem. Both forms of the meta-tag do something; both methods of embedding seem to correctly register themselves with the FontManager, but only the method of embedding which actually performs the transcoding during compilation seems to result in a set of registered fronts which can be found and correctly used to render output based on the runtime setting of the font style.Thank for the reply
I hoped that my posting indicated how the fonts in the the .swf file were constructed. The "-4", argument to the command-line tool, fontswf, as far as I can tell, is the precise analog to the "embedAsCFF" argument in the [Embed] syntax. That is what makes it so perplexing. Given all the external documentation that is available for each tool/methodology, I would have thought that the resultant bytecodes, classes, flags, whatever, would have been identical. The only difference would be the timing of when the transcoding took place.
Since it is clearly more efficient to only transcode whatever set of fonts an application needs once, not once per build/test turn-around, I would really like to make the fontswf workflow work. For those of us outside the beneficial environment of your licensed tools, the kindly-provided alternative to the facilities built into Flash Professional and/or Flash Builder give us the greatest degree of productivity.
Whoever has access to the source code for Font [I can only see the uninteresting FontAsset in the SDK] can probably determine what difference might result from mxmlc working with this intermediate output, when inline transcoding is 'tagged':
package
import mx.core.FontAsset;
[ExcludeClass]
[Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1189", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
public function AIRZoom_ArnoPro_IT_4()
super();
versus this, when swf extraction is 'tagged':
package
import mx.core.FontAsset;
[ExcludeClass]
[Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1191", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
public function AIRZoom_ArnoPro_IT_4()
super();
The only difference is that value for '_line' which probably only indicates that one of the two processes has a comment or empty line somewhere. -
Setting font style on hover for spark datagrid
I'm trying to skin a Spark datagrid. I have most things sorted by creating a custom skin, but one thing I can't find is how to set the colour of the row's font on hover. I can set the background colour fine, but how would I go about changing the font colour when a user hovers over the row?
ThanksHi
You don’t actually deal with the text that’s displayed in the a datagrid inside of the skin
Look at item renderers for the grid columns. You can style your text or whatever else you would like to display in the grid, in the renderer
Hope that helps a little
If you are still stuck just let me know and I’ll send you some code
Cheers
g
heres some code
NOTE: I am making this up as I sit here so I may be forgetting something. Don’t be surprised if this doesn’t work, but the basic idea is right I think
So in the spark datagrid when you set your column (if you use mxml) this will replace a glob renderer so you can have a different one for each column if you wish.
<s:GridColumn dataField="Status"
headerText="name"
width="37"
itemRenderer="fooRenderer"
/>
Or set a gloabel renderer in the grid def itself
<s:DataGrid itemRenderer=”fooRenderer” />
Then write a custom renderer: fooRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true"
>
<fx:Script>
<![CDATA[
override public function discard(willBeRecycled:Boolean):void
labelData.text="";
super.discard(willBeRecycled);
override public function prepare(hasBeenRecycled:Boolean):void
if(data)
// set the colour of the text label to black
labelData.setStyle("color",0x000000)
// put some logic here to dynamic style the label
//check for the 'format' function on the column (THIS MAY BE WRONG)
if( column.labelFunction != null )
labelData.text = column.labelFunction( data, column );
else
labelData.text = data[column.dataField];
super.prepare(hasBeenRecycled);
]]>
</fx:Script>
<s:Label id="labelData" />
</s:GridItemRenderer -
Questions about Spark DataGrid (Header Font Styles, Header Gradient)
Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios. Not sure where to set them now.
I think that is it for now. From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
BillYou can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin 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:skins="spark.skins.spark.*">
<fx:Declarations>
<!-- See DataGridSkin for other possible parts -->
<fx:Component id="headerRenderer">
<s:CustomGridHeaderRenderer />
</fx:Component>
</fx:Declarations>
</skins:DataGridSkin>
-Kevin -
How to change header font style in Spark DataGrid?
I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- ArturHi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer 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:skins="spark.skins.spark.*"
xmlns:comps="comps.*">
<fx:Declarations>
<!-- Remove fontweight="bold" and other styles as you wish
Must be a component and not a factory. -->
<s:Label id="labelDisplay"
verticalCenter="1" left="0" right="0" top="0" bottom="0"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
showTruncationTip="true" />
</fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin 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:skins="spark.skins.spark.*"
xmlns:comps="comps.*">
<fx:Declarations>
<!-- Must be a factory with the right id for the skin part -->
<fx:Component id="headerRenderer">
<comps:CustomHeaderRenderer />
</fx:Component>
</fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin -
Flex Spark Datagrid - Scalable (font size) with No scroll Bars
I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease.
Is there a way to listen for the size change of the DataGrid?
I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize.
Any suggestions?I've pasted as much code as I can legally can. What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
Else, I tried:
protected function vgroup1_addedToStageHandler(event:Event):void
//stage.scaleMode = StageScaleMode.EXACT_FIT;
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP_LEFT;
scaleX = .5;
scaleY = .5;
/* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
var scaling:Number = 1;
if(width>height)
scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
else
scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
scaleX = scaleY = scaling;
== THIS IS All I can Post ==
<?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:components="components.*"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.xml.SimpleXMLDecoder;
import mx.utils.ArrayUtil;
import mx.utils.ObjectUtil;
import spark.components.ResizeMode;
import spark.effects.Resize;
// Skin Colors
private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
private const ROLL_OVER_COLOR:int = 0x6D9960;
private const SELECTION_COLOR:int = 0x668F59;
private const TEXT_FONT_SIZE:int = 11;
private const TEXT_COLOR:int = 0x080808;
private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
// First column width
private var collectiveFirstColumnWidth:int = 160;
private var collectiveValuesColumnWidth:int = 50;
// XML data
[Bindable] private var portfolioSummary1:XMLList;
[Bindable] private var reconstructedAC:ArrayCollection;
private function convertXmlToArrayCollection(file:String):ArrayCollection {
var xml:XMLDocument = new XMLDocument(file);
var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
var data:Object = decoder.decodeXML(xml);
var array:Array = ArrayUtil.toArray(data);
return new ArrayCollection(array);
private function convertToAC():void {
var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
trace(ObjectUtil.toString(ac1));
//reStructureAC(ac1);
private function restructureXMLIntoHierarchicalAC():void {
private function addProperty(obj:Object, attribute:String, value:String):Object {
var o:Object = obj;
o[attribute] = value;
return o;
protected function httpservice1_resultHandler(event:ResultEvent):void
portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
//dg.dataProvider = new XMLListCollection(portfolioSummary1);
//dg.requestedRowCount = dg.dataProviderLength;
protected function vgroup1_addedToStageHandler(event:Event):void
//stage.scaleMode = StageScaleMode.EXACT_FIT;
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP_LEFT;
scaleX = .5;
scaleY = .5;
/* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
var scaling:Number = 1;
if(width>height)
scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
else
scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
scaleX = scaleY = scaling;
protected function vgroup1_resizeHandler(event:ResizeEvent):void
(event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
<fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
<fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
<s:XMLListCollection id="headXMLListCol"
source="{psr1.children()}" />
<s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
</fx:Declarations>
<s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
<!-- First DataGrid -->
<components:ExpandableDataGrid5 id="dg"
color="{TEXT_COLOR}"
rollOverColor="{ROLL_OVER_COLOR}"
alternatingRowColors="{ALTERNATING_GRID_COLOR}"
selectionColor="{SELECTION_COLOR}"
skinClass="skins.ResizableDataGridSkin"
>
<components:columns>
<s:ArrayList>
<s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
headerRenderer="itemRenderers.HeaderGridItemRenderer"
/>
<s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
/>
<s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
/>
<s:GridColumn id="field4" dataField="dataField4" headerText="Total"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
/>
</s:ArrayList>
</components:columns>
<components:dataProvider>
<s:ArrayCollection>
<fx:Object dataField1="data1" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data3" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data5" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data7" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data9" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data11" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
<fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
</s:ArrayCollection>
</components:dataProvider>
</components:ExpandableDataGrid5>
<!-- Summary Totals -->
<components:SummaryRow >
<s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
<s:Spacer width="100%" />
<s:ButtonBar click="convertToAC()">
<mx:ArrayCollection>
<fx:String>Convert to AC</fx:String>
<fx:String>CPS</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
<s:ButtonBar click="restructureXMLIntoHierarchicalAC()">
<mx:ArrayCollection>
<fx:String>Parse XML</fx:String>
<fx:String>15% POV</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
</components:SummaryRow>
<!-- Second Datagrid -->
<components:ExpandableDataGrid5 id="dg2"
color="{TEXT_COLOR}"
rollOverColor="{ROLL_OVER_COLOR}"
selectionColor="{SELECTION_COLOR}"
alternatingRowColors="{ALTERNATING_GRID_COLOR}"
skinClass="skins.HeadlessDataGridSkin"
>
<components:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1"
itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField2"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField3"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField4"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
</s:ArrayList>
</components:columns>
<s:ArrayList>
<fx:Object dataField1="data16" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
<fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
</s:ArrayList>
</components:ExpandableDataGrid5>
<!-- Summary Totals - values -->
<components:SummaryRow>
<s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
</components:SummaryRow>
<!-- Third Datagrid -->
<components:ExpandableDataGrid5 id="dg3"
color="{TEXT_COLOR}"
rollOverColor="{ROLL_OVER_COLOR}"
selectionColor="{SELECTION_COLOR}"
alternatingRowColors="{ALTERNATING_GRID_COLOR}"
skinClass="skins.HeadlessDataGridSkin"
>
<components:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1"
itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField2"
itemRenderer="itemRenderers.ToolTipItemRenderer"
/>
<s:GridColumn dataField="dataField3"
itemRenderer="itemRenderers.ToolTipItemRenderer"
/>
<s:GridColumn dataField="dataField4"
itemRenderer="itemRenderers.ToolTipItemRenderer"
/>
</s:ArrayList>
</components:columns>
<s:ArrayList>
<fx:Object dataField1="data18" dataField2="data2" dataField3="data3" dataField4="data16"></fx:Object>
<fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
</s:ArrayList>
</components:ExpandableDataGrid5>
<!-- Percent of Tops -->
<components:SummaryRow>
<s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
</components:SummaryRow>
<!-- Fourth DataGrid -->
<components:ExpandableDataGrid5 id="dg4"
color="{TEXT_COLOR}"
rollOverColor="{ROLL_OVER_COLOR}"
selectionColor="{SELECTION_COLOR}"
alternatingRowColors="{ALTERNATING_GRID_COLOR}"
skinClass="skins.HeadlessDataGridSkin"
>
<components:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1"
itemRenderer="itemRenderers.LeftAlignGridItemRenderer" />
<s:GridColumn dataField="dataField2"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField3"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
<s:GridColumn dataField="dataField4"
itemRenderer="itemRenderers.RightAlignGridItemRenderer"
/>
</s:ArrayList>
</components:columns>
<s:ArrayList>
<fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
<fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
<fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
</s:ArrayList>
</components:ExpandableDataGrid5>
</s:VGroup>
</s:Application>
ExpandableDataGrid5.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
selectionMode="singleCell"
variableRowHeight="true"
requestedColumnCount="4"
width="100%"
resizableColumns="false"
creationComplete="thisDatagrid_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
/*import mx.events.ResizeEvent;
[Bindable] private var oldWidth:int;
[Bindable] private var oldHeight:int;
protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
oldWidth = event.oldWidth;
oldHeight = event.oldHeight;
this.invalidateDisplayList();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (oldWidth < width) {
setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
//this.scaleX += .1;
} else if (oldWidth > width) {
setStyle('fontSize', getStyle('fontSize') - 0.5);
//this.scaleX -= .1;
trace('unscaledWidth: ' + unscaledWidth);
trace('unscaledHeight: ' + unscaledHeight);
trace('explicitMinHeight: ' + explicitMinHeight);
trace('explicitMinWidth: ' + explicitMinWidth);
minHeight = measuredMinHeight;
super.updateDisplayList(unscaledWidth, unscaledHeight);
protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
requestedRowCount = dataProviderLength;
requestedMaxRowCount = dataProviderLength;
requestedMinRowCount = dataProviderLength;
minHeight = measuredHeight;
/* protected function datagrid1_addedToStageHandler(event:Event):void
stage.scaleMode = StageScaleMode.SHOW_ALL;
/* stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
]]>
</fx:Script>
</s:DataGrid>
You can Check other ExpandableDataGrids:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
resize="thisDatagrid_resizeHandler(event)"
creationComplete="thisDatagrid_creationCompleteHandler(event)"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
selectionMode="singleCell"
variableRowHeight="true"
requestedColumnCount="4"
editable="false"
width="100%"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
//event.stopImmediatePropagation();
if (event.oldWidth < width) {
setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
//this.scaleX += .1;
} else if (event.oldWidth > width) {
setStyle('fontSize', getStyle('fontSize') - 0.5);
//this.scaleX -= .1;
minWidth = measuredMinWidth;
protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
requestedRowCount = dataProviderLength;
requestedMaxRowCount = dataProviderLength;
requestedMinRowCount = dataProviderLength;
minHeight = measuredMinHeight;
]]>
</fx:Script>
</s:DataGrid>
OR
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
selectionMode="singleCell"
variableRowHeight="true"
requestedColumnCount="4"
width="100%"
resize="thisDatagrid_resizeHandler(event)"
creationComplete="thisDatagrid_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
[Bindable] private var oldWidth:int;
[Bindable] private var oldHeight:int;
protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
oldWidth = event.oldWidth;
oldHeight = event.oldHeight;
this.invalidateDisplayList();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (oldWidth < width) {
setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
//this.scaleX += .1;
} else if (oldWidth > width) {
setStyle('fontSize', getStyle('fontSize') - 0.5);
//this.scaleX -= .1;
trace('unscaledWidth: ' + unscaledWidth);
trace('unscaledHeight: ' + unscaledHeight);
trace('explicitMinHeight: ' + explicitMinHeight);
trace('explicitMinWidth: ' + explicitMinWidth);
minHeight = measuredMinHeight;
super.updateDisplayList(unscaledWidth, unscaledHeight);
protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
requestedRowCount = dataProviderLength;
requestedMaxRowCount = dataProviderLength;
requestedMinRowCount = dataProviderLength;
minHeight = measuredHeight;
]]>
</fx:Script>
</s:DataGrid> -
List as item in spark datagrid
Hi,
Does anyone know how I make a spark datagrid display a list as an item?
The columns need to be dynamicly made as wel as the content of the cells.
How do I do this? Anyone?use itemrenderer to display the listbox or combobox
-
Selection issue with editable Spark DataGrid
Hi everyone,
I am evaluating the new Spark DataGrid and I'm having a very strange issue with the behavior of selection in an editable instance.
Here is my test application: http://www.playcalliope.com/flex/DataGridSelectionIssue.html (code here: https://gist.github.com/1129160)
And here are the steps to reproduce the issue:
select the very first cell at the top-left corner of the grid (the one with "Gabriele");
click on it once more, the editor appears;
now click on the cell just to the right of it (the one with "Genta").
You should see that editing ends as it supposed to do, but selection is placed on the third cell (the one with a 5 in it) instead on the one you clicked on. Playing a little with the grid you should see that this isn't the only case, but selection is really behaving randomly.
I am using SDK 4.5.1.21328.
I think this is a very basic usage case.. I can't believe this is not working properly, what am I missing?
Thanks a lot,
Gabriele Genta
Message was edited to add live exampleYour running into a known bug, https://bugs.adobe.com/jira/browse/SDK-30088.
The bug will be fixed in the Mega release. To work around the bug you can create a custom editor and remove the "dataGrid.validateNow();" call in DataGridEditor.save().
Here's how I modified your example to workaround the bug:
<?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"
backgroundColor="#E7E7E7"
creationComplete="application1_creationCompleteHandler(event)">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
testGrid.dataProvider = new XMLListCollection(testData.item);
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="testData" xmlns="">
<items>
<item>
<id>1</id>
<cognome>Gabriele</cognome>
<nome>Genta</nome>
<uhm>5</uhm>
<bene>molto</bene>
</item>
<item>
<id>10</id>
<cognome>Pinco</cognome>
<nome>Pallino</nome>
<uhm>10</uhm>
<bene>poco</bene>
</item>
</items>
</fx:XML>
<fx:Component className="MyDefaultEditor">
<s:DefaultGridItemEditor>
<fx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.collections.ISort;
override public function save():Boolean
if (!validate())
return false;
var newData:Object = value;
var property:String = column.dataField;
var data:Object = data;
var typeInfo:String = "";
for each(var variable:XML in describeType(data).variable)
if (property == [email protected]())
typeInfo = [email protected]();
break;
if (typeInfo == "String")
if (!(newData is String))
newData = newData.toString();
else if (typeInfo == "uint")
if (!(newData is uint))
newData = uint(newData);
else if (typeInfo == "int")
if (!(newData is int))
newData = int(newData);
else if (typeInfo == "Number")
if (!(newData is Number))
newData = Number(newData);
else if (typeInfo == "Boolean")
if (!(newData is Boolean))
var strNewData:String = newData.toString();
if (strNewData)
newData = (strNewData.toLowerCase() == "true") ? true : false;
if (property && data[property] !== newData)
// If the data is sorted, turn off the sort for the edited data.
var sort:ISort = null;
if (dataGrid.dataProvider is ICollectionView)
var dataProvider:ICollectionView = ICollectionView(dataGrid.dataProvider);
if (dataProvider.sort)
sort = dataProvider.sort;
dataProvider.sort = null;
var oldData:Object = data[property];
data[property] = newData;
dataGrid.dataProvider.itemUpdated(data, property, oldData, newData);
// Restore the sort. The data will not be sorted due to this change.
if (sort)
ICollectionView(dataGrid.dataProvider).sort = sort;
return true;
]]>
</fx:Script>
</s:DefaultGridItemEditor>
</fx:Component>
</fx:Declarations>
<s:DataGrid id="testGrid" width="100%" height="100%"
editable="true" selectionMode="singleCell"
itemEditor="{new ClassFactory(MyDefaultEditor)}">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Prova" dataField="cognome"/>
<s:GridColumn headerText="Prova1" dataField="nome"/>
<s:GridColumn headerText="Prova3" dataField="uhm"/>
<s:GridColumn headerText="Prova4" dataField="bene"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application> -
Intercept value passed to item editor?
Hello! I'm trying to intercept the value that is taken from a DataGrid's GridColumn's itemRenderer and applied to the itemEditor, and vice-versa. I need to be able to format this value. However, my project is complex, so I may be focusing on the wrong idea in what I'm trying to accomplish. Please have a look and let me know if there's something else I could try.
I have a Spark DataGrid component (with ID dg) that I am dynamically populating from XML. I create an ArrayCollection from some nodes, and a regular Array from sub-nodes that is added as a property of the ArrayCollection. That ArrayCollection is then used as the dataProvider for the DataGrid.
Here is an example segment of a typical XML node and it's sub-nodes:
<item name="physOrderTable" text="" type="notes">
<cols>
<col id="0" text="Day/Time" />
<col id="1" text="Order Type" />
<col id="2" text="Physician's Orders" />
<col id="3" text="Physician's Signature" />
</cols>
<rows>
<row id="r0" name="" text="">
<col id="0"><![CDATA[Tues 15:24]]></col>
<col id="1"><![CDATA[General]]></col>
<col id="2"><![CDATA[BMP, CBC, Cardiac Enzymes, ABG, EKG STAT, NS@ 125 mL/hr, Blood Sugar AC & HS, 02 via NC to keep oxygen saturation above 97%]]></col>
<col id="3"><![CDATA[J. Nelms]]></col>
</row>
</rows>
</item>
Here is the code that reads through the XML and utilizes it:
protected function sparkDG_creationCompleteHandler(event:FlexEvent):void
trace("grid created");
var colsList:XMLList = xml.cols.col;
var rowsList:XMLList = xml.rows.row;
colAL = new ArrayList();
for(var i:Number = 0; i < colsList.length(); i++)
var gc:GridColumn = new GridColumn();
gc.maxWidth = 500;
gc.resizable = false;
gc.headerText = String(colsList[i].@text);
gc.dataField = "col";
gc.labelFunction = labelFunc;
colAL.addItem(gc);
for each(var row:XML in XML(value).rows.children())
var rowArr:Array = new Array();
for each(var col:XML in row.children())
if(col == "")
rowArr[Number(col.@id)] = "_";
}else{
rowArr[Number(col.@id)] = col;
colAC.addItem({
rowID: row.@id,
rowName: row.@name,
rowText: row.@text,
col: rowArr
dg.columns = colAL;
dg.dataProvider = colAC;
So I build the header for the DataGrid first, telling it to use the "col" dataField, which corresponds to the .col property of the colAC ArrayCollection. That .col property is the array of values for each cell of that row.
Now this part of code is important, as it displays the relevant index of the .col array by using the .columnIndex:
private function labelFunc(item:Object, column:GridColumn):String
var displayText:String;
var valArr:Array = new Array();
if(column.dataField == "col")
valArr = item[column.dataField];
displayText = String(valArr[column.columnIndex]);
return displayText;
This is the only method I've been able to use to achieve the desired result. This all works fine, if all I want to do is merely display information. But I need to be able to edit the values in each cell, and apply this back to the dataProvider, as I need to rebuild XML with the updated values later.
I have tried everything I can possibly think of to be able to do this. I built my own itemRenderer, then my own itemEditor, then scrapped them because it felt like I was re-inventing the wheel. But was I? I tried reading through the code for the DataGrid, GridColumn, and related classes, but I couldn't find any reference to the itemEditor beyond it being an IFactory. I have no idea where or how it tells that IFactory to be a text input or whatever it is.
Here is my issue:
When I turn on the DataGrid's editing, and double-click a cell, it takes the entire array of the col dataField for that column's cell, converts that array to a string, and displays the entire string in the edit text box. If I cancel the editing, or save the editing, it sets the string to the .col property. Then the labelFunction tries reading that string as an array, and it crashes. I was able to get the typeof the col dataField and converting it to an array if it's a string, but I shouldn't have to.
I need to have it display just the value of the cell for that particular row and column when the instance of the itemEditor is created. When that value is changed, I need it to apply back to that column's index in the .col array of the dataProvider. So, similarly to how it displays information in the labelFunction, I need to edit the information and send it back.
I've seen lots of custom itemEditors and itemRenderers for GridColumns, but these are hard-coded in the MXML. My grid is almost entirely dynamically created, so that's unfortunately not an option for me, as I won't even know how many columns or rows there will be when the DataGrid is created. I tried using rendererIsEditor, but that only seems to be on the MXML instantiation of the GridColumn, as there's only rendererIsEditable in the ActionScript, and it doesn't seem to work (or I don't know how to use it as intended).
If anyone knows of a way to accomplish this, even just something else I should look at, I would greatly appreciate it!Thanks for your response! I had seen that function before, but as there was nothing in it, I couldn't figure out if it was useful. Going back, I looked at the comments. I also found this website about item editors: The Item Editing Process
So, according to that, the data variable will contain the .col property of the dataProvider, right? I can trace data out as an object, but when trying to reference it as an array, it doesn't work.
Also according to that website, data is applied to value before prepare() is called, at which point data becomes a string. Doing this test in prepare(), I find that value is already a string. I can do a split() on the string or whatever to set the value how I need it (I think), but my life would be a lot easier if I could reference the cell's data directly and set value based on that.
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
private var valueArr:Array;
override public function prepare():void
trace("prepare called");
valueArr = new Array(value);
trace("\tdata["+0+"]: "+data[0]);
trace("\tdata["+columnIndex+"]: "+data[columnIndex]);
trace("\tvalue: "+value);
trace("\tvalueArr.length: "+valueArr.length);
value = String(valueArr[columnIndex]);
override public function discard():void
trace("discard called");
valueArr[columnIndex] = value;
value = valueArr;
]]>
</fx:Script>
</s:GridItemEditor>
And once that's accomplished, I believe what I did for discard() there should work correctly. What do you think? -
Datagrid Item Renderer not displaying correct data
I have a datagrid that displays information from a web service, which is refreshed every 60 seconds.
When the status is no 0 for a line a corresponding color is used to fill in the background. I created a Item Renderer to fill in the background color.
When the table is initially created, the colors are correct. After the data is refreshed, then the background color value is carried over to the next row.
The Spark DataGrid works better than the MX AdvancedDateGrid or DataGrid. This was working in Flex 3, but I used an function which replaced the DataGridColumn that doesn't work in Flex 4.
protected function init(event:FlexEvent):void
var showBackground:Boolean = false;
var backgroundColor:uint = new uint();
var labelTextColor:uint = new uint();
var dgListData:DataGridListData = listData as DataGridListData;
var dataGrid:DataGrid = dgListData.owner as DataGrid;
// comment this out if you want to see the background over the
// selection and highlight indicators
if (dataGrid.isItemSelected(data) || dataGrid.isItemHighlighted(data))
// clear the background so you can see the selection/highlight colors
showBackground = false;
return;
switch(data["MessageLevel"])
case 0:
showBackground = false;
backgroundColor = 0xFFFFFF;
labelTextColor = 0x000000;
break;
case 1:
showBackground = true;
backgroundColor = 0x00FF00; // light green
labelTextColor = 0x000000;
break;
case 2:
showBackground = true;
backgroundColor = 0x015F00; // dark green
labelTextColor = 0xFFFFFF;
break;
case 3:
showBackground = true;
backgroundColor = 0xFDFF00; // yellow
labelTextColor = 0x000000;
break;
case 4:
showBackground = true;
backgroundColor = 0x7F6E3F; // tan
labelTextColor = 0xFFFFFF;
break;
case 5:
showBackground = true;
backgroundColor = 0xFF8A00; // orange;
labelTextColor = 0x000000;
break;
case 6:
showBackground = true;
backgroundColor = 0xFFDFE0; // rose
labelTextColor = 0x000000;
break;
case 7:
showBackground = true;
backgroundColor = 0xFF0000; //red
labelTextColor = 0xFFFFFF;
break;
if(showBackground) {
var bgFill:SolidColor = new SolidColor();
bgFill.color = backgroundColor;
dataContainer.setStyle("backgroundColor",backgroundColor);
lblData.setStyle("color", labelTextColor);I added an "else" statement to make sure that a color was always added, even if the level was 0. I also added a backgroundAlpha style to both, to turn the value off or on.
So far, this seems to be the solution.
if(showBackground) {
var bgFill:SolidColor = new SolidColor();
bgFill.color = backgroundColor;
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",1);
} else {
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",0);
Maybe you are looking for
-
[Help] Compile and running a java which uses libraries in linux
I have a java program which has all it's *.java files in the src directory. it uses libraries (e.g. activemq-core-5.1.0.1.jar and commons-logging.jar) stored in a folder called libs which is in the directory level as the src folder. how do i compile
-
After approv status inquiry, it should not allow to change anything .
Hi, As per the client requirement, we have assigned the three level status profile to in inquiry process like Block status, Review and approve status. Block status-It is initial status. After save the document it will be in block status Review status
-
Hi All of a sudden when we tried to restart B2B via opmnctl we got some errors. dys094w004: opmnctl startall opmnctl: starting opmn and all managed processes... ================================================================================ opmn id=
-
OS X Yosemite - latest flash player update stops at 25% or 30%
OS X Yosemite Version 10.10.2 safari Version 8.0.3 Flash player version 16.0.0.296 Have been getting notifications to update my flash player, and when I go onto the adobe site I am able to download the latest file and it runs fine, however it always
-
Since installing version 5, I am now unable to have multiple versions of firefox open at once. The original format is ok but other copies are different I have taken screen prints but cannot see how to send them to you