DataGrid Column Focus Out Event
I have an editable datagrid and I'm trying to accomplish the
following:
When a user edits a cell, then focuses out, a function is
called that sends off a service with that value, along with the id
value in that same item. I've tried using itemFocusOut, but I'm
getting bizzare results---the function is executing multiple times.
So i need the function to know what cell was focused out, and also
all of the other information that accompanies that item.
Thanks for any help.
Here's what I ended up doing.
Somewhere after Load, I added:
PropertyDescriptor pd = DependencyPropertyDescriptor.FromProperty(DataGridColumn.ActualWidthProperty, typeof(DataGridColumn));
foreach (DataGridColumn column in Columns) {
//Add a listener for this column's width
pd.AddValueChanged(column, new EventHandler(ColumnWidthPropertyChanged));
Then the following 2 methods:
private bool _columnWidthChanging;
private void ColumnWidthPropertyChanged(object sender, EventArgs e)
// listen for when the mouse is released
_columnWidthChanging = true;
if (sender != null)
Mouse.AddPreviewMouseUpHandler(this, BaseDataGrid_MouseLeftButtonUp);
void BaseDataGrid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
if (_columnWidthChanging) {
_columnWidthChanging = false;
/// whatever you wanted to do here
The ColumnWidthPropertyChanged fires constantly while the user drags the width around, so if you just listen to that, you'll be over-doing it.
Adding the PreviewMouseUp handler let me only do my processing when the user is done changing the width.
Hope this helps someone.
Janene
Similar Messages
-
Hi,
I got the column focus after create a row in my datagrid, now
I want to
create a general function for all my datagrids but I got an
error
Implicit coercion of a value of type void to an unrelated
type Function.
Looks like I can't pass my datagrid value in the function
Tks
JFB
Here is my code
callLater(focusNewRow(myDataGrid)); --> here is the error
public function focusNewRow(tempDataGrid:DataGrid):void{
tempDataGrid.editedItemPosition = {
columnIndex:0,rowIndex:tempDataGrid.dataProvider.length-1That fixed the problem...
Thank you Robert.
Rgds
JFB
"Robert Hirst" <[email protected]> wrote in
message
news:f858na$4im$[email protected]..
> callLater takes two parameters, the first is the name
(e.g. no
> parentheses) of
> the function, and the second is an array of parameters.
If you have the
> brackets, then Flex will assume you want the function to
be evaluated and
> so
> you are passing "void" into the callLater method.
>
> I believe what you want to do looks more like this:
>
> callLater(focusNewRow,[myDataGrid]);
>
> -
How not to sort datagrid column on double click
Hello,
I am currently building an application containing a datagrid for data representation. I've created a custom datagridheader in order to add a input text for filtering the columns (see code below).
My goal is to hide the textinput, and then show it on a double click on the header. So i would like to know how to avoid the sort of this column each time i double click.?
<?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" resize="onColumnResize(event)" clipAndEnableScrolling="true" doubleClick="managefilterField(event)">
<fx:Declarations>
<!--- The default value of the <code>sortIndicator</code> property.
It must be an IFactory for an IVisualElement.
<p>This value is specified in a <code>fx:Declaration</code> block and can be overridden
by a declaration with <code>id="defaultSortIndicator"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<fx:Component id="defaultSortIndicator">
<s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
* @private
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("symbolColor");
arrowFill1.color = color;
arrowFill2.color = color;
]]>
</fx:Script>
<s:fill>
<s:RadialGradient rotation="90" focalPointRatio="1">
<!--- @private -->
<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
<!--- @private -->
<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
</s:RadialGradient>
</s:fill>
</s:Path>
</fx:Component>
<!--- Displays the renderer's label property, which is set to the column's <code>headerText</code>.
It must be an instance of a <code>TextBase</code>, like <code>s:Label</code>.
<p>This visual element is added to the <code>labelDisplayGroup</code> by the renderer's
<code>prepare()</code> method. Any size/location constraints specified by the labelDisplay
define its location relative to the labelDisplayGroup.</p>
<p>This value is specified with a <code>fx:Declaration</code> and can be overridden
by a declaration with <code>id="labelDisplay"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<s:Label id="labelDisplay"
verticalCenter="1" left="0" right="0" top="0" bottom="0"
textAlign="start"
fontWeight="bold"
verticalAlign="middle"
maxDisplayedLines="1"
showTruncationTip="true" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import net.awl.ismp.console.components.misc.FilterCriteria;
import net.awl.ismp.console.events.ColumnFilteredEvent;
import net.awl.ismp.console.events.ColumnResizedEvent;
import mx.events.ResizeEvent;
import spark.components.gridClasses.IGridVisualElement;
import mx.core.IVisualElement;
import spark.components.DataGrid;
import spark.components.GridColumnHeaderGroup;
import spark.components.gridClasses.GridColumn;
import spark.primitives.supportClasses.GraphicElement;
// chrome color constants and variables
private static const DEFAULT_COLOR_VALUE:uint = 0xCC;
private static const DEFAULT_COLOR:uint = 0xCCCCCC;
private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;
private static var colorTransform:ColorTransform = new ColorTransform();
* @private
private function dispatchChangeEvent(type:String):void
if (hasEventListener(type))
dispatchEvent(new Event(type));
protected function onColumnResize(event:ResizeEvent):void
dispatchEvent(new ColumnResizedEvent(ColumnResizedEvent.COLUMNRESIZED_EVT,this.width,this.column.columnInde x));
// maxDisplayedLines
private var _maxDisplayedLines:int = 1;
[Bindable("maxDisplayedLinesChanged")]
[Inspectable(minValue="-1")]
* The value of this property is used to initialize the
* <code>maxDisplayedLines</code> property of this renderer's
* <code>labelDisplay</code> element.
* @copy spark.components.supportClasses.TextBase#maxDisplayedLines
* @default 1
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
public function get maxDisplayedLines():int
return _maxDisplayedLines;
override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void
trace("state changed from : "+oldState+" to "+newState);
super.stateChanged(oldState, newState, recursive);
* @private
public function set maxDisplayedLines(value:int):void
if (value == _maxDisplayedLines)
return;
_maxDisplayedLines = value;
if (labelDisplay)
labelDisplay.maxDisplayedLines = value;
invalidateSize();
invalidateDisplayList();
dispatchChangeEvent("maxDisplayedLinesChanged");
// sortIndicator
private var _sortIndicator:IFactory;
private var sortIndicatorInstance:IVisualElement;
[Bindable("sortIndicatorChanged")]
* A visual element that's displayed when the column is sorted.
* <p>The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>
* by this renderer's <code>prepare()</code> method. Any size/location constraints
* specified by the sortIndicator define its location relative to the sortIndicatorGroup.</p>
* @default null
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
public function get sortIndicator():IFactory
return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
* @private
public function set sortIndicator(value:IFactory):void
trace("setSortIndicator");
if (_sortIndicator == value)
return;
_sortIndicator = value;
if (sortIndicatorInstance)
sortIndicatorGroup.includeInLayout = false;
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorInstance = null;
invalidateDisplayList();
dispatchChangeEvent("sortIndicatorChanged");
* @private
* Create and add the sortIndicator to the sortIndicatorGroup and the
* labelDisplay into the labelDisplayGroup.
override public function prepare(hasBeenRecycled:Boolean):void
trace("prepare !!");
super.prepare(hasBeenRecycled);
if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
labelDisplayGroup.removeAllElements();
labelDisplayGroup.addElement(labelDisplay);
trace(sortIndicator);
trace("sortIndicatorInstance : "+sortIndicatorInstance);
const column:GridColumn = this.column;
if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)
const dataGrid:DataGrid = column.grid.dataGrid;
const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;
if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))
if (!sortIndicatorInstance)
sortIndicatorInstance = sortIndicator.newInstance();
sortIndicatorGroup.addElement(sortIndicatorInstance);
chromeColorChanged = true;
invalidateDisplayList();
// Initialize sortIndicator
sortIndicatorInstance.visible = true;
const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
if (gridVisualElement)
gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);
sortIndicatorGroup.includeInLayout = true;
sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
else
if (sortIndicatorInstance)
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorGroup.includeInLayout = false;
sortIndicatorInstance = null;
private var chromeColorChanged:Boolean = false;
private var colorized:Boolean = false;
* @private
* Apply chromeColor style.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
//trace("update display list");
// Apply chrome color
if (chromeColorChanged)
var chromeColor:uint = getStyle("chromeColor");
if (chromeColor != DEFAULT_COLOR || colorized)
colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;
colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;
colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;
colorTransform.alphaMultiplier = alpha;
transform.colorTransform = colorTransform;
var exclusions:Array = [labelDisplay, sortIndicatorInstance];
// Apply inverse colorizing to exclusions
if (exclusions && exclusions.length > 0)
colorTransform.redOffset = -colorTransform.redOffset;
colorTransform.greenOffset = -colorTransform.greenOffset;
colorTransform.blueOffset = -colorTransform.blueOffset;
for (var i:int = 0; i < exclusions.length; i++)
var exclusionObject:Object = exclusions[i];
if (exclusionObject &&
(exclusionObject is DisplayObject ||
exclusionObject is GraphicElement))
colorTransform.alphaMultiplier = exclusionObject.alpha;
exclusionObject.transform.colorTransform = colorTransform;
colorized = true;
chromeColorChanged = false;
super.updateDisplayList(unscaledWidth, unscaledHeight);
* @private
override public function styleChanged(styleProp:String):void
var allStyles:Boolean = !styleProp || styleProp == "styleName";
super.styleChanged(styleProp);
if (allStyles || styleProp == "chromeColor")
chromeColorChanged = true;
invalidateDisplayList();
protected function managefilterField(event:MouseEvent):void
trace("double click sortIndicator : "+this.sortIndicatorInstance);
this.filterInput.visible=!this.filterInput.visible;
this.filterInput.includeInLayout=this.filterInput.visible;
this.filterSpacer.visible=this.filterInput.visible;
this.filterSpacer.includeInLayout=this.filterInput.visible;
if(!this.filterInput.visible)
this.filterInput.text="";
dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
this.filterInput.setStyle("borderColor",0xFF6319);
this.filterInput.setStyle("focusColor",0xFF6319);
//this.filterInput.setStyle(
protected function onTextInputSelection(event:MouseEvent):void
event.stopImmediatePropagation();
this.filterInput.setStyle("borderColor",0xFF6319);
this.filterInput.setStyle("focusColor",0xFF6319);
protected function onKeyUp(event:KeyboardEvent):void
if(event.charCode==Keyboard.ENTER)
stage.focus=null;
protected function onFocusOut(event:FocusEvent):void
this.filterInput.setStyle("borderColor",0x00ff00);
this.filterInput.setStyle("focusColor",0x70B2EE);
dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="down" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.hovered="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.hovered="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.hovered="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.hovered="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.normal="0xf9f9f9" color.hovered="0xfcfdfa"
color.down="0xdceac2" alpha="0.85" />
<s:GradientEntry color.normal="0xeaeaea" color.hovered="0xdceac2"
color.down="0xd2e1b5" alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>-->
<!--<s:VGroup left="7" right="7" top="5" bottom="5" gap="6" verticalAlign="middle">
<s:TextInput width="100%" />
<s:HGroup width="100%">
<s:Group id="labelDisplayGroup" width="100%" />
<s:Group id="sortIndicatorGroup" includeInLayout="false" />
</s:HGroup>
</s:VGroup>-->
<s:VGroup verticalAlign="middle" left="7" top="5" right="7" bottom="5" gap="2" >
<s:TextInput id="filterInput" width="100%" visible="false" includeInLayout="false" keyUp="onKeyUp(event)" focusOut="onFocusOut(event)" click="onTextInputSelection(event)"/>
<s:Spacer id="filterSpacer" visible="false" includeInLayout="false" height="5" />
<s:HGroup width="100%" height="100%" verticalAlign="middle">
<s:Group id="labelDisplayGroup" width="100%" />
<s:Group id="sortIndicatorGroup" includeInLayout="false" />
</s:HGroup>
</s:VGroup>
</s:GridItemRenderer>Based on your idea, i've intercepted the click event and I use stopImmediatePropagation.
THen i added an image to sort the column. So if the image is clicked the sort is ok. -
Datagrid column in module causing memory leak
Hi All
I'm having trouble with a DataGrid column preventing a module from being release properly. I can't imagine this is the intended behaviour.
Using this simple test case, a WindowedApplication and an mx:Module I wonder if anyone else can reproduce this problem. The issue goes away if you simply comment out the GridColumn Instance.
Can anyone offer any advice?
Many thanks
James
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:Script>
<![CDATA[
import mx.core.IVisualElement;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.modules.ModuleManager;
private var assetModule:IModuleInfo;
protected function load_clickHandler(event:MouseEvent):void
assetModule = ModuleManager.getModule('DataGridTestModule.swf');
assetModule.addEventListener("ready", getModuleInstance);
assetModule.load();
public function getModuleInstance(event:ModuleEvent):void
var sm:DisplayObject = assetModule.factory.create() as DisplayObject;
sm.addEventListener("close", closeModule);
contentHolder.addElement(sm as IVisualElement);
private function closeModule(event:Event):void
event.target.removeEventListener("close", closeModule);
contentHolder.removeElement(event.target as IVisualElement);
assetModule.unload();
assetModule = null;
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<s:HGroup >
<s:Button id="load" label="Load" click="load_clickHandler(event)"/>
</s:HGroup>
<s:BorderContainer id="contentHolder" width="100%" height="100%"/>
</s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" xmlns:components="components.*">
<fx:Script>
<![CDATA[
protected function close_clickHandler(event:MouseEvent):void
dispatchEvent(new Event('close', true, false))
]]>
</fx:Script>
<s:BorderContainer id="contacts"
width="100%" height="100%"
backgroundAlpha="0"
borderVisible="false">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button id="close" label="Close" click="close_clickHandler(event)"/>
<s:DataGrid id="queries" >
<s:columns>
<s:ArrayList>
<s:GridColumn/> <!-- Comment out this GridColumn instance to see the leak disappear -->
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:BorderContainer>
</mx:Module>OK, So I've done some more testing. Creating the GridColumn in AS during the creationComplete event is a slight improvement. It seems to allow the DataGrid and the Module be GC'd, but it's still leaking memory somewhere. I just can't get my head around the Profiler. Also, it's going to be a massive headache if we have to rewrite our application to create all the GridColumns in AS. Surely this shouldn't be necessary?
New test case below:
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.core.IVisualElement;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.modules.ModuleManager;
import spark.components.gridClasses.GridColumn;
private var assetModule:IModuleInfo;
private var sm:DisplayObject;
protected function load_clickHandler(event:MouseEvent):void
assetModule = ModuleManager.getModule('DataGridTestModule.swf');
assetModule.addEventListener("ready", getModuleInstance);
assetModule.load();
public function getModuleInstance(event:ModuleEvent):void
sm = assetModule.factory.create() as DisplayObject;
sm.addEventListener("close", closeModule);
contentHolder.addElement(sm as IVisualElement);
private function closeModule(event:Event):void
event.target.removeEventListener("close", closeModule);
contentHolder.removeElement(event.target as IVisualElement);
assetModule.unload();
assetModule = null;
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<s:HGroup >
<s:Button id="load" label="Load" click="load_clickHandler(event)"/>
</s:HGroup>
<s:BorderContainer id="contentHolder" width="100%" height="100%"/>
</s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="module1_creationCompleteHandler(event)"
layout="absolute" xmlns:components="components.*">
<fx:Script>
<![CDATA[
import flash.utils.setTimeout;
import mx.collections.ArrayList;
import mx.events.FlexEvent;
import spark.components.gridClasses.GridColumn;
[Bindable]
private var _col:ArrayList = new ArrayList();
protected function close_clickHandler(event:MouseEvent):void
dispatchEvent(new Event('close', true, false))
protected function module1_creationCompleteHandler(event:FlexEvent):void
var gc:GridColumn = new GridColumn();
gc.headerText = 'Test Column';
_col.addItem(gc);
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button id="close" label="Close" click="close_clickHandler(event)"/>
<s:DataGrid id="queries" columns="{_col}"/>
</s:BorderContainer>
</mx:Module> -
short version:
Is there a clever way to "un-sort" a datagrid column so the
Column and Grid will go back to the original pre-sorted state?--not
just remove the ability to sort.
long-winded background:
I'm using a ComboBox to toggle between report views (which
are displayed in a DataGrid). I have 2 views: the All View and the
Grouped View. The trouble I'm having is that once a column in my
DataGrid gets sorted by a User (which is desirable) in the All
View, then when the User toggles to the Grouped View the sort is
still in place for the column (not desirable). Upon toggle (via
ComboBox change event), I first clear out the DataProvider of all
data, then I'm setting the "sortable" property of the individual
columns and the DataGrid to be 'false' and then I'm repopulating
the DataProvider with fresh data. The result is that the ability to
sort the datagrid is indeed taken away from the User, but the new
data still appears sorted by the column.
dataAC.removeAll(); // ArrayCollection DataProvider to my
DataGrid
// Grouped View
for (var j:int=0;j<graphDG.columns.length;j++) {
var dgc: DataGridColumn = graphDG.columns[j] as
DataGridColumn;
dgc.sortable = false;
graphDG.sortableColumns = false;
...// refill dataACHello feldt12,
This will clear the sort:
ListCollectionView(dataGrid.dataProvider).sort = null;
ListCollectionView(dataGrid.dataProvider).refresh();
Thanks,
Philip
Message was edited by: Philip Keiter -
If myText.text == any value in a datagrid column
Hey guys, in a simple form, I am trying to achieve what's in my title.
I have a text box in which you type in a value (number).
I have a submit button which inserts the value into my data-grid which is populated by a data provider to display that information (ZendAMF).
For my submit button function I need it to loop through all the values(rows) in a column (my dataprovider) of my data-grid to check if my text box value is equal to any of the data in the rows for that column.
I found a function on another forum that should help me achieve this but I still cannot get it to work as I don't think I'm using the function correctly. Note the function is called "findItem()"
Here is my example code:
//I have a datagrid
<mx:DataGrid id="myDataGrid" dataProvider="amfcall.getData.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="MyHeading" dataField="myDataField"/>
</mx:columns>
</mx:DataGrid>
//I have a form for adding data into the datagrid
<mx:Form id="addData">
<mx:FormItem>
<mx:TextInput id="myText"/>
</mx:FormItem>
</mx:Form>
//I have a button to submit the form data by calling a function
<mx:Button label="Add" id="addData" click="findItem()"/>
//I have the function to find any item in the datagrid column that is equal to the text input in the form. This is what I can't code correctly.
public function findItem(myDataGrid.dataProvider, myDataField:String, myText.text):Boolean
for each(var item:Object in myDataGrid.dataProvider)
if(item[myDataField] == myText.text)
return true;
return false;
So I don't think I'm correctly typing the first line of the 'findItem' function as I'm currently receiving [I]1084: Syntax error: expecting rightparen before dot.[/I] for this line [I]public function findItem(myDataGrid.dataProvider, myDataField:String, myText.text):Boolean [/I]
Also, the error does not change if I strict type those things to ':Object' etc.
I may just be using the function totally wrong, can anyone hlpe me out?Hard to tell what’s going on from the information you are providing; but just looking at the first line of your sample code:
Have you checked in the debugger to see what your dataProvider looks like?
You want a resultHandler to set some kind of list – let’s say a previously declared AC, which then becomes your dataProvider for the DataGrid. Something like:
private function amfCallResultHandler(event:ResultEvent):void{
Var someVar:ArrayCollection = event.result as ArrayCollection;
blah blah blah;
myDataProvider = someVar;
HTH,
Carlos -
DataGrid column width is not set properly
Hi,
In the below example I has called the OptimizeDataGrid method on Button Click event to resize the Column according to the data. First time of the button click event it called the function whereas the Datagrid Column width alone is not set properly.whereas on second time it is working properly.
For Eg : In the below statement the text value is coming as 55 and widthPadding is comes as 25. but the sum of these two value is not in the dg.columns[col].width.
dg.columns[col].width = text + widthPadding;
But the same is working on the second time of the Button click event. is any help me out to resovle this issue. Thanks in Advance.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" >
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.collections.ArrayCollection;
import mx.core.UITextField;
import mx.events.AdvancedDataGridEvent;
import mx.binding.utils.BindingUtils;
import mx.controls.Alert;
import mx.controls.AdvancedDataGrid;
import mx.controls.advancedDataGridClasses.*;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.*;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"aabbCC", Territory:"Central Californiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"AAbbcc", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}
private function optimizeDataGrid(dg:Object,widthPadding:uint = 0,heightPadding:uint = 0):void
if ((!dg is DataGrid))
return;
var col:uint;
var colWidth:uint;
var tf:TextFormat;
var renderer:UITextField;
var widths:Array = new Array(dg.columnCount);
var height:uint = 0;
var dgCol:Object;
var text:uint = 0;
if (dg.columnCount > 0 && dg.dataProvider != null)
for (col = 0; col < dg.columnCount; ++col)
widths[col] = 0;
for each (var item:Object in dg.dataProvider)
for (col = 0; col < dg.columnCount; ++col)
renderer = new DataGridItemRenderer();
dg.addChild(renderer);
dgCol = dg.columns[col];
renderer.text = dgCol.itemToLabel(item);
widths[col] = Math.max(renderer.measuredWidth, widths[col]);
height = Math.max(renderer.measuredHeight, height);
dg.removeChild(renderer);
for (col = 0; col < dg.columnCount; ++col)
dg.addChild(renderer);
renderer.text = dg.columns[col].headerText;
widths[col] = Math.max(renderer.measuredWidth,widths[col]);
dg.removeChild(renderer);
text = widths[col];
dg.columns[col].width = text + widthPadding;
if (height != 0)
dg.rowHeight = height + heightPadding;
]]>
</mx:Script>
<mx:DataGrid id="myADG"
dataProvider="{dpFlat}" rowCount="{dpFlat.length}" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn dataField="Region" />
<mx:DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" />
<mx:DataGridColumn dataField="Territory" />
<mx:DataGridColumn dataField="Actual" />
<mx:DataGridColumn dataField="Estimate" />
</mx:columns>
</mx:DataGrid>
<mx:Button label="click" id="click" click="optimizeDataGrid(myADG,25,5);"/>
</mx:Application>
Regards
HarikumarWith horizontalScrollPolicy="off" (the default), it is hard to control
column widths because the columns are sometimes overridden to make sure they
fit on the screen. -
Need help adding image to datagrid column
Hi,
Can anyone tell me how to add an image to a datagrid column?
I have created a flex library project which contains a mxml component with a datagrid, an item renderer mxml component which rendered the image within the datagrid column depending on the value coming back from the database for that column and a folder 'assets' which hold all the images. When I add the library to my main project and call the mxml component with the datagrid an image place holder is visible in the datagrid column but not the image. However, if I take the image out of the library project and added to an 'assets' folder in the main project the image is displayed in the datagrid column.
It looks like, even though the images are in the flex library project and only the flex library project is trying to display the images in the datagrid, the library project is looking in the main application project folder for the image.
Does anyone know why this is happening and how to fix it?
Thanks in advance for an help,
Xander.I have tried embedding the images in my library but it still didn't work. Also I can't embed the image as I'm using the value of the column to complete the image name, for example in my mxml item renderer component I have the added the following code
<mx:Image source="@Embed(source='assets/' + data.mycolumnvalue + '.png')" tooltip="{data.mycolumnvalue}"/>
but nothing is displayed. -
How can I get this example to wok with <mx:HTTPService>
insead of the inline <mx:XML> ?
Dynamic DataGrid columns
Example of how to dynamically create DataGridColumns
A completely dynamic DataGrid example.
This example uses the xml from the Flexstore example. It
examines the first product node and uses that to create the
definitions for the columns. There is some example logic to change
the columns properties.
It then instantiates the GataGrid and its columns array,
assigns the properties, and then the dataProvider, and then adds
the dataGrid to the application container.
The example is fully self-contained, since a portion of the
catalog.xml file is included in the mxml.
<?xml version="1.0" encoding="utf-8"?>
<!-- This example uses the dataProvider to build the
dataGrid columns dynamically -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
private var _xlcCatalog:XMLListCollection; //the
dataProvider for the DG
//run by creationComplete
public function initApp():void
_xlcCatalog = new XMLListCollection(xmlCatalog.product);
//wrap the XML product nodes in an XMLListCollection
buildDG(); //creates the dataGrid
}//initApp
private function buildDG():void
var aColumnDef:Array = getColumnDefArray(); //returns a
noraml array of objects that specify DtaGridColumn properties
var oColumnDef:Object;
var dg:DataGrid = new DataGrid; //instantiate a new DataGrid
var dgc:DataGridColumn;
var aColumnsNew:Array = dg.columns
var iTotalDGWidth:int = 0;
for (var i:int=0;i<aColumnDef.length;i++) { //loop over
the column definition array
oColumnDef = aColumnDef
dgc = new DataGridColumn(); //instantiate a new
DataGridColumn
dgc.dataField = oColumnDef.dataField; //start setting the
properties from the column def array
dgc.width = oColumnDef.width;
iTotalDGWidth += dgc.width; //add up the column widths
dgc.editable = oColumnDef.editable;
dgc.sortable = oColumnDef.sortable
dgc.visible = oColumnDef.visible;
dgc.wordWrap = oColumnDef.wordWrap;
aColumnsNew.push(dgc) //push the new dataGridColumn onto the
array
dg.columns = aColumnsNew; //assign the array back to the
dtaGrid
dg.editable = true;
dg.width = iTotalDGWidth;
dg.dataProvider = _xlcCatalog; //set the dataProvider
this.addChild(dg); //add the dataGrid to the application
}//buildDG
//uses the first product node to define the columns
private function getColumnDefArray():Array
//Alert.show("colcount:" + xmlCatalog.toXMLString());
var aColumns:Array = new Array();
var node0:XML = xmlCatalog.product[0]; //get the first
"product" node
var xlColumns:XMLList = node0.children(); //get its child
nodes (columns) as an XMLList
var xmlColumn:XML
var oColumnDef:Object;
for (var i:int=0;i<xlColumns.length();i++) { //loop over
the xmlList
xmlColumn = xlColumns;
oColumnDef = new Object();
oColumnDef.dataField = xmlColumn.localName(); //make the
dataField be the node name
switch (oColumnDef.dataField) { //conditional column
property logic
case "name":
oColumnDef.width = 80;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
case "description":
oColumnDef.width = 200;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = true;
break;
case "price":
oColumnDef.width = 40;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = true;
oColumnDef.wordWrap = false;
break;
case "image":
oColumnDef.width = 100;
oColumnDef.sortable = false;
oColumnDef.visible = false;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
default:
oColumnDef.width = 50;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
aColumns.push(oColumnDef);
return aColumns; //return the array
}//getColumnDefArray
]]></mx:Script>
<mx:XML id="xmlCatalog">
<catalog>
<product productId="1">
<name>Nokia 6010</name>
<description>Easy to use without sacrificing style,
the Nokia 6010 phone offers functional voice communication
supported by text messaging, multimedia messaging, mobile internet,
games and more</description>
<price>99.99</price>
<image>assets/pic/Nokia_6010.gif</image>
<series>6000</series>
<triband>false</triband>
<camera>false</camera>
<video>false</video>
<highlight1>MMS</highlight1>
<highlight2>Large color display</highlight2>
</product>
<product productId="2">
<name>Nokia 3100 Blue</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_blue.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="3">
<name>Nokia 3100 Pink</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_pink.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="4">
<name>Nokia 3120</name>
<description>Designed for both business and pleasure,
the elegant Nokia 3120 phone offers a pleasing mix of features.
Enclosed within its chic, compact body, you will discover the
benefits of tri-band compatibility, a color screen, MMS, XHTML
browsing, cheerful screensavers, and much more.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3120.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Multimedia messaging</highlight1>
<highlight2>Animated screensavers</highlight2>
</product>
<product productId="5">
<name>Nokia 3220</name>
<description>The Nokia 3220 phone is a fresh new cut
on some familiar ideas - animate your MMS messages with cute
characters, see the music with lights that flash in time with your
ringing tone, download wallpapers and screensavers with matching
color schemes for the interface.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3220.gif</image>
<series>3000</series>
<triband>false</triband>
<camera>true</camera>
<video>false</video>
<highlight1>MIDI tones</highlight1>
<highlight2>Cut-out covers</highlight2>
</product>
</catalog>
</mx:XML>
</mx:Application>It should work the same way.
What problem are you having?
Tracy -
Adding a Tree into a datagrid column
I have a requirement where I have to create a datagrid with
one of the columns having a tree control. The problem I am trying
to resolve is how to dynamically change the height of the datagrid
column which has the tree when the tree is collapsed and
dynamically increase the datagrid column height when the tree is
expanded.
Is is feasible ? Am I chasing a wild dream ?
Any help will be greatly appreciated...
ThanksDarin,
Thank you for responding. I was able to get a tree display in
a datagrid. I am going to attach all the code.
The problem I am facing is, I need two clicks to expand a
tree in the datagrid column so that both the tree to expand and the
datagrid column to adjust its height. Let me know why this is so.
May be, being a newbie, I am completely off the track here. Thanks
in advance.
THE MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="com.ram.flash.custom.*">
<mx:XML id="xmlData" source="myDataWithTree.xml"/>
<mx:HBox>
<mx:DataGrid id="dgSource"
dataProvider="{xmlData.person}" editable="false"
variableRowHeight="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn editable="false" sortable="false"
resizable="true" width="400" textAlign="left" headerText="Id"
dataField="address">
<mx:itemRenderer>
<mx:Component>
<ns1:PruDataGridTreeColumn
disclosureOpenIcon="@Embed(source='icn_minus.jpg')"
disclosureClosedIcon="@Embed(source='icn_plus.jpg')" width="260"
height="20" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"
editable="false"/>
<mx:DataGridColumn headerText="Age" dataField="age"
editable="false"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
THE DATA
<?xml version="1.0" encoding="UTF-8" ?>
<data>
<person>
<name>Mister</name>
<age>36</age>
<address>
<Capitals label="U.S. State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person><person>
<name>Missus</name>
<age>28</age>
<address>
<Capitals label="Indian State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person>
</data>
THE CUSTOM ACTIONSCRIPT CLASS
package com.ram.flash.custom
import flash.geom.Rectangle;
import mx.core.IDataRenderer;
import mx.controls.listClasses.IListItemRenderer;
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import mx.managers.ISystemManager;
import mx.controls.Tree;
import flash.display.Sprite;
import flash.display.DisplayObject;
import mx.events.FlexEvent;
import mx.collections.XMLListCollection;
import flash.events.MouseEvent;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import mx.core.ClassFactory;
import mx.events.ScrollEvent;
import mx.controls.DataGrid;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
public class PruDataGridTreeColumn extends Tree implements
IListItemRenderer, IDataRenderer
private var _data : Object = null;
private var _dataGrid:DataGrid = null;
[Bindable("dataChange")]
public override function get data():Object
return _data;
public function set myDataGrid(value:DataGrid):void
_dataGrid = value;
public function PruDataGridTreeColumn()
super();
public override function set data(value:Object):void
this._data = value;
this.invalidateProperties();
var xmlDATA:XMLList = new XMLList(_data);
this.labelField='@label';
this.dataProvider = xmlDATA.address.Capitals;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
override public function expandItem(item:Object,
open:Boolean, animate:Boolean=false, dispatchEvent:Boolean=false,
cause:Event=null):void
animate = true;
super.expandItem(item,open,animate,dispatchEvent,cause);
var lc:XML = new XML(item);
var ht:Number = 20;
var wt:Number = this.width;
if(open)
ht = (lc.children().length() * 20 + 40);
this.height = (lc.children().length() * 20 + 40);
else
ht = 20;
this.height = 20;
} -
Cancel edition in a Datagrid Column
What i´m wishing to do is very simple, i just want to cancel an edition in a DataGrid column,
Loosing focus of the textbox confirms the edition, i wanted to place 2 buttons above the edition text box, cancel and confirm, but it seems to be impossible...
any idea?
thanks in advance!!Yea that seems to work fine for me so in full, with editing features
Custom Comp
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="182" height="72" >
<mx:Script>
<![CDATA[
private function handleOk():void {
this.data.someText = textInput.text
override public function set data(value:Object):void {
super.data = value;
textInput.text = data.someText
private function cancel():void {
textInput.text = data.someText;
]]>
</mx:Script>
<mx:TextInput id="textInput" x="10" y="10" />
<mx:Button x="10" y="40" label="Update" click="handleOk()"/>
<mx:Button x="85" y="40" label="Cancel" click="cancel()"/>
</mx:Canvas>
Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{someText : 'Line 1'},
{someText : 'Line 2'},
{someText : 'Line 3'},
{someText : 'Line 4'},
{someText : 'Line 5'},
{someText : 'Line 6'},
{someText : 'Line 7'},
{someText : 'Line 8'},
{someText : 'Line 9'},
{someText : 'Line 10'}
]]>
</mx:Script>
<mx:DataGrid x="71" y="90" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="someText" itemRenderer="Comp1" width="182"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Hope this helps
Andrew -
Setting the editable property of a datagrid column dynamically
Hi,
Im trying to set the editable property and renderer is editable property for a datagrid column to false on the creation complete event of the datagrid.But It does not work.While visible property works.why doesnt the editable property work.The particular column has a renderer which is a text box.and the editable property is set to false initially.Any Suggestions or ideas on how to achieve this will be of great help.Eu tenho vontade de estar devidamente por dentro de tudo isso.
-
I am looking for a way (action script code?) to sum datagrid
column values.
I am using Flex2 with Cold Fusion MX7.
I populate a DataGrid by setting dataprovider to the result
of a Coldfusion query.
(this.masterList.dataProvider = event.result as
ArrayCollection;)
This all works fine.
The masterList datagrid has debit, credit, and unitcost
columns. I want to sum those columns individually, and display the
results in text boxes in another panel.
I could run a Coldfusion query to return the sums, but would
like to do it on the client side with action script.
I want to sum them everytime I update the datagrid, so need
action code that I can put in the result function.
I am new to ActionScript, and not sure how to loop through
the array collection(and/or) dataprovider and sum the items.
Any help would be appreciated.
Thanks.Loop through your array..if the arrayCollection was named
myArray;
private sumFunction():Number{
var sum:Number=0;
for(var i:uint=0;i<myArray.lenght;i++){
sum+=myArray
.debitValue;
return sum; -
How to bind each DataGrid column separately?
Good day fellow Flex developers!
Could you please help me out. I am trying to figure out how to bind each DataGrid column separately. I need to bind each column to a separate bindable array variable. Is there a dataProvider property for each DataGridColumn???
Thanks in advance,
Eugenehopefully nope
just imagine code complexity for that feature?
how would you think should behave DataGrid when you'll populate your separate arrays with variable items number each?
all you are able and should do is to build composite dataProvider source, join all your separate arrays into it, this is your responsibility.
If you feel this message answers your question or helps, please mark it respectively -
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.
Maybe you are looking for
-
I need to use my old Trophy phone for a couple of days until I get my new iPhone, but I forgot my passcode, as I haven't used it in over a year. How do I get in?
-
Hi ,i trying to restore my iphone 3g ,,i getting message 1015 !!! any help
-
i I understand that FIND should eliminate the need for an index. Unfortunately, in my case, many of the names that should be findable are in "gallery" captions and popup widgets, neither of which are searchable with FIND. Is there a work around? Tha
-
I can't update lion or snow from the updater nor from manual downloads. Please help
Does anyone have any idea why?
-
Is there any method of changing text navigation produced by the templates. I would like to change text font, style and colour. Or do I have to switch off navigation and create hyperlinks manually for all the navigation.