Column stretch event in spark datagrid
Hi everybody,
These days I'm converting our Flex application from Flex 3 SDK to Flex 4.5 SDK (Hero).
I've a problem with the spark datagrid, and more specifically, the events listening on the columns.
How can we know that the columns in the spark datagrid are stretched or shrinked?
In Flex 3, there was a DataGridEvent.COLUMN_STRETCH event on the datagrid and I can't find the equivalent in Flex 4.5.
If you have any tips.... thanks!!!!
When a GridColumn is interactively resized "widthChanged" events are dispatched because the column's width property is set. To track the entire column separator press-drag-release gesture you can listen for GridEvent.SEPARATOR_MOUSE_DOWN,SEPARATOR_MOUSE_DRAG, etc..events on the DataGrid's columnHeaderGroup skin part. If you wanted to change the way the interactive column resizing works you'd have to subclass DataGrid and override protected methods like separator_mouseDownHandler(event:GridEvent), separator_mouseDragHandler(event:GridEvent).
- Hans
Similar Messages
-
How do I get itemDoubleClick event in spark DataGrid ???
Hello Everyone,
Recently I am working with Spark DataGrid.
Before I was using AdvancedDataGrid. In that I was capturing itemDoubleClick event.
But I am not able to find such a event in SparkdataGrid.
So I want to capture double click event on single row of DataGrid.
Some people told that, I have to use my custom ItemRenderer to do that.
But is there any way to capture itemDoubleClick event in Spark DataGrid without creating custom ItemRenderer ???You are correct. I looked a the code and the comment says it dispatches a double click if the 2nd click is within the DOUBLE_CLICK_TIME even if the first click was on another cell.
This code figures out if the double-click is a true double-click.
<?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">
<fx:Script>
<![CDATA[
import spark.events.GridEvent;
private var lastColumnIndex:int = -1;
private var lastRowIndex:int = -1;
// set this to change the double click time
//mx_internal::event.grid.DOUBLE_CLICK_TIME = 480; // ms
protected function dataGrid_gridClickHandler(event:GridEvent):void
trace("click on this cell", event.rowIndex, event.columnIndex);
lastRowIndex = event.rowIndex;
lastColumnIndex = event.columnIndex;
protected function dataGrid_gridDoubleClickHandler(event:GridEvent):void
if (event.rowIndex == lastRowIndex && event.columnIndex == lastColumnIndex)
trace("a real double click on this cell", event.rowIndex, event.columnIndex);
else
trace("this is a gridClick on another cell", event.rowIndex, event.columnIndex);
lastRowIndex = event.rowIndex;
lastColumnIndex = event.columnIndex;
]]>
</fx:Script>
<s:DataGrid id="dataGrid" requestedRowCount="5" verticalCenter="0" horizontalCenter="0"
doubleClickEnabled="true"
gridClick="dataGrid_gridClickHandler(event)"
gridDoubleClick="dataGrid_gridDoubleClickHandler(event)">
<s:ArrayCollection>
<s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
<s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
<s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
<s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
<s:DataItem key="1005" name="File" price="150.05" call="true"/>
<s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
<s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
<s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
</s:ArrayCollection>
</s:DataGrid>
</s:Application> -
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().
-
How to make spark datagrid columns to behave like mx datagrid columns
Hello.
I have a problem with spark datagrid component. I can't force spark datagrid columns behave like old mx datagrid columns. In mx datagrid columns fills 100% of datagrid regardles of resizing column or datagrid itself (it will not show horizontal scrolling bar). In spark datagrid last column (colC) will never word wrap, event after setting horizontalScrollPolicy=off. I would like to somehow constrain spark columns to behave like mx ones.
App snippet (try to resize app and columns - especially colC - and you will see what I mean):
<?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">
<fx:Declarations>
<s:ArrayCollection id="dp">
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
<s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
</s:ArrayCollection>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:DataGrid id="grid" width="100%" height="100%" dataProvider="{dp}" variableRowHeight="true" horizontalScrollPolicy="off">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Column A" dataField="colA"/>
<s:GridColumn headerText="Column B" dataField="colB"/>
<s:GridColumn headerText="Column C" dataField="colC"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<mx:DataGrid id="grid2" width="100%" height="100%" dataProvider="{dp}" wordWrap="true" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Column A" dataField="colA"/>
<mx:DataGridColumn headerText="Column B" dataField="colB"/>
<mx:DataGridColumn headerText="Column C" dataField="colC"/>
</mx:columns>
</mx:DataGrid>
</s:Application>the datagrid has sortItems and sortItemsOn methods you can use.
-
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. -
Spark Datagrid - center a column?
Started using the spark datagrid and was a little taken aback when centering a column in the grid turned into a google search
eh?
Its such a simple thing... whatever happened to textalign="center"Simplest way I've found...
<s:DataGrid> ...
<s:columns>
<s:ArrayList>
<s:GridColumn id="Col3" dataField="price" headerText="PRICE">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:layout>
<s:HorizontalLayout horizontalAlign="center"/>
</s:layout>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn> ...
</s:ArrayList>
</s:columns> ...
</s:DataGrid> -
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. -
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. -
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 -
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> -
Selection issue with editable Spark DataGrid
Hi everyone,
I am evaluating the new Spark DataGrid and I'm having a very strange issue with the behavior of selection in an editable instance.
Here is my test application: http://www.playcalliope.com/flex/DataGridSelectionIssue.html (code here: https://gist.github.com/1129160)
And here are the steps to reproduce the issue:
select the very first cell at the top-left corner of the grid (the one with "Gabriele");
click on it once more, the editor appears;
now click on the cell just to the right of it (the one with "Genta").
You should see that editing ends as it supposed to do, but selection is placed on the third cell (the one with a 5 in it) instead on the one you clicked on. Playing a little with the grid you should see that this isn't the only case, but selection is really behaving randomly.
I am using SDK 4.5.1.21328.
I think this is a very basic usage case.. I can't believe this is not working properly, what am I missing?
Thanks a lot,
Gabriele Genta
Message was edited to add live exampleYour running into a known bug, https://bugs.adobe.com/jira/browse/SDK-30088.
The bug will be fixed in the Mega release. To work around the bug you can create a custom editor and remove the "dataGrid.validateNow();" call in DataGridEditor.save().
Here's how I modified your example to workaround the bug:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
backgroundColor="#E7E7E7"
creationComplete="application1_creationCompleteHandler(event)">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
testGrid.dataProvider = new XMLListCollection(testData.item);
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="testData" xmlns="">
<items>
<item>
<id>1</id>
<cognome>Gabriele</cognome>
<nome>Genta</nome>
<uhm>5</uhm>
<bene>molto</bene>
</item>
<item>
<id>10</id>
<cognome>Pinco</cognome>
<nome>Pallino</nome>
<uhm>10</uhm>
<bene>poco</bene>
</item>
</items>
</fx:XML>
<fx:Component className="MyDefaultEditor">
<s:DefaultGridItemEditor>
<fx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.collections.ISort;
override public function save():Boolean
if (!validate())
return false;
var newData:Object = value;
var property:String = column.dataField;
var data:Object = data;
var typeInfo:String = "";
for each(var variable:XML in describeType(data).variable)
if (property == [email protected]())
typeInfo = [email protected]();
break;
if (typeInfo == "String")
if (!(newData is String))
newData = newData.toString();
else if (typeInfo == "uint")
if (!(newData is uint))
newData = uint(newData);
else if (typeInfo == "int")
if (!(newData is int))
newData = int(newData);
else if (typeInfo == "Number")
if (!(newData is Number))
newData = Number(newData);
else if (typeInfo == "Boolean")
if (!(newData is Boolean))
var strNewData:String = newData.toString();
if (strNewData)
newData = (strNewData.toLowerCase() == "true") ? true : false;
if (property && data[property] !== newData)
// If the data is sorted, turn off the sort for the edited data.
var sort:ISort = null;
if (dataGrid.dataProvider is ICollectionView)
var dataProvider:ICollectionView = ICollectionView(dataGrid.dataProvider);
if (dataProvider.sort)
sort = dataProvider.sort;
dataProvider.sort = null;
var oldData:Object = data[property];
data[property] = newData;
dataGrid.dataProvider.itemUpdated(data, property, oldData, newData);
// Restore the sort. The data will not be sorted due to this change.
if (sort)
ICollectionView(dataGrid.dataProvider).sort = sort;
return true;
]]>
</fx:Script>
</s:DefaultGridItemEditor>
</fx:Component>
</fx:Declarations>
<s:DataGrid id="testGrid" width="100%" height="100%"
editable="true" selectionMode="singleCell"
itemEditor="{new ClassFactory(MyDefaultEditor)}">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Prova" dataField="cognome"/>
<s:GridColumn headerText="Prova1" dataField="nome"/>
<s:GridColumn headerText="Prova3" dataField="uhm"/>
<s:GridColumn headerText="Prova4" dataField="bene"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application> -
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 - editing session
I am trying to specidy a listener to catch a data change in Spark DataGrid. Here is my code:
<s:DataGrid requestedRowCount="4" fontSize="11" sortableColumns="false"
id="engines" rowHeight="22" gridItemEditorSessionStarting="processData(event)"
height="100%">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="initial" headerText="Initial" width="50">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:layout>
<s:VerticalLayout paddingLeft="2"
verticalAlign="middle"/>
</s:layout>
<s:TextInput restrict="a-zA-Z"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
but processData does not get fired.
Any idea?A cell editor is placed over the top of a cell and it is sized by the DataGrid to be the same height as the cell. The height of the cell is not changed. Are you see the cell height change when you are using a built-in cell editor or your own custom cell editor? In any case, you can you the prepare() method of a cell editor to make any final adjustments to the cell editor that you want, including changing the height of the cell editor.
-Darrell -
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: 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.
Maybe you are looking for
-
Can multiple people work on one form
We do onsite assessments. I am attempting to determine the best method to have all of my assessors' feedback compiled into one form. Any help will be much appreciated!
-
Two Urgent Batch Processing Questions!!
Q1) I have over a thousand one-minute clips I need to convert to a different QUicktime format using compressor.... I have created my custom preset that I want to use for all 1000 clips. I really dont want to drag my preset manually onto all 1000 clip
-
IS IT A BATTERY PROBLEM??! PLEASE HELP!
I bought my new ipod mini in 2004 November. Since a few months ago my ipod started not 'working' properly! I switch my ipod on to listen to a few songs... after about two songs, it says NO BATTERY PLEASE CONNECT YOUR iPOD..BLA BLA. I've charged it an
-
I have two images in their own div tag but I'm not having any luck keeping them level with each other. The 2nd image want to jumps to the division below. I floated the 2nd image right and cleared left but this doesn't isn't keeping my image level wit
-
SPA10 battery and BIOS time lost problems
We have 7 SPA10 laptops in our University department. They are all showing the same problem when they haven't been used for a week or so. The error message is: RTC battery is low or CMOS checksum is inconsistent. Press F1 key to set Date/Time They di