Spark DataGrid row padding
Hello guys,
Could someone advise how to control top/bottom padding of rows in the Spark DataGrid control?
I need to "squeeze" the rows a bit. I use the default item renderer.
Thanks in Advance!
Regards,
Dinko
Hi Dinko,
There are two ways to accomplish this:
1) Use a custom GridItemRenderer with a Label and adjust the padding that way. Note that this will be less performant when compared to the default renderer. For example:
<s:DataGrid>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer clipAndEnableScrolling="true">
<s:Label text="{label}" left="5" right="5" top="2" bottom="2" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGrid>
2) Make your own version of DefaultGridItemRenderer and adjust the LEFT_PADDING, RIGHT_PADDING, TOP_PADDING, and BOTTOM_PADDING constants to what you would like them to be. This is slightly more complicated because you will need copy, paste, and clean up a lot of code. However, I did some of the work for you in the attachment (CustomDefaultGridItemRenderer.as). You just need to change the package, specify it as the item renderer on your DataGrid and change the padding values. Also, there's a bug for this here: https://bugs.adobe.com/jira/browse/SDK-28411.
I would go with number 1 for ease of use. The performance degradation shouldn't be too much for most use cases. Hope this helps.
-Kevin
Similar Messages
-
Trying to use a DataGrid to display two columns of data.
However, there is a lot of space between the rows making this
rather unattractive. Any thoughts or ideas?
<mx:DataGrid x="10" y="10" borderStyle="none"
sortableColumns="false" selectable="false" showHeaders="false"
fontSize="12" color="#000000" fontWeight="normal" width="392"
height="207">
<mx:dataProvider>
<mx:Object Label="Manufacturer" Value="General
Mills"/>
<mx:Object Label="Category" Value="Cereal breakfast
foods"/>
<mx:Object Label="Description" Value="Toasted whole grain
oat cereal with kid-friendly ring shape"/> <!-- with
kid-friendly ring shape -->
<mx:Object Label="Quantity" Value="425 g Box"/>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Label" headerText=""
textAlign="left" width="115"/>
<mx:DataGridColumn dataField="Value" headerText=""
textAlign="left" wordWrap="true"/>
</mx:columns>
</mx:DataGrid>"Phrankie" <[email protected]> wrote in
message
news:go4tgo$jra$[email protected]..
>
quote:
Originally posted by:
ntsiii
> Did you look for that word ("padding") in the DataGrid
docs? Combine that
> with rowHeight, and I think you will be good to go.
>
> Tracy
>
> Nor have I found a way to lessen the distance between
the text baseline
> and
> the gridline directly below, but I sure would like to!
The datagrid rows
> are
> excessively tall in a number of my projects.
>
> Flex/CSS padding doesn't conform entirely to the normal
HTML/CSS since of
> the
> term. For instance, paddingBottom has a fixed lower
display limit, while
> paddingTop has no limitation.
>
> Additionally, some sort of inheritance causes my CSS
datagrid padding
> styles
> to affect the datagrid rows AND the header ... even when
I add a
> headerStyle
> with its own distinct padding values.
>
> This CSS works as expected, though originally I would
have expected that
> these
> padding values would not affect the header:
>
> DataGrid {
> paddingBottom: 10;
> paddingBottom: 10;
> headerStyleName: "mydataGridHeaderStyle";
> }
>
> /* However the follow declaration does NOT style the
datagrid?s header
> padding
> independently */
>
> .mydataGridHeaderStyle {
> paddingBottom:2; /*no effect */
> }
>
> Given the following declarations the heading responds as
expected ... but
> the
> datagrid rows only honor paddingTop.
>
> DataGrid {
> paddingTop: -4;
> paddingBottom: -5;
> }
>
> Perhaps the datagrid row refuse to honor negative
values, whereas the
> header
> complies.
>
> A little perplexed here.
>
> Suggestions?
That might be another manifestation of this:
http://flexdiary.blogspot.com/2008/06/using-css-typeselector-with.html
HTH;
Amy -
I'm trying to change the style of spark datagrid rows based on data, I've found examples about itemrenderer and columns, but they doesn't fit in this case.
I'm looking for a method to change font (weight, size, color) and background based on data value: if the data in column X is equal to Y, change all the row style to...So, are you saying you want to change the font of a particular row when its data object is a certain value?
I would have a custom renderer with an overridden prepare method. In the prepare method, you can check the data and adjust the labelDisplay accordingly. -
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 - Show all rows using requestedRowCount & variableRowHeight=true
I have a Spark Datagrid that has variableRowHeight=true. I also have the requestedRowCount set to the length of the dataProvider. So, in theory the rows shown should be the same number in the dataprovider(Arraycollection). However, the problem is that due to having variableRowHeight=true and some rows being multiline, in some instances, all of the rows are not getting shown.
Suggestions on how I can fix this issue?
Thanks, in advance.Does anyone have a solution for this? I have exactly the same problem.
Datagrid with requestedRowCount="-1" and variableRowHeight="true"
No issue with autoexpanding the grid - and no issue with autoexpanding the row height with word-wrapped text.
But when combined - a grid that has 5 elements in dataprovider will only show 3 - if one row has been expanded to handle the word-wrapped data.
Is it possible to count the rowheights and override the measure function with minheight or measuredminheight?
Or do I need to call something other than invalidateDisplayList after dataprovider changes?
Any suggestions or sample code would be welcomed. -
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. -
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 -
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 -
Spark datagrid not behaving properly (maybe states bug)
I am using this as the renderer in my Spark datagrid, however the modified state is getting set when I hover over the row. I've set breakpoints in the set data funtion to see if this is being called, but it is not,
the code currentState = "modified"; is being called out side of the set data function but I have not written that code anywhere !!!
<?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"
currentState="unmodified">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
if(data){
if(this.data.isModifiedClientSide){
currentState = "modified";
else{
currentState = "unmodified";
]]>
</fx:Script>
<s:states>
<s:State name="modified"/>
<s:State name="unmodified"/>
</s:states>
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill><s:SolidColor color.modified="0xddddff" color="0xFFffff" /></s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="0" bottom="0" includeIn="modified">
<s:stroke >
<s:SolidColorStroke color="0x000099" weight="1">
</s:SolidColorStroke>
</s:stroke>
</s:Rect>
<s:VGroup horizontalAlign="center" verticalAlign="middle" top="0" left="0" right="0" bottom="0">
<s:Label text="{data.margin}">
</s:Label>
</s:VGroup>
</s:GridItemRenderer>Thanks for the reply CodeMata!
I'm trying to manage the view transitions (whether it slides left or right) based on the current view and which button is pressed. The below code snippet is the handler for a button who's id is "transactionsButton", and corresponds to the transaction view. There are three buttons total, the layout is as follows:
| processTransactionButton | transactionsButton | settingsButton |
When the user is in the ProcessTransaction view and clicks on the transactionsButton I want it to slide left, but if they are at the Settings view I want it to slide right.
Here is the handler for the transactionsButton (the commented out line is where I'm having trouble!!!):
protected function transactionsButtonHandler():void
if (!(navigator.activeView is views.Transactions))
if (navigator.activeView is views.ProcessTransaction) {navigator.pushView(views.Transactions);}
else if (navigator.activeView is views.Settings)
navigator.popView();
//navigator.pushView(views.Transactions, null, SlideViewTransition("right"));
navigator.pushView(views.Transactions); -
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 -
I'm working with the new Spark DataGrid, and I understand it's still a work in progress. I've also created a bug in the Adobe bug system. However, I want to be sure that I'm not overlooking something.
Here is an example that illustrates the issue. If I create an itemRenderer for a column in a dDtaGrid, it takes 2 clicks to trigger the click event and 3 clicks to trigger the doubleClick event, if you click on the column with the itemRenderer. This happens about 95% of the time. Occasionally, it works as expected, but that's a rarity. So the question is, am I doing something wrong in the use of itemRenderers.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:DataGrid x="33" y="57" requestedRowCount="4" textAlign="center" click="Alert.show('Clicked')">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Name" width="75">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{data.dataField1}" left="5" paddingTop="10" paddingBottom="5"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column2" width="75"/>
<s:GridColumn dataField="dataField3" headerText="Column3" width="75"/>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="John" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="Ryan" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="Kyle" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="Edward" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid></s:Application>I have approximately the same problem : I want to listen double click (doubleClick or gridDoubleClick) on a spark datagrid.
The double click event is always dispatched when I double-click on a column whose item renderer is a textArea (even with doubleClickEnabled=false).
The double click event is SOMETIMES dispatched when I double-click on a column whose item renderer is an image or a label :
1. When I double-click for the first time on the label renderer : it gives focus to datagrid and select item but does not dispatch doubleClick
2. When I double-click on the textArea colum, then on the Label column of the same row, doubleClick is well dispatched
3. When I double-click on the textArea colum, then on the Label column of a different row, doubleClick is not dispatched
4. when I double-click on the label column after double-clicking on another row in the Label column, doubleClick is well dispatched
I think it's the same behaviour with simple click event.
Do you think spark datagrid is not stable enough and we should use mx datagrid instead ?
Here is the code :
<s:DataGrid dataProvider="{arrayCollection}" doubleClickEnabled="true" doubleClick="trace(event)" gridDoubleClick="trace(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{data.label}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:TextArea text="{data.label}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid> -
Spark datagrid that shows the new value and that it previously was
Im trying to create a item renderer for a spark datagrid that shows the new value and that it previously was and I am comparing in the set data, the problem I am having is that in teh set data I am frequently getting data from other rows (I know this because of virtual renderders), it there a way round this?
<?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"
currentState="unmodified">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
if(data){
if(super.data.margin != value.margin && super.data.margin){
oldValue.text = '(' + super.data.margin + ')';
}else{
oldValue.text == '';
super.data = value;
stroke.visible = false;
fillRect.visible = false;
if(data){
if(this.data.isModifiedClientSide){
currentState = "modified";
fill.color = 0xddddff;
stroke.visible = true;
fillRect.visible = true;
else{
fill.color = 0xffffff;
stroke.visible = false;
currentState = "unmodified";
fillRect.visible = true;
]]>
</fx:Script>
<s:states>
<s:State name="modified"/>
<s:State name="unmodified"/>
</s:states>
<s:Rect top="0" left="0" right="0" bottom="0" id="fillRect" >
<s:fill><s:SolidColor id="fill" color="0xFFffff" /></s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="0" bottom="0" id="stroke">
<s:stroke >
<s:SolidColorStroke color="0x000099" weight="1" >
</s:SolidColorStroke>
</s:stroke>
</s:Rect>
<s:HGroup horizontalAlign="center" verticalAlign="middle" top="0" left="0" right="0" bottom="0" paddingRight="5">
<s:Label text="{data.margin}" width="50%" textAlign="right">
</s:Label>
<s:Label id="oldValue" color="0xff0000" width="50%" textAlign="right">
</s:Label>
</s:HGroup>
</s:GridItemRenderer>If I recall correctly, you are talking about the default start page. To check if this is correct, type '''about:home''' in the awesome bar. If this is the same as your homepage, it will still be there when you update.
-
In Flex I used to use the dataGrid.scrollToIndex(XX) to scroll down to a selected row.
I can't seem to get anything to work for the Spark DataGrid in FB4.5. Searching around I tried to impliment this:
dataGrid.ensureCellIsVisible(selectedSlideIndex);
dataGrid.setSelectedIndex(selectedSlideIndex);
The selectedSlideIndex is set when a row is selected to store the int.
I can't get the DataGrid to scroll to the index, OR select the index..
So what is the Spark DataGrid version of the MX DataGrid.scrollToIndex?Try the ensureCellIsVisibleMethod
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DataGr id.html#ensureCellIsVisible()
http://flexonblog.wordpress.com/2011/05/30/tips-on-spark-list-control-and-spark-datagrid-c ontrol/
Hope this helps. -
Where does one look to find examples on the Spark DataGrid? I know its bleeding edge but I can't find much info on how to use it.
Specifically, I have two arrays: One with the column data such as [['name', 'string'], ['age', 'int']] and another with row data, such as [[dave, 30], [ray, 29], [jason, 25], [sara, 30]].
I'd like to have a datagrid bound to these arrays, but not sure how. I'm building a dynamic data browser and it would help to have some info around setting columns dynamically. I played around with creating one array, and giving it objects such as columns, and rows with the data outlined above. Thats not helping either.
THanks for any direction,
DThanks Peter,
I should have been more clear the data/arrays that I am using are brought back from a separate class asynchronously:
var tableName:String = event.currentTarget.selectedItems[0];
tableMap[tableName] = {};
controller.getTableInfo(tableName, function(data:Array):void
tableInfo.source = data.map(function (element:RowData, index:int, array:Array):String {
return element.getColumnAsString(1) + " (" + element.getColumnAsString(2) + ")";
tableMap[tableName].label = tableInfo;
dataGrid.columnHeaderBar.labelField = "label";
controller.selectAll(tableName, function(data:Array):void
tableMap[tableName].data = data;
dataGrid.dataProvider = new ArrayCollection(tableMap[tableName].data);
Right now I am close, but the column headings all say [object GridColumn]
thanks -
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.
Maybe you are looking for
-
Facing a problem while running a application on a sever
Hi All, When i am trying to run anapplication via Webdynpro it is throwing an error saying "<b></b>Page can not be displayed" What could be the possible reason of error? I will appreciate your quick reponse.
-
Blueprint graphic attributes - Global setting possible?
Within the blueprint graphic tab, an automatic graphic (EPC) is created. On this graphic you then can set three attributes, e.g. show arrowheads or show interface icons. I want this setting to be done for the whole blueprint in order to have a standa
-
Hi, There is a screen (3140 function group CRM_TSRV_UI) which has got field one with 'CRMT_3140_TSRV_UI-OBJECTIVE' which is assigned to data element CRMT_OBJECTIVE. This data element 'CRMT_OBJECTIVE' has the length of 3 character and so does the dom
-
E CESS AND SH ECESS CONDITIONS
Dear Experts, I have to develop one pricing procedure for import process.The conditions are as follows. MATERIAL COST :100 P&F 3% : 3 103.00
-
How to identify a One time Customer in Oracle Apps AR
Hello, How to identify a One time Customer In Oracle APps AR? Is it possible to find out how many number of transactions a Customer does so that, if the number of transactions is 1, then that customer is a one time customer. or else he is not? Thank