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
Similar Messages
-
How to end Spark datagrid editing session
I am reading that I can use endEditorSession to end editing session programmatically.
http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff3.html#WS 0ab2a460655f2dc3-427f401412c60d04dca-7fec
But DataGrid object does not have such method. Can someone clarify how to end up editing session?
ThanksChecking "Continuously Updates Value" in the Bindings inspector under Value helped.
-
Best way to mark data that has changed when it is edited in a spark datagrid?
I am not sure if this is the best way to mark data that has changed (isModifiedClientSide ) when it is edited in a spark datagrid:
<GridColumn width="140" headerText="Margin "dataField="margin" editable="false" editable.editMode="true" >
<itemRenderer>
<fx:Component>
<DefaultGridItemRenderer textAlign="right" background="true" backgroundColor="#ffffff" alpha="1.0" color="#000000" >
<focusOut>
<![CDATA[
this.data.isModifiedClientSide = 1;
]]>
</focusOut>
</DefaultGridItemRenderer>
</fx:Component>
</itemRenderer>
</GridColumn>I tried this but the value commit doesnt't get fired bro:
<GridColumn width="140" headerText="Margin (disabled)" headerText.editMode="Margin (editing)" dataField="margin" editable="false" editable.editMode="true" >
<itemEditor>
<fx:Component>
<DefaultGridItemEditor>
<valueCommit>
<![CDATA[
this.data.isModifiedClientSide = 1;
]]>
</valueCommit>
</DefaultGridItemEditor>
</fx:Component>
</itemEditor>
</GridColumn>
what do you think? -
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> -
Spark datagrid - custom renderers
In my Spark DG I have a column that serves a purpose of starting and ending an editing session. I use a custom item renderer with a button that when I click on it initiates editing and gets its icon changed.
When I click on the same button in another row I want to end editing in the first row and flip its button back to original. I am using states for that.
Everything seems to be working except when I start editing in row #1 from the top and then click on a button in any other row the button in the first row does not change its icon.
It has been already days of work trying figuring out what is so special in the row #1. No luck. Please help.
Thank you.I am implementing the datagrid that only redraws and refreshed the cells that are updated insted of refreshing the whole datagrid.
There is already and example on MX Datagrid which refreshed only particular cells. Here is the link http://blogs.adobe.com/tomsugden/2010/04/optimizing_the_flex_datagrid_f.html . we can test it by launching application, right click on the application and select "Show redraw regions"
I have the similar requirement (updating only the refreshed cells, insted of whole datagrid) but I want this feature in Spark Datagrid.
(similar one on spark is in this link http://hansmuller-flex.blogspot.com/2011/07/high-performance-christmas-tree.html)
I am using the prepare method, but still the functionality is not working. When I right click and select show redraw regions. The whole daatgrid is redrawn instead of particular cells.
override public function prepare(hasBeenRecycled:Boolean):void { -
Can spark datagrid mouse click be disabled while in a custom item editor?
Hi,
Is it possible to prevent a user from clicking on another cell in a datagrid until the cell currently being edited has had its data saved?
I would like to validate the cell's text data as it is being entered by a user, character by character. If the validation fails, I would like to put up an error message and prevent the user from clicking outside of the cell. I am able to validate the data and put up an error message. But I have not found a way, if there is one, of disabling mouse clicks in other cells. I've tried setting the IE's parent.editable, .enabled and .mouseEnabled properties to false. But none of these are working for me.
Thanks,
-Adobegillisisle2The session does stay if I hit the TAB or RETURN keys. I return false from my overridden save() function and the session stays keeping the user in the edit cell, allowing fixing the invalid data. But I don't get the same behavior when I click the mouse on another cell. In these cases, my save function is still called, and I still return false ( in the case where the validation fails ), but the edit session goes away.
-
Spark datagrid custom griditemeditor popup issue.
I have griditemrenderer and griditemeditor for a spark datagrid column. As I have some functionality to be implemented in renderer and editor, I have created custom renderer and editor as follows;
MyEditor.as
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
left="0" right="0" top="0" bottom="0" clipAndEnableScrolling="true"
focusEnabled="true" focusIn="{re.setFocus()}" hasFocusableChildren="true">
<fx:Script>
<![CDATA[
override public function prepare():void{
if(data!=null)
re.text = data[column.dataField];
]]>
</fx:Script>
<mx:HBox width="100%" height="100%">
<s:RichEditableText id="re" width="100%" height="100%" editable="true">
</s:RichEditableText>
</mx:HBox>
</s:GridItemEditor>
MyRenderer.as
<?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 prepare(hasBeenRecycled:Boolean):void{
if(data!=null)
rTxt.text = data[column.dataField];
]]>
</fx:Script>
<s:RichText id="rTxt" left="7" top="7" >
</s:RichText>
</s:GridItemRenderer>
Following datagrid uses these;
The problem is that when i am trying to edit the cell, the griditemeditor pops up above the griditemrenderer. I want that editor should come instead renderer place when editing cell, it should not popup. I can not use inline renderer and editor as i have lot of functionality in that.
Please let me know if any solution.
Thanks..The datagrid code is as following;
<?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"
width="100%" height="100%" editable="true">
<s:columns>
<s:ArrayCollection>
<s:GridColumn dataField="name" editable="false"
headerText="Name">
</s:GridColumn>
<s:GridColumn dataField="info" editable="true"
headerText="Info"
itemEditor="MyEditor"
itemRenderer="MyRenderer">
</s:GridColumn>
</s:ArrayCollection>
</s:columns>
</s:DataGrid>
Please suggest if any solution. -
hi
I am having a datagrid in which one particular column is editable.This column fetches decimal values from database.Although i have set the editable property as true I am not able to edit the column .Only if i press backspace I am able to edit it .kindly help me to solve it.
<mx:DataGrid
width="816" dataProvider="arr" id="g1" editable="
true" height="120" styleName="d1" sortableColumns="
false" x="0" y="28" wordWrap="true" itemEditEnd="itemclick(event);" itemClick="editCell(event)">Probably your editCell is causing the edit session to end.
-
Spark datagrid item editor font see through
I am using a default item editor on a spark datagrid.
When the user attempts to edit the field the old value shows through.
How do I get rid of this?
I am using out of the box stuff? Is this a listed bug?
Code is...
<s:GridColumn dataField="Actual" headerText="Actual" width="75" editable="true">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" background="true" backgroundColor="#FFFFFF" alpha="1.0" color="#000000" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Thanks
Dan PrideTry <s:DefaultGridItemEditor if you are wanting to make it editable.
here is an example of combobox, but it is similiar ....
<s:itemEditor>
<fx:Component>
<s:ComboBoxGridItemEditor >
<s:dataProvider>
<s:ArrayList>
<fx:String>Edit</fx:String>
<fx:String>Read</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBoxGridItemEditor>
</fx:Component>
</s:itemEditor>
Don -
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> -
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 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. -
I wonder how I can make an editable Spark Datagrid, the enter key has the same function as the tab key, that is, when you press the enter key, advance to the next field.
Thanks in advanceYou could simplify your code by using a switch statement, which would allow you to access whatever keyboard action you want to track without going through a bunch of "if else" statements.
i.e.
switch(event.keyCode) {
case Keyboard.DOWN:
dataGrid.endItemEditorSession();
dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex + 1,dataGrid.selectedCell.columnIndex);
dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
break;
case KeyBoard.UP:
dataGrid.endItemEditorSession();
dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex - 1,dataGrid.selectedCell.columnIndex);
dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
break;
of course, more simplified would be this
dataGrid.endItemEditorSession();
switch(event.keyCode) {
case Keyboard.DOWN:
dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex + 1,dataGrid.selectedCell.columnIndex);
break;
case KeyBoard.UP:
dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex - 1,dataGrid.selectedCell.columnIndex);
break;
dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex); -
[svn:fx-3.x] 12119: Fix edit sessions in TextInputs yet again.
Revision: 12119
Revision: 12119
Author: [email protected]
Date: 2009-11-23 13:08:32 -0800 (Mon, 23 Nov 2009)
Log Message:
Fix edit sessions in TextInputs yet again.
QE Notes: None
Doc Notes: None
Bugs: SDK-23397
Reviewer: Corey
API Change: No
Is noteworthy for integration: No
tests: checkintests mustella/components/DataGrid
Ticket Links:
http://bugs.adobe.com/jira/browse/SDK-23397
Modified Paths:
flex/sdk/branches/3.x/frameworks/projects/framework/src/mx/controls/DataGrid.asSimilar issue here...
More or less the same system:
# yaourt -Q | egrep "fluxbox|firefox|roxterm|xorg-server"
local/bin32-firefox 18.0.1-1
extra/firefox 18.0.1-1
extra/fluxbox 1.3.3-1
local/fluxbox-styles dayly-1
community/roxterm 2.6.5-1
extra/xorg-server 1.13.1-1 (xorg)
extra/xorg-server-common 1.13.1-1
extra/xorg-server-utils 7.6-3
I've noticed that sometimes while running firefox (either with or without flash), I get a new feature like oldies windows and then the X goes 100% of one of the cpucores.
Just pressing alt+tab it stops... but the fluxbox banner remains there (wherever I have the mouse while I'm pressing alt+tab).
Is strange that We're using fluxbox...
I've seen this new feature on my laptop and on my desktop with Nvidia & intel cards (everything else on the Arch system is the same)....
I'll launch the xrestop and see if there's something there...
Also I've tryed to build&use fluxbox from sources and I get the same feature. -
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
Maybe you are looking for
-
Tips for blue screen (BSOD) errors with Windows Vista and Intel Turbo Memory on T61/T61p
Important note: The symptoms and solutions described below address only a small subset of the possible causes for blue screen errors, aka BSOD. This information can help address blue screen errors specifically related to Turbo Memory, but may not sol
-
How to install and configure a 256 SSD on my HP ENVY 17-3290NR (3D) Laptop?
I would appreciate some guidance How to add a 256 SSD (Samsung 840 Pro 256 SSD?) to my HP ENVY 17-3290NR (3D) Laptop. The Laptop came standard with an 80GB mSATA + 1TB Hard Drive. I would like to use the 256 SSD as the booth drive and install opera
-
Lenovo G550 Graphics Very Bad, want to install external GPU
Hi everyone! I own a Lenovo G550 (model 20023). It currently has a Intel Pentium Dual Core T4500, Intel Graphics Media Accelerator(That's one hell of a bad GPU!!!!), 4Gb DDR3 Ram(had 2gb DDR3 Factory Installed), with 3 operating systems(Yes
-
Can't remember if my iPad is an iPad 2 or a 3.....how do you tell,can't find
I cannot find the info about what iPad I have....a 2 or an iPad 3.......where do you find the #'s??
-
Hi I am updating the long text to a message in SE91. Looks like in the SAP text editor you can add links. I would like to add a link to a url/website, but this does not seem to be ann option. Anyone know how this can be accomplished