Change one alternatingRowColor of a spark DataGrid ItemRenderer
Hi,
I try to find a way to change the alternatingRowColor of only one spark ItemRenderer. It depends on a property set in an item in the DataProvider and this property can change at the runtime.
How do to this?
Thx.
Do you mean to say depending on item value in data provider it datagrid row color should change?
If yes then following link can help to solve your issue:
http://butterfliesandbugs.wordpress.com/2011/02/04/changing-the-background-color-of-a-row- using-itemrendererfunction/
Thanks and Best regards,
Pooja Kuber | [email protected] | www.infocepts.com
Similar Messages
-
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 gridColumn itemrenderer binding bug
I hava a TextInput within mx DataGrid gridColumn itemrenderer and binding its text to {data.f1} ,
when I set DataGrid dataProvider column (0,0) to "value1" by actionsript code,
it will update "value1" to TextInput field.
But if I change to spark DataGrid, TextInput Text won't be changed.
Please see below two samples, when user click "set var" button, it set dataProvider column (0,0) to "value1",
sample1 is in mx comopent, it works fine and will update "value1" to TextInput Text.
sample2 is in spark component, it did not work.
anyone can help for spark component ?
many thanks.
*** sample1 (mx componet): ***
<?xml version="1.0" encoding="utf-8"?>
<mx: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"
layout="absolute">
<mx:Button x="235" y="52" label="set var" click="setVar()"/>
<mx:DataGrid id="grid_1" dataProvider="{ia_row}" x="25" y="52">
<mx:columns>
<mx:DataGridColumn dataField="f1" headerText="Column 1">
<mx:itemRenderer>
<fx:Component>
<mx:TextInput text="{data.f1}" width="95%"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="f2" headerText="Column 2"></mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var ia_row:ArrayCollection = new ArrayCollection([
{f1:"a1", f2:"b1"},
{f1:"a2", f2:"b2"}
private function setVar():void{
var t_row:Object = ia_row.getItemAt(0);
t_row.f1 = "value1";
ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</mx:Application>
*** sample2 (spark componet): ***
<?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"
>
<s:Button x="267" y="94" label="set var" click="setVar()"/>
<s:DataGrid id="grid_1" x="55" y="94" width="204" height="139" dataProvider="{ia_row}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="f1" headerText="Column 1" width="120">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:TextInput text="{data.f1}" width="95%"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="f2" headerText="Column 2"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var ia_row:ArrayCollection = new ArrayCollection([
{f1:"a1", f2:"b1"},
{f1:"a2", f2:"b2"}
private function setVar():void{
var t_row:Object = ia_row.getItemAt(0);
t_row.f1 = "value1";
ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</s:Application>sir, I think it does not send CHANGE event to dataGrid, so my suggestion is following:
private function setVar():void{
var t_row:Object = ia_row.getItemAt(0);
Alert.show(t_row.f1);
t_row.f1 = "value1";
ia_row.setItemAt(t_row, 0);
ia_row.refresh();//it is used to dispatch Event if dataprovider was changed. -
Best way to mark data that has changed when it is edited in a spark datagrid?
I am not sure if this is the best way to mark data that has changed (isModifiedClientSide ) when it is edited in a spark datagrid:
<GridColumn width="140" headerText="Margin "dataField="margin" editable="false" editable.editMode="true" >
<itemRenderer>
<fx:Component>
<DefaultGridItemRenderer textAlign="right" background="true" backgroundColor="#ffffff" alpha="1.0" color="#000000" >
<focusOut>
<![CDATA[
this.data.isModifiedClientSide = 1;
]]>
</focusOut>
</DefaultGridItemRenderer>
</fx:Component>
</itemRenderer>
</GridColumn>I tried this but the value commit doesnt't get fired bro:
<GridColumn width="140" headerText="Margin (disabled)" headerText.editMode="Margin (editing)" dataField="margin" editable="false" editable.editMode="true" >
<itemEditor>
<fx:Component>
<DefaultGridItemEditor>
<valueCommit>
<![CDATA[
this.data.isModifiedClientSide = 1;
]]>
</valueCommit>
</DefaultGridItemEditor>
</fx:Component>
</itemEditor>
</GridColumn>
what do you think? -
Spark DataGrid - Turn off separators (grid lines) while using Grid itemRenderer?
I have a spark dataGrid. We have to use an itemRenderer to format numbers and column colors. When I apply a Data Grid Skin to remove the separtors (grid lines), the grid lines remain? It seems you can't have an itemRenderer and a Grid Skin at the same time ?? That sounds kind of foolish, however that's what I'm seeing?!?!
So, how can I get rid of the grid lines (separators) while using itemRenderers as well?See http://forums.adobe.com/message/3795887.
-
Want to implent CheckBox for itemRenderer and headerItemRenderer for spark DataGrid.
I am using mx:DataGrid in my application.
The first column itemRenderer and headerItermRenderer is CheckBox.
Now I want to move it to spark DataGrid. I could imprement itermRenderer easily by creating sub-claassing GridItemRenderer. But I am struck at implementing headerItermRenderer. I tried to implent it using GridItemRenderer sub-class as I did with itemRenderer. It is not working. The set data method is not getting called.
Do anyone have code for implenting checkbox as itemRenderer and headerRendere in spark datagrid (and not mx datagrid)?
Thanks,
Prithvee Zankat.Hi,
Item renderer can be implemented for spark and i think you will have to write custom header renderer. I am providing some useful links,please go through them :
http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff3.html
http://cookbooks.adobe.com/post_3_state_checkbox_for_header_renderer_in_datagrid-18900.htm l
http://blogs.adobe.com/aharui/category/item-renderers
http://boardreader.com/thread/Spark_Datagrid_custom_header_renderer_1zw07Xgoeo.html
Thanks and Regards,
Vibhuti Gosavi | [email protected] | www.infocepts.com -
Spark Datagrid Selection change Event
starting to work with the spark datagrid.
I want to send off a web service using the values of a row right after they get done editing the row and leave it.
No more change event that I can see like MX and gridItemEditorSessionSaveHandler kicks on every tab between cells
if I use event.currentTarget.selectedItem
Selection Change gives me the new row.
Selection Changing only kicks with mouse row changes not tabs
Suggestions?
I want to register the row with both mouse (on a numeric stepper) and tab(for text fields) events.
Thanks
Dan PrideHi Dan,
Try valueCommit event handler, but I'm not 100% sure that is triggered upon dataProvider data changes.
Another way is to listen for changes in the dataProvider variable. -
How to change the header text fontFamily of spark DataGrid?
I use an embed font (Nunito-Light.ttf), and i can set the font of GridColumn to Nunito-Light in DataGrid , but it seems that it has no effect to the header of DataGrid.
and then I create a headerRenderer for spark DataGrid, and try to set the fontFamily of "labelDisplay" to Nunito-Light , but It seems still no effect .
If I set the fontFamily of "labelDisplay" to "Verdana" or "Arial" , it has effect , so strange! Is that a bug?
Anybody has the same problem? Please tell me how to solve it ,thank you very much!Hi,
Please go through following link :
http://forums.adobe.com/thread/870081#870081
Thanks and Regards,
Vibhuti Gosavi | [email protected] | www.infocepts.com -
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 -
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> -
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. -
Extending a component which already extends a spark list ItemRenderer
Hello everyone,
I have the following situation: Im displaying lists of very similar data objects (they extend the same parent) so in order to avoid a lot of changes to many itemrenderers (if i need to change something in the common properties) when displaying this data, i defined a spark list ItemRenderer (in MXML) which displays the common properties (file called BaseRenderer.mxml):
<s:ItemRenderer>
//in the script section i override the set data property
//some MXML labels, checkboxes, etc
</s:ItemRenderer>
Then i created a specific itemrenderer which extended it (file SpecificRenderer.mxml):
<model:BaseRenderer>
//again i override the set data property
//some ADITIONAL MXML labels, checkboxes, etc
</model:BaseRenderer>
When i run the app, and when the specific renderer is used, it works (no errors are thrown) , but it only shows the content of specific renderer, nothing from base renderer is visible. Is this the right way to do this, or do i have to override some additional stuff in my specific renderers?
Thank you.
One more thing, i just noticed, if i remove all MXML tags from specific renderer, the content from base renderer becomes visible, seems as if specific content overrides base content. Is there a way to add mxml tags into the specificrenderer?Yes i suspected them to be merged, and you gave me a great idea. As you say this behavior is true across all mxml defined components, not just itemrenderers. I want to avoid actionscript renderers because i dont (and wont) have any performance issues anyway and i like flexibility in design view, so instead i found another solution which i slightly modified. Some spark components inherit property mxmlContent, which you can override. This is what i came up with in the end: I added the property override into specific renderer and everything is shown as expected (because base elements are merged with the ones from extended component).
override public function set mxmlContent(value:Array):void {
var adding:Boolean = true;
var index:int = 0;
while (adding) {
var element:IVisualElement = null;
try { element = super.getElementAt(index); } catch(e:Error) { }
if ( element != null ) {
value.push(element);
index += 1;
else
adding = false;
value.reverse();
super.mxmlContent = value; -
Flex Spark DataGrid BUG skipping rows on refresh
I have a small one file example that demonstrates this Flex DataGrid bug.
I tried to report it to Flex bugs and the page timed out.
I am filling a column in a spark datagrid with checkboxes to select that row.
In the header of that column is a checkbox to select ALL the rows.
However, the middle row is not getting refreshed so the display is wrong.
The checkbox looks empty when the backing value is correct.
I have added a print to the code that sets the values in the data and it is setting everyone.
But when I print the isSelected code it is NOT being called on ONE (the middle) visible row.
If I move away or scroll up and down the check box shows the check mark.
So My only conclusion is that refresh has a bug.
Here is the example that demonstrates the problem.
Simply select the header checkbox and the 3rd checkbox does not get updated on refresh.
<?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:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private static var values:Array = [
{selected: false, position: 1},
{selected: false, position: 2},
{selected: false, position: 3},
{selected: false, position: 4},
{selected: false, position: 5}
[Bindable]
public static var datalist:ArrayCollection = new ArrayCollection( values );
public static function updateDataList( value:Boolean ):void
for each( var item:Object in datalist ) {
trace( "updated: " + item.position );
item.selected = value;
datalist.refresh();
]]>
</fx:Script>
<s:DataGrid dataProvider="{datalist}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="position" width="200"/>
<s:GridColumn width="34" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer textAlign="center">
<fx:Script>
<![CDATA[
private function changeSelection( data:Object, event:MouseEvent ):void
data.selected = ! data.selected;
private function isSelected( data:Object ):Boolean
trace( "isSelected: " + data.position );
return data.selected;
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:CheckBox id="selbox" label="" selected="{isSelected(data)}"
click="changeSelection(data, event)"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:headerRenderer>
<fx:Component>
<s:GridItemRenderer height="30">
<fx:Script>
<![CDATA[
[Bindable]
private static var selectAll:Boolean = false;
private function changeAllSelection( event:MouseEvent ):void
selectAll = ! selectAll;
Main.updateDataList( selectAll );
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:CheckBox label="" selected="{selectAll}"
click="changeAllSelection(event)"/ >
</s:GridItemRenderer>
</fx:Component>
</s:headerRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
Here is an image of the failed result... after selecting the top checkbox.
Below is an image of the output produced by the two traces.
Notice that the refresh has not called isSelected on the 3rd element.I have a small one file example that demonstrates this Flex DataGrid bug.
I tried to report it to Flex bugs and the page timed out.
I am filling a column in a spark datagrid with checkboxes to select that row.
In the header of that column is a checkbox to select ALL the rows.
However, the middle row is not getting refreshed so the display is wrong.
The checkbox looks empty when the backing value is correct.
I have added a print to the code that sets the values in the data and it is setting everyone.
But when I print the isSelected code it is NOT being called on ONE (the middle) visible row.
If I move away or scroll up and down the check box shows the check mark.
So My only conclusion is that refresh has a bug.
Here is the example that demonstrates the problem.
Simply select the header checkbox and the 3rd checkbox does not get updated on refresh.
<?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:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private static var values:Array = [
{selected: false, position: 1},
{selected: false, position: 2},
{selected: false, position: 3},
{selected: false, position: 4},
{selected: false, position: 5}
[Bindable]
public static var datalist:ArrayCollection = new ArrayCollection( values );
public static function updateDataList( value:Boolean ):void
for each( var item:Object in datalist ) {
trace( "updated: " + item.position );
item.selected = value;
datalist.refresh();
]]>
</fx:Script>
<s:DataGrid dataProvider="{datalist}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="position" width="200"/>
<s:GridColumn width="34" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer textAlign="center">
<fx:Script>
<![CDATA[
private function changeSelection( data:Object, event:MouseEvent ):void
data.selected = ! data.selected;
private function isSelected( data:Object ):Boolean
trace( "isSelected: " + data.position );
return data.selected;
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:CheckBox id="selbox" label="" selected="{isSelected(data)}"
click="changeSelection(data, event)"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:headerRenderer>
<fx:Component>
<s:GridItemRenderer height="30">
<fx:Script>
<![CDATA[
[Bindable]
private static var selectAll:Boolean = false;
private function changeAllSelection( event:MouseEvent ):void
selectAll = ! selectAll;
Main.updateDataList( selectAll );
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:CheckBox label="" selected="{selectAll}"
click="changeAllSelection(event)"/ >
</s:GridItemRenderer>
</fx:Component>
</s:headerRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
Here is an image of the failed result... after selecting the top checkbox.
Below is an image of the output produced by the two traces.
Notice that the refresh has not called isSelected on the 3rd element. -
Spark DataGrid with Dynamic Column Width
Lets suppose I have a Spark Datagrid with no explicit typicalItem. When the Datagrid is initialized, the column widths are calcualted correctly based on the contents of the dataprovider. However if I add/remove an item from the dataprovider, or modify the one of the objects in the dataprovider, the column widths never update to reflect the change. Is the the correct behavior for a DataGrid? If so, is there any method I can call to force the DataGrid to recalculate and redraw the column widths?
When Spark DataGrid doesn't have a typicalItem, it uses the first dataProvider item as the typicalItem. If you change that, the DataGrid won't pick it up immediately. You can invalidate the current typicalItem using dataGrid.invalidateTypicalItem().
-
Datagrid itemRenderer dynamic values
While working on an application I came across the following
problem. I've got a view with a datagrid, where I have several
columns. Each column needs 2 values displayed beneath each other in
one cell. You make an itemRenderer with 2 labels inside a VBox.
Easy so far. However since this scenario repeats several times it
seems counterproductive to make an itemRenderer for each cell. How
can I make the text property for the labels change for each cell
instead of being static in their values.
Thx in advance.Your description of your requirements and your sample code do
not paint a clear enough picture.
Your dataProvider has 4 pieces of data: batchId,
bookingNumber, valueDate, immsBranch. Your current itemRenderer
references two of those pieces of data, and you say you want to
reference the other two. You can do that easily like this:
<mx:Label text="data.valueDate"/>
<mx:Label text="data.immsBranch"/>
A basic question: will your DataGrid have two rows for each
set of 4 pieces of data? If so then I understand your problem. If
not, then you must clarify exactly how and when you would like the
4 pieces of data shown in your DataGrid.
In any case, you probably need a Repeater, and then need to
figure out how to get at the right data at the right time in the
Repeater.
See this FB 3 help topic and its sub-topics:
Dynamically Repeating Controls and Containers
Also search for this in the FB3 help to see the API:
mx.core.Repeater
You can define a listener for the Repeater for the Repeat
event to specify processing for each iteration of the
repeater.
Maybe you are looking for
-
Problem with DATATYPES, in a UNION
Hello, I m trying to disply a custom message when no data found using the below structure. Unfortunately I ve got a problem with the datatypes I m trying to union I ve tried various datatypes in the 2nd SELECT but the problem remain. Please help. SEL
-
My playlists do not sync properly with my iphone
I have playlists in iTunes, which is fully up-to-date, on my 4 month old MBP. When I sync these playlists with my iPhone 4 (iOS 5.01), the playlists are incomplete on the iPhone. For some reason, some of the songs are missing in the playlists, though
-
Internal Hard Drives for Apple Mac Pro
Hello there, Does any one have some advice on the following internal HDs. I am in Germany and this is what I have found that I am interested in. I just don't know if they all are for Apple Mac Pro because the provider doesn't specify. 1) HD 1000GB We
-
In service purchase order, value are different in status tab and when doing service enrty sheet
please check the value 170360 4080 both are different why?
-
We are looking for two programmers to support an existing Oracle iLearning project in Huntsville, AL area. Please call me at 248.851.8877 or email me via [email protected] We do offer referral for successful placement. This is direct hire position wi