FLEX DataGrid Column Modification

1down votefavorite
I am new in Flex.I want to display 'Name' , 'Address', ' Contact' and 'orders'. Now one person can place N no of orders so in order field their will be a multipal entries. I want to show all details in grid format and same time i want to avoid duplicate row for 'name','address', ' 'Contact'. Please see the attachment for more understanding on my Q. I want to achieve same like it showing in attachment.
share [g+]share [fb]share [tw]

Hi,
Maybe you can try using itemRenderer in advancedDataGrid component to display the orders list.
Check this example:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf2.html
I hope this give you an idea.
Best,

Similar Messages

How to disaply multiple column of a table in a single flex datagrid column

Hi,
I have a table in my database which has say 3 column (Firstname,LastName,Location). I wanted to display these 3 different values in a single column in flex datagrid.
Could you please help me out in this
Thanks,
Pratik

Generally, in such scenarios each column is made corresponding to the column in database only and not single column.
However, we can setStyle of a datagrid to make it appear as if all three columns have been populated in single.
set verticalGridLines="false" for dataGrid. Further cosmetic changes can be made to realise the required look.
In some cases, labelFunction of a datagridColumn also suffices the need.
Tanu

Showing multiple links from inside a flex datagrid button

Hi,
I have a requirement where I need to show a button inside
flex datagrid column.Which I'm doing with custom itemrenderer.When
the User clicks on a particular button inside data grid I need to
show him multiple links with images where user cal click on one of
the links if he choses to do so.How do I achieve this.Any example
is greatly appreciated.
Regards
mflex.

"...show him multiple links with images ..." Where/how does
this need to be displayed?
Tracy

Flex datagrid borders off by 1px?

Is there a way to extend the datagrid component or any to her way to avoid this?
Flex datagrid column header borders and column borders keep going off by 1px... and they randomly alternate when resized.
I have no idea how to fix this, and it to me looks like a problem with flex, not so much what i coded
http://screencast.com/t/NmI3Zjk0NmU
http://screencast.com/t/YzE0NDk5 - resized
It's like it's going off by 1px because of some rounding error... no idea why this is happening, and I'm using
Code I'm using (a bit sloppy but still)
http://pastebin.ca/1888773

I could use someone's help on this... Every single datagrid i create (at least with a custom header gradient, I think), has borders off by 1px, what can I do to fix this? I've even seen this happening on other sample flex projects. No idea how to fix this

Flex 3: DataGrid Column width on resize

Hello experts,
I am facing an issue with width of DataGrid columns. We are using Flex 3.2.
I am setting the widths for columns in creationComplete handler of DataGrid. When the browser window is resized, say restore down and then maximize,
the column widths are changing. Please find the code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="100%" width="100%">
<mx:Script>
 <![CDATA[
 import mx.core.ScrollPolicy;
 [Bindable]
 private var isVisible:Boolean = true;
 private function creationCompleteHandler():void{
 dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
 artist.width = dataGrid.width * 0.40;
 album.width = dataGrid.width * 0.50;
 Price.width = dataGrid.width * 0.10;
 dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
 ]]>
</mx:Script>
<mx:DataGrid id="dataGrid" width="80%" height="100%" creationComplete="creationCompleteHandler()">
 <mx:ArrayCollection>
 <mx:Object Artist="Pavement" Price="11.99"
 Album="Slanted and Enchanted" />
 <mx:Object Artist="Pavement"
 Album="Brighten the Corners" Price="11.99" />
 </mx:ArrayCollection>
 <mx:columns>
 <mx:DataGridColumn id="artist" dataField="Artist"/>
 <mx:DataGridColumn id="album" dataField="Album" visible="{isVisible}"/>
 <mx:DataGridColumn id="Price" dataField="Price" />
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
Is there anything wrong i am doing here? Please help me in resolving this.
Thanks,
Srilatha

Hi Srilatha,
DataGrid width is 100% and the main application width also 100%, So the
DataGrid will try to occupy the whole window, when you do "restore down" &
"maximize" Application width will change.. and it will effect DataGrid and
its columns also. Try to give some fixed width for dataGrid and you can
expect the result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="100%" width="100%">
 <mx:Script>
 <![CDATA[
 import mx.core.ScrollPolicy;
 private var isVisible:Boolean = true;
 private function creationCompleteHandler():void
 dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
 artist.width = dataGrid.width * 0.40;
 album.width = dataGrid.width * 0.50;
 Price.width = dataGrid.width * 0.10;
 dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
 ]]>
 </mx:Script>
 <mx:DataGrid id="dataGrid" width="500" height="100%"
creationComplete="creationCompleteHandler()">
 <mx:ArrayCollection>
 <mx:Object Artist="Pavement" Price="11.99"
 Album="Slanted and Enchanted" />
 <mx:Object Artist="Pavement"
 Album="Brighten the Corners" Price="11.99" />
 </mx:ArrayCollection>
 <mx:columns>
 <mx:DataGridColumn id="artist" dataField="Artist"/>
 <mx:DataGridColumn id="album" dataField="Album"
visible=""/>
 <mx:DataGridColumn id="Price" dataField="Price" />
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
Thanks
Pradeep Reddy

Flex datagrid data column / webservice

I use a web service to populate a datagrid and its columns
(on of which is date). The web services sources the data from a sql
server database and thru ASP.net to the Flex application. I've been
seeing strange things. During testing, database records such as
"8/27/2008 8:58:00 PM " correctly shows up as 8/27/2008 in the Flex
application, but records after 9PM such as "8/27/2008 9:01:21 PM"
shows up as 8/28/2008 (the next days) .. seems like after 9 throws
off the data rendering.. please suggest.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Flex 3 - Handling service results:
Flex interprets the XML data that a web service or HTTP
service returns to ..... a DataGrid control with DataTable data
returned from a .NET web service.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_6.html
Flex cookbook beta - Building Flex Applications with SOAP Web
Services:
Mar 3, 2008 ... If you are using web services technologies
then it is usually ... The DataGrid tag instanciates an instance of
the DataGrid Flex control.
Link:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
Flex 3 - Using WebService components:
The Flex web service API generally supports Simple Object
Access Protocol (SOAP) ... property of a DataGrid control and
displayed in the DataGrid control.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_3.html
Adobe - Flex General Discussion:
Flex datagrid data column / webservice - justneed2know -
08/27/2008 ... I use a web service to populate a datagrid and its
columns (on of which is date).
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
All Classes (Flex 3):
mx.rpc.soap, AbstractWebService is an abstract base class for
implementations that provide RPC access to SOAP-based web services.
Link:
http://livedocs.adobe.com/flex/3/langref/class-summary.html
Adobe - Developer Center : Using Flex Builder to Create Web:
Using Flex Builder to Create Web ServiceBased Flex
Applications ... The web service result data needs to flow to the
DataGrid. Select the 'Data will flow
Link:
http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

Sorting columns in a flex datagrid

The datagrid gets its data from a back end database which has records like
 RecordID Division Department Date_Report_Submitted
 1. Finance Accounting 11/1/2010
 2. Engineering Design 4/2/2011
 3. Engineering Implementation 4/2/2011
 4. Support Chat_Support 2/4/2010
Clicking on the headers in the Datagrid column(Department) results in a sort based on recordID like
 Division Department Date_Report_Submitted
 Finance Accounting 11/1/2010
 Engineering Design 4/2/2011
 Engineering Implementation 4/2/2011
 Support Chat_Support 2/4/2010
whereas I want it to be sorted alphabetically for the Datagrid column(Department) like
 Division Department Date_Report_Submitted
 Finance Accounting 11/1/2010
 Support Chat_Support 2/4/2010
 Engineering Design 4/2/2011
 Engineering Implementation 4/2/2011
since Accounting should come before Chat_Support as per lexicographical order.
Looked at http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-fl ex/#more-590 and have something like
 <mx:DataGrid id="myRecords" dataProvider="{myRecords_dp}" width="810" height="274"
 itemClick="getRecordData(event)">
 <mx:columns>
 <mx:DataGridColumn id="firstCol" width="180" fontFamily="Arial" fontSize="12"
 wordWrap="true" />
 <mx:Button label="Click to Sort" click="mysort()" />
 </mx:columns>
 </mx:DataGrid>
and
 private function mysort():void
 var sortField:SortField = new SortField();
 sortField.compareFunction = mycompare;
 sortField.descending = false;
 var sort:Sort = new Sort();
 sort.fields = [sortField];
 myRecords.sort = sort;
 myRecords.refresh();
 private function mycompare(lhs:Object, rhs:Object):int
 var valueA:String = lhs.text();
 var valueB:String = rhs.text();
 return ObjectUtil.stringCompare(valueA, valueB);
I get errors like
1061: Call to a possibly undefined method refresh through a reference with static type mx.controls:DataGrid.
for myRecords.refresh();
and
Access of possibly undefined property sort through a reference with static type mx.controls:DataGrid.
for myRecords.sort
Any suggestions would be appreciated.

I should have clarified this from the start itself. The backend database has few tables. One is Divisions which has some fields like
Division ID Division Name. Another is Department which has fields like RecID, Division ID, Department Name. What is being retrieved from the dataprovider(myRecords_dp) is Rec ID, then a labelfunction converts the Rec ID into Department name by looping over the department table and displays it. So, if Implementation has a recID of 3 and Chat_Support of 4, Implementation will come before Chat_support when I click on the header so it will not be in lexicographical order.

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 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>
 
 <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">
 
 <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
 
 <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
 </s:RadialGradient>
 </s:fill>
 </s:Path>
 </fx:Component>
 
 <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.
 * 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.
 * @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>
 
 
 <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>
 
 
 <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>
 
 
 <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>
 
 
 <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>
 
 
 <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>
 
 
 <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>
 
 <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: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.

Editable Datagrid Column

I have to make a datagrid column editable during runtime based on the data. If the column has a specific data then the column should not be editable otherwise it should be editable. Can we do it in flex ? please show some pointers.

I don't have any examples , but you should probably have a custom itemrenderer for your datagrid which contains a textarea. In the itemrenderer should override set data( value:Object ):void. In that function you check a condition to see if the textarea "editable" value should be set to true or false. Below I have some pseudo-code.
<s:Itemrenderer>
override public function set data( value:Object ):void
if( object.decidingValue > 0 )
TnA.editable = false;
else
TnA.editable = true;
<s:TextArea id="TnA" />
</s:Itemrenderer>
or you could just put the code in the TextArea declaration
<s:TextArea id="TnA" editable="{data.decidingValue > 0}" />
(TextInput area is probably more appropriate than a textarea , but the logic is the same )
If this response was helpful please mark it as such.

Flex datagrid custom itemEditor - not returning data

Hi,
I am new to flex and this is a basic "How to" question.
I want to write custom item editors and renderers for a datagrid column.
I am facing two problems here
1) override public function get data() : Object is not working. however, if the type of the column is just text then override public function get text():String is working. Specifying editorDataField in the datagrid column definition is working for some types ex:Strings, Numbers
2) Nothing is working for slightly more complex types like an Image. even editorDataField is not working. Somewhere between the user editing the data (in the case of an image, edit = browse, select & load an image) and grid asking for data at itemEditEnd, the entire data loaded by the user is disappearing and it is returning null or some default value I'd set it to in override public function set data().
I am aware that datagrid reuses both editors and renderers but I dono how the data user has set is getting lost while the focus is on the same cell
I have tried to use getter setter for this custom data field mentioned in editorDataField but when I do so, nothing works.. it fails even for string type
It should be a simple thing to do and I am sure I am making some silly mistake .. please help me out. It has driven me nuts since today morning..
any pointers would be really appreciated.

Hi,
thanks for the info. This is the understanding that I had after reading livedocs about item renderers.
I have given the correct editorDataField and dataField. But it isnt working..I am not sure what you mean by For complex renderers, make sure the property is properly implemented on the outer component.
The weird part is specifying editorDataField works for String and not for an image. I am pasting some of code (highlighting relevant parts) below.. please have a look and tell me what I am missing.
Datagrid :
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498"
 dataProvider="{this.slideArray}">
 <mx:columns>
 <mx:DataGridColumn headerText="Text" width="100"
 resizable="true" sortable="false"
 itemRenderer = "mx.controls.Label"
 itemEditor="editors.TextEditor"
 dataField="text" editorDataField="myData"/>
 <mx:DataGridColumn headerText="Image" width="600" resizable="true" sortable="false"
 itemRenderer="mx.controls.Image"
 itemEditor="editors.ImageEditor"
 dataField="image" editorDataField="myData"/>
 </mx:columns>
 </mx:DataGrid>
Text editor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 focusEnabled="true"
 initialize="initEditor()">
 <mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
 <fx:Script>
 <![CDATA[
 import domain.Slide; // has two properties : public var text : String and public var image : mx.controls.Image;
 override public function set data(value:Object):void{
 super.data = value;
 this.edit.text = (value as Slide).text;
 public var myData : String; // editor data field
 import mx.binding.utils.BindingUtils;
 private function initEditor():void{
 BindingUtils.bindProperty(this,"myData", this.edit, "text");
 ]]>
 </fx:Script>
</s:MXDataGridItemRenderer>
ImageEditor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 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%"
 focusEnabled="true" contentBackgroundColor="#F1B4B4">
 <mx:Image id="img" x="0" y="0" width="200" height="200" />
 <s:Button label="Click to Add Image" id="addImageButton" click="addImageButton_clickHandler(event)"
 x="0" y="{this.height - addImageButton.height}"/>
 <fx:Script>
 <![CDATA[
 import domain.Slide;
 public var myData : Image; //editor data field
 override public function set data(value:Object):void{
 super.data = value;
 if( (value as Slide).image != null) this.img.source = (value as Slide).image.source;
 protected function addImageButton_clickHandler(event:MouseEvent):void
 // select image from file system
 var imgFilter : FileFilter = new FileFilter("Images","*.jpg;*.png;*.gif");
 var fileRef : FileReference = new FileReference();
 fileRef.addEventListener(Event.SELECT, fileSelectHandler);
 fileRef.addEventListener(Event.OPEN, fileOpenHandler);
 fileRef.addEventListener(Event.CANCEL, fileCancelHandler);
 fileRef.browse([imgFilter]);
 function fileRefSelectListenerUp(e:Event):void{}
 private function fileSelectHandler(event : Event):void{
 var fileRef : FileReference = event.target as FileReference;
 fileRef.addEventListener(Event.COMPLETE, fileLoadHandler);
 fileRef.load();
 private function fileLoadHandler(event : Event) : void{
 var fileRef : FileReference = event.target as FileReference;
 this.myData = new Image;
 this.myData.name = fileRef.name;
 this.myData.source = fileRef.data;
 this.img.source = fileRef.data;
 private function fileOpenHandler(event : Event):void{}
 private function fileCancelHandler(event : Event):void{}
 ]]>
 </fx:Script>
</s:MXDataGridItemRenderer>

Flex DataGrid with Dynamic Grouping

Does anyone know of any examples of Flex datagrids that have
grouping features comparable to the numerous grid components
available in the ASP.NET world? I’m thinking of .NET
component vendors such as Telerik, Infragistics, Component Art,
DevExpress, etc.
The way these .NET controls generally work is that you drag
the header of a column to a bar above the grid, which causes the
grid to redraw based on the new grouping you just specified.
This is an example of a grid component that I am currently
using:
Telerik
Grid
Thank you,
Mike Chabot

The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

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/> 
 </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>

Setting datagrid column width according to itemrenderer.

Hi all,
This is my first question ever in any forum i have visited, so if you find anything stupid about my way of asking question then Pls ignore.
I have taken a datagrid and for one of the datagrid column I have an itemrendere which is an HBOX. THe Hbox contains 3 buttons Edit, Update, cancel. At first only Edit button is visible and on click of it, It is removed from the Hbox and 2 other buttons i.e. Update and Cancel are added in the Hbox. what i want is when i add these 2 buttons the size of the datagrid column should get adjusted accordingly.
I have serached a lot abt this but couldnt find a solution. Please help.
Happy new year to all.....

@Pramod :
(listdata.owner as datagrid) .validateNow();
// thats wat i did. but not working.
@John : TypicalItem may work but I am using Flex Builder 3 and i think it does not provide the typicalItem class in it.

Flex Datagrid Issue

Hi
I am using a flex datagrid component which has around 48 columns.
There is a option for the user to select which columns he wish to see.
Based on the user's selection the visible columns will be 1-50.
The Datagrid is inside a Vbox container.
The issue is, based on the screen resolution and the number of columns selected extra scroll bars(horizontal and vertical) appears
for the whole Vbox in addition to the Datagrid's scrollbars.
i.e if resolution is high and user selects more than 46 columns extra scroll bar appears.
If resolution is low the extra scroll bars appears as soon as the visible columns is more than 20.
Please help me if there is any resolution in preventing the extra scroll bars from appearing.Ideally, Since datagrid has its own scroll bars making more columns visible should not increase the width of datagrid.
Any help will be appreciated

Have you hard-coded the height and width of both the VBox and the Datagrid? If you set the datagrid height and width 40 pixels or so less than the VBox it should solve that problem, I'd think.
Or, you could set your DataGrid height and width to 90%.
Sorry if you've already tried this. Another option is to set your datagrid's scroll policy to "off" and just leave the VBox's scroll bars available.
-John

FLEX DataGrid Column Modification

Similar Messages

Maybe you are looking for