Spark Datagrid: Styling the Header?
Hi,
Question for all the Spark and Datagrid gurus out there:
How can I change the text style of the spark datagrid header? For example, I want to make it blue with underlines. More importantly I need to change the color on rollover and/or selection.
Second, how can I change the sort indicator/icon? I'd like to substitute the up/down triangle with a graphic image or other mxml object.
I've searched the net high and low, but haven't yet found answers to the above questions. Is there documentation for such things, or is a bunch of custom code required?
Within the DefaultGridHeaderRender (which I've duplicated), I did find the "labelDisplayGroup" and the "sortIndicatorGroup". But how can these be customized?
Thank you very much for any advice or help. Regards,
dana.
Thank you Kevin for the reply.
Ideally we'd like to be able to clearly indicate to the user which column is selected. With the default skin, the background color for the header renderer is used to indicate currently selected column. However in the current design I'm working with, the background needs to be transparent. So the goal is to indicated which header is selected by changing the header text color. My hope was that whatever controls when the sort indicator and the background color change was also easily accessible. But I can't find a way to leverage the existing controls to know when a column is selected.
It sounds like instead I should write and append my own column selection control mechanism and/or events, which I can then use to change the text color.
In the future it might be nice to have a "selected" state for header renderers, like the rest of the datagrid items, to make it easily to program for and separate out the 'view' a bit more. (Unless of course this already exists, and I'm just missing it.)
Thanks for your replies,
dana.
Similar Messages
-
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); -
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> -
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 -
How to include a custom bkgd in the spark datagrid header
I have a CustomDatagridSkin.mxml, which is based upon the default DataGrid.
I'm looking at the code, and I'm a noob, trying to make heads or tails out of it. If I could just figure out how to change the header color I would be happy. But what I'd really like to know is how to apply a graphic to the background of the header.
Is there some example on the net that I can follow, because I'm having a hell of a time finding something useful.
The demo that Deepa had was awsome (corkboard and postit notes looking thing).
How was that done?
Thanks
KristinHi,
Do you want a custom background for the entire header bar? or for each individual header renderer? I would take a look at the DefaultGridHeaderRenderer class to see how we do headers. These header renderers are used by the GridColumnHeaderGroup to create the column headers. You can modify it to have your own custom background graphic. If you just want to tweak the color, you can apply the chromeColor style to the DataGrid.
I can try to cook up an example for you when I have a bit of time, but not at the moment. Hope this points you in the right direction.
-Kevin -
How to resize the spark datagrid collumns based on the headertext?
Hi friends,
I am using spark datagrid for displaying the tablur data in my application, when i setting the dataprovider property of the datagrid, it displays the content exactally what i expeceted.
but the widht of the collumns are based on the content of the dataprovider, i am not able to see the full collumn name in the datagrid's header. I want to display the full collumn name to the users without setting the collumn width explicitly because the data are dynamically returned from the server. could you pls give me some ideas to acheive this...?
Thanks in advance.Hi Karthikeyan Subramain,
You can make use of typicalItem proberty to set the column width.
Here is the link for sample code which uses typicalItem:
http://butterfliesandbugs.wordpress.com/2011/03/08/its-a-best-practice-to-size-a-spark-dat agrids-columns-with-a-typicalitem/
Hope this will help you
Thanks and Best regards,
Pooja Kuber | [email protected] | www.infocepts.com -
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 -
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 -
Header Width for a Spark DataGrid
I recently replaced an mx:DataGrid in one of my components with the new spark DataGrid and I noticed that the columns were so narrow that most of the header labels were unreadable. I eventually figured out that the spark datagrid was basing the column width on the length of the longest displayed item in the contents. So for example, if the column is showing state abreviations, the header would only show the first two or three letters of the header text and the rest would be truncated. What I need to know is whether there is some way to reverse this behavior. I want the width of each column to be based on the length of the header text, not the content data.
I know the 'recommended' way of setting column width is with a typical item, but in this case that's not an option. I also tried creating a custom DataGridSkin that sets the minWidth property of the headerRenderer but it had no effect. I'm pulling my hair out trying to get this to work, any help would be much appreciated.Actually, when I took a closer look at the stack trace I was able to figure out the problem. It turns out that the problem with the typicalItem was being caused by a labelFunction on one of my columns. The label function was expecting to see the DTO object as it's first parameter. In the process of setting up the typicalItemRenderer, the grid column was calling itemToLabel with the typicalItem causing a class cast expection.
I was able to resolve that issue but now I'm seeing another one. The typicalItem I creat isn't having any effect of the width of my datagrid columns. The problem is, GridColumn doesn't have an itemRendererFunction set by default. The itemToRenderer function of GridColumn only uses the typicalItem if there is an itemRendererFunction defined. Is that the intended behavior? If so, the documentation really needs to mention that fact somewhere.
It looks like the typicalItem is actually getting applied somewhere, I just didn't have long enough string to see the effect. I'm still curious though, if not in the itemRendererFunction, what Class/function is actually responsible for taking the widths from the typicalItem and applying them to the columns? -
Playing with the spark datagrid
I'm Playing with the spark datagrid and have a column set up like so:
<GridColumn width="140" headerText="Margin" headerText.editMode="Margin (editing)" dataField="margin" editable="false" editable.editMode="true" itemRenderer="gridColumnRenderer" >
</GridColumn>
I would like the item render to change colour based on the state of the outerDocuent, is this possible?
I tried this but can't get to the outerdocument
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data.margin}" backgroundColor="{ outerDocument.currentState =='editMode'?0xffffff:0xdddddd}"/>
</s:ItemRenderer>I believe you will need to use GridItemRenderer instead of ItemRenderer as your base class for renderers in the spark DataGrid. Does it work if you change to that?
-
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.
-
What is the point of [Bindable("selectionChange")] in parts of the spark datagrid class?
I dont understand the point of this code in the spark datagrid class:
what is the point of this:
[Bindable("selectionChange")]
[Bindable("valueCommit")]
[Inspectable(category="General", defaultValue="null")]
in
// selectedItem
[Bindable("selectionChange")]
[Bindable("valueCommit")]
[Inspectable(category="General", defaultValue="null")]
* @copy spark.components.Grid#selectedItem
* @default null
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 2.5
* @productversion Flex 4.5
public function get selectedItem():Object
if (grid)
return grid.selectedItem;
return (dataProvider && (selectedIndex > 0)) ?
dataProvider.getItemAt(selectedIndex) : undefined;
* @private
public function set selectedItem(value:Object):void
if (grid)
grid.selectedItem = value;
else
var f:Function = function(g:Grid):void
g.selectedItem = value;
deferredGridOperations.push(f);Anything that is binding to selectedItem will go get the value again when either of those events fires.
-
Can I create a custom scrollbar for my spark datagrid
Basically I'm trying to customize the look of my spark datagrid.
I'd like to change the header appearance and I'd also like to create a custom scrollbar.
If only Catalyst would implement a custom datagrid component. I mean the datagrid is a very popular component, isn't it?
Thanks
kristinYou need the password for free apps as well as for paid apps. The only ways that you can control what your child downloads is for you to supervise while the downloading is taking place or by totally restricting download apps with restrictions.
When you enter your password and download content, you have 15 more minutes to continue downloading before you have to enter the password again. So if you download and app - then give the iPad to your child - he or she can continue downloading apps or music or any content for the next 15 minutes without any restrictions. IF you sign out of your account, then the child can no longer download. IMHO - You should NOT give your password to your child. That really is not a good practice.
You can set restrictions on the iPad so that the child cannot download any apps at all. Go to Settings>General>Restrictions>On. Then you will have to enter a passcode for the device which you do not want to forget (if you do, you have to restore the device) so if you do this remember your passcode. You can then go to the apps settings within the restrictions and Enable Restrictions and turn off Installing Apps.
This article will provide more information for you.
http://netsecurity.about.com/od/frequentlyaskedquestions/a/How-To-Setup-Parental -Controls-On-An-Ipad-Ipod-Touch-Or-Iphone.htm -
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. -
Datagrid styling in Flashbuilder
Hey everyone,
I have some issues styling a Datagrid with Flashbuilder.
My problem is skinning the Datagrid. I wan't to have the Datagrid transparent, which I used to achieve by setting backgroundAlpha="0" and alternatingItemColors="{[]}" in Flexbuilder. This doesn't work when the compiler uses the Spark Theme. The thing is I don't want to use the Halo Theme on all my Components like Peter explains here: http://blog.flexexamples.com/2009/07/14/using-the-halo-theme-in-flex-4/ Is there a way of getting the Datagrid transparent without using the halo theme?
The second issue I have is regarding fonts in the Datagrid. I managed to embed system fonts like Arial or Verdana, but when it comes to the .ttf the designer wants me to use, no text is displayed. I found out, that the Datagrid uses bold fonts for default. I've set the font-weight to normal on the columns but they still stay empty.
Here's my css code:
@font-face
src: url("assets/fonts/FuturaCom-Medium.ttf");
fontWeight: normal;
fontFamily: myFuturaMedium;
advancedAntiAliasing: true;
cff: true;
unicode-range: U+0020-U+007E, /* englishRange & basic latin */
U+00A0-U+00FF, /* basic latin with umlaut äöü*/
U+20AC-U+20AC;
.myDatagrid{
fontFamily: myFuturaMedium;
font-weight:normal;
color: #FFFFFF;
Thanks in advance. Help is highly appreciated!Or the other approach (a custom skin) would be something like this:
<?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/halo"
backgroundColor="red">
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20" />
</s:layout>
<mx:DataGrid id="dataGrid"
alternatingItemColors="[]"
borderSkin="skins.CustomBorderSkin">
<mx:dataProvider>
<s:ArrayList>
<fx:Object c1="0.One" c2="0.Two" />
<fx:Object c1="1.One" c2="1.Two" />
<fx:Object c1="2.One" c2="2.Two" />
<fx:Object c1="3.One" c2="3.Two" />
<fx:Object c1="4.One" c2="4.Two" />
<fx:Object c1="5.One" c2="5.Two" />
<fx:Object c1="6.One" c2="6.Two" />
<fx:Object c1="7.One" c2="7.Two" />
<fx:Object c1="8.One" c2="8.Two" />
<fx:Object c1="9.One" c2="9.Two" />
</s:ArrayList>
</mx:dataProvider>
</mx:DataGrid>
</s:Application>
And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?>
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="mx.skins.spark.*" implements="mx.core.IRectangularBorder">
<fx:Script>
<![CDATA[
import mx.core.EdgeMetrics;
import mx.core.IUIComponent;
import mx.graphics.RectangularDropShadow;
/* Define the skin elements that should not be colorized. */
static private const exclusions:Array = ["background"];
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
override public function get contentItems():Array {return contentFill};
/* Define the border item. */
static private const borderItem:Array = ["borderStroke"];
override protected function get borderItems():Array {return borderItem;}
override protected function get defaultBorderItemColor():uint {return 0x696969;}
static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
private var dropShadow:RectangularDropShadow;
public function get borderMetrics():EdgeMetrics
return metrics;
public function get backgroundImageBounds():Rectangle
return null;
public function set backgroundImageBounds(value:Rectangle):void
public function get hasBackgroundImage():Boolean
return false;
public function layoutBackgroundImage():void
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
graphics.clear();
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (parent && parent is IUIComponent && !IUIComponent(parent).enabled)
alpha = 0.5;
else
alpha = 1;
// Draw drop shadow, if needed
if (getStyle("dropShadowEnabled") == false ||
getStyle("dropShadowEnabled") == "false" ||
width == 0 ||
height == 0)
return;
// Create a RectangularDropShadow object, set its properties,
// and draw the shadow
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 5;
dropShadow.angle = 90;
dropShadow.color = 0;
dropShadow.alpha = 0.8;
dropShadow.blurX = 20;
dropShadow.blurY = 20;
dropShadow.drawShadow(graphics, x, y, width, height);
private function getDropShadowAngle(distance:Number,
direction:String):Number
if (direction == "left")
return distance >= 0 ? 135 : 225;
else if (direction == "right")
return distance >= 0 ? 45 : 315;
else // direction == "center"
return distance >= 0 ? 90 : 270;
]]>
</fx:Script>
<s:Group left="0" right="0" top="0" bottom="0">
<!-- border -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke id="borderStroke" />
</s:stroke>
</s:Rect>
<!-- fill -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1" alpha="0">
<s:fill>
<s:SolidColor id="bgFill" color="0xFFFFFF" />
</s:fill>
</s:Rect>
</s:Group>
</local:SparkSkinForHalo>
(The border skin was taken from %FLEX SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\BorderSkin.mxml and I basically only added that alpha="0" bit on the background Rect fill.
This is one of the areas we are still trying to improve in Spark (backgroundImage, backgroundAlpha). If you have any list of styles that worked in Halo but aren't working any more in the default Halo control/container Spark skins, let us know.
Peter
Maybe you are looking for
-
IPhone AppleID signin on another iPhone
Yesterday, I downloaded and installed the new iOS6 on two iPhones. I signed on with my Apple ID on my friends phone to get questions answered, etc. and then discovered that I shouldn't have done this. My friend did not remember their ID and I signe
-
Clicking noise when updating iPod 30 GB video
HELP PLEASE!! The problem is this.When I connect my brand new iPod and it is updating songs from iTunes and I move the iPod I can hear something lose ratteling inside of it. As if there is a screw lose or something.But that only happens while it is u
-
PDF auto select paper tray based on paper size
* this was originally posted here: http://discussions.apple.com/thread.jspa?threadID=2586377&tstart=0 but I was informed I was in the wron g forum. I have a Windows pc only for 1 thing - printing pdfs. My problem is that Windows printer drivers allow
-
Tax code V0 does not exist for jurisdiction code IN00
hi mm when i am creating a purchase order After creating the PO when i go to invoice and enter tax code V0 and jurisdiction code i face the error Tax code V0 does not exist for jurisdiction code IN00 Message no. FF718 Diagnosis You have entered tax c
-
I need help installing mac OS 9.0.4
I got an Imac from ebay no software whats so ever. I turned it on and the system had an administrator password which I didn't know. It has mac OS 9.2 Installed on it I was told by a freind to buy the OS cd and to boot form it so I ordered mac os 9.0.