Datagrid horizontalScrollPolicy
I'm using an ItemRenderer to place a graphic into a column in
a Datagrid. The image is too wide for the column, so a scroll bar
appears. I'll take care of the width problem with a mask, but that
does not solve the scoll bar issue. I have tried using
horizontalScrollPolicy="off" in the Datagrid, but that does not
work-- the column still scrolls. I want the scrollbar to disappear.
Is there a way to turn it off?
"SiHoop" <[email protected]> wrote in
message
news:gekr5p$aun$[email protected]..
> I'm using an ItemRenderer to place a graphic into a
column in a Datagrid.
> The
> image is too wide for the column, so a scroll bar
appears. I'll take care
> of
> the width problem with a mask, but that does not solve
the scoll bar
> issue. I
> have tried using horizontalScrollPolicy="off" in the
Datagrid, but that
> does
> not work-- the column still scrolls. I want the
scrollbar to disappear. Is
> there a way to turn it off?
Turn it off in the itemRenderer
Similar Messages
-
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,
SrilathaHi 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 -
Horizontal Scrollbar on DataGrid
Hi,
I would like to create a DataGrid with many columns that the
width of DataGrid will larger than the screen. So I need a
horizontal scrollbar on DataGrid to let user move the grid
horizontally. However I could not found which proprity is used to
enable the horizontal scrollbar and the dafault of datagrid do not
have it. Could anyone can give me some advises?
Thanks a lot!
WilsonBy default the DataGrid will size all of the columns so they
fit into the horizontal space allocated to the DataGrid. If you
want to do what you suggest, then:
<mx:DataGrid horizontalScrollPolicy="on" ... >
will turn on the scrollbar and tell the DataGrid to relax its
size constraints. -
Print data in Datagrid with AS3
Dear all,
I would want to print out all the data inside my Datagrid which were populated in flash AS3. Taking into consideration that my datagrid has horizontalScrollPolicy and verticalScrollPolicy activated, how do I print the whole information?
This is the closest code I'm looking for, but I had alot of errors when I tried to use it, maybe because it is in AS2 & i convented it wrongly...
Link: http://www.knowledgesutra.com/forums/topic/29459-print-with-flash-and-datagrids-without-re sizing/
Do take a look at the code please.
My convented code from AS2 to AS3:
import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
var dp:DataProvider = new DataProvider();
var fitPage:Boolean = false;
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitleTestPrizeNameTestPrizeNameTestPrizeName", Prize_Name:"TestPrizeNameTestPrizeNameTestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1TestName1TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeName"});
dp.addItem({no:"1", Winner_Name:"TestName1", Prize_Title:"TestPrizeTitle", Prize_Name:"TestPrizeNameTestPrizeNameTestPrizeNameTestPrizeNameTestPrizeName"});
datagrid.columns = ["no","Winner_Name","Prize_Title","Prize_Name"];
datagrid.getColumnAt(0).width = 50;
datagrid.getColumnAt(1).width = 150;
datagrid.getColumnAt(2).width = 100;
datagrid.getColumnAt(3).width = 350;
datagrid.dataProvider = dp;
datagrid.horizontalScrollPolicy = ScrollPolicy.ON;
datagrid.setSize(600, 250);
clickme.addEventListener(MouseEvent.CLICK, clickmeFn)
function clickmeFn(e:MouseEvent){
fitPage = true;
doPrint()
function doPrint(){
if (fitPage == false) fitPage = true;
var pj:PrintJob = new PrintJob();
// position of currently visible rows stored
var prev_vPosition:Number = datagrid.verticalScrollPosition;
var prev_width:Number = datagrid.width;
var prev_height:Number = datagrid.height;
var prev_vScroll = datagrid.verticalScrollPolicy;
var prev_selectedIndex = datagrid.selectedIndex;
var dgPrintWidth:Number = 0;
var dgPrintHeight:Number = 0;
if (pj.start() != true) {
return;
// hide scrollbar for print
datagrid.verticalScrollPolicy = "off";
// hide the selection
datagrid.selectedIndex = undefined;
// datagrid width for printing
if (fitPage) {
dgPrintWidth = pj.pageWidth;
} else {
if (prev_width < pj.pageWidth) {
dgPrintWidth = prev_width;
} else {
dgPrintWidth = pj.pageWidth;
// number of rows per view, ignoring fractions (floor)
var rowsPerPage:Number = Math.floor((pj.pageHeight-datagrid.headerHeight)/datagrid.rowHeight);
// total number of pages to be printed, if there are any fractions, have one page for that (ceil)
var total_pages:Number = Math.ceil(datagrid.dataProvider.length/rowsPerPage);
// number of full pages to be printed, ignoring fractions (floor)
var full_pages:Number = Math.floor(datagrid.dataProvider.length/rowsPerPage);
// number of rows on last page if partial
var last_page_rows:Number = 0;
// height of last page if partial
var last_page_height:Number = 0;
// partial last page ?
if (total_pages != full_pages) {
last_page_rows = datagrid.dataProvider.length - (full_pages*rowsPerPage);
last_page_height = datagrid.headerHeight + (datagrid.rowHeight * last_page_rows);
// datagrid height for printing
dgPrintHeight = datagrid.headerHeight + (datagrid.rowHeight * rowsPerPage);
datagrid.setSize(dgPrintWidth, dgPrintHeight);
for (var i = 0; i<total_pages; i++) {
// if last page and partial - resize grid
if ((i == total_pages - 1) && (last_page_rows > 0)) {
datagrid.setSize(dgPrintWidth, last_page_height);
// move the visible row position.
datagrid.verticalScrollPosition = i*rowsPerPage;
// size box relative to the grid
var b = {xMin:0, xMax:datagrid.width, yMin:0, yMax:datagrid.height};
if (!fitPage && prev_width < pj.pageWidth) {
var x0 = (pj.pageWidth - prev_width) / 2;
b = {xMin:(-x0), xMax:(datagrid.width+x0), yMin:0, yMax:datagrid.height};
pj.addPage(datagrid, b);
pj.send();
pj = null;
// delete pj;
// previous scrollPolicy
datagrid.verticalScrollPolicy = prev_vScroll;
// position of currently visible rows restored
datagrid.setSize(prev_width, prev_height);
datagrid.selectedIndex = prev_selectedIndex;
datagrid.verticalScrollPosition = prev_vPosition;
The error I get when I tried to print it:
TypeError: Error #1034: Type Coercion failed: cannot convert Object@26ec1d31 to flash.geom.Rectangle.
at _fla::MainTimeline/doPrint()
at _fla::MainTimeline/clickmeFn()
Advice needed
-Zainuuvar columns:Array = ["Flash", "ActionScript", "Republic of Code"];
trace(columns);
//Start printing headers
var xPos:Number = 0;
var tbWidth:Number = 0;
//leave 2 rows margin at top
var rowY:Number = _rowHeight * 2;
for (var i = 0; i < columns.length; i++)
//define xPos by adding the tbWidth of the last loop
xPos = xPos + tbWidth;
var column:DataGridColumn = targetDG.getColumnAt(i);
//get width of this column
tbWidth = column.width;
//add textField
printClip.createTextField("header_" + i , printClip.getNextHighestDepth(), xPos, rowY,tbWidth, _rowHeight);
var thisTb:TextField = printClip["header_" + i];
//thisTb.setNewTextFormat(headerFormat);
thisTb.defaultTextFormat = headerFormat;
thisTb.border = true;
thisTb.borderColor = 0xCCCCCC;
thisTb.background = true;
thisTb.backgroundColor = 0xD5EAFF;
thisTb.text = column.headerText;
I got this AS2 code and I tried to convent it into AS3 but I have this error..
1046: Type was not found or was not a compile-time constant: DataGridColumn.
I have bold the line that causes this error. Anyone knows the solution for this error? -
Flex datagrid automatic width?
Hello,
I'm currently attempting to use the datagrid component to
display some information. This information will be pulled in
externally, and I will not know the length of the content that will
be in each row. Is there a way that I can get the width of the
datagrid to automatically be the width of the row that has the most
content? For example, if my data grid displays:
this is row one
this is row two
this is row three... is has the most content....
I would like the datagrid to be the width of row three
(without scrollbars). I can't specifiy a width because I don't know
how long the content will be, and specifying a width of 100% makes
the datagrid wider than it needs to be. Any ideas?
Thanks in advance for any advice.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 -
Hi!
I have a DataGrid with 8 columns but only 3 columns are
visible so
i set the DataGrid horizontalScrollPolicy property ="on" to
scroll the DataGrid and be able to see the rest of the columns.
When i press the scroll bar buttons or move the scroll bar
the DataGrid shows only complete columns, is it possible to show
just a part of the column when scrolling the DataGrid ?
This is because when i scroll the DataGrid i want to scroll a
panel with the same distance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" >
<mx:Script>
<![CDATA[
import flash.events.Event;
import mx.events.ScrollEvent;
import mx.events.ScrollEventDirection;
import mx.controls.scrollClasses.ScrollBar;
private function Scrolling(eventScroll:ScrollEvent):void
var hScroll:ScrollBar = pnl_Edits.horizontalScrollBar;
if (eventScroll.direction ==
ScrollEventDirection.HORIZONTAL)
hScroll.scrollPosition = eventScroll.position;
]]>
</mx:Script>
<mx:DataGrid id="dataGrid"
scroll="Scrolling(event);"
horizontalScrollPolicy="on"
width="300" x="142" y="460" >
<mx:columns>
<mx:DataGridColumn dataField="@name" headerText="Name:"
width="150" />
<mx:DataGridColumn dataField="@colA" headerText="Column
A:" />
<mx:DataGridColumn dataField="@colB" headerText="Column
B:" />
<mx:DataGridColumn dataField="@colC" headerText="Column
C:" />
<mx:DataGridColumn dataField="@colD" headerText="Column
D:" />
<mx:DataGridColumn dataField="@colE" headerText="Column
E:" />
<mx:DataGridColumn dataField="@colF" headerText="Column
F:" />
</mx:columns>
</mx:DataGrid>
<mx:Panel x="129" y="359" width="313" height="93"
layout="absolute" borderStyle="solid" horizontalScrollPolicy="on"
id="pnl_Edits">
<mx:TextInput x="0" y="0" width="140"/>
<mx:TextInput x="138" y="0" width="103"/>
<mx:TextInput x="240" y="0" width="103"/>
<mx:TextInput x="341" y="0" width="103"/>
<mx:TextInput x="443" y="0" width="103"/>
<mx:TextInput x="545" y="0" width="103"/>
<mx:TextInput x="646" y="0" width="103"/>
</mx:Panel>
</mx:Application>You will have to extend DataGrid to do this. I do not have
any specific advice.
You could also put the DG in a canvas, and scroll the canvas
manually.
Tracy -
Hello all.
Im sure this is a simple fix, but after searching google for a fair amount of time, thought i would post up here.
I have a simple datagrid using the following code -
<mx:DataGrid id="chatDG" width="100%" height="143" x="0" y="0" fontSize="10" horizontalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn headerText="Question" dataField="message"/>
</mx:columns>
</mx:DataGrid>
This is displaying strings of text taken from a mysql database using a php script. It works fine, each message is on a new line, everything is perfect. Apart from if a message is too long it runs off the right side of the datagrid.
There is a horizontal scroll bar displayed but it is disabled / greyed out. THe datagrid only has one column, i need to be able to scroll ffrom right to left in order to read the full string of text, any suggestions?
Thanks in advancetry
<mx:DataGridColumn id="dgc" wordWrap="true" />
you should be able to read everything now.
if it doesn't work, set also the <mx:DataGrid horizontalScrollPolicy="off"/>. it will work.
Thanks,
Sathish. -
Datagrid Image Renderer Broken in CS SDK but not Flex project
Within a Photoshop Extension, I have a DataGrid which has an inline custom image renderer whose dataprovider is an ArrayCollection called "photos" representing a list of photos and some metadata properties. One of the properties "fileName" is concatenated with a path to a thumbnail image such as source="{'LR_AUTO/imported/thumbs/' + data.fileName}".
The dataprovider is bound to a LCDS DataService. When the extension is first launched, the dataservice initializes the dataprovider with the existing values for the "photos" arraycollection. The thumbnail images are correctly shown.
However, when the DataService receives a new row and updates the photos dataprovider, the datagrid's new row shows a broken image for the thumbnail even though the path is correct. I have dumped the photos dataprovider and verified that all information is correct. When I close Photoshop and relaunch it from Flash Builder, once again LCDS initializes the photos ArrayCollection and THEN the thumbnail that previously showed as broken show up correctly.
I have a ColdFusion Directory Watcher Gateway that watches a directory where Lightroom auto-imports images from a tethered capture session. When the camera sends Lightroom a new image, the new image is processed by Lightroom and moved to a target directory, and since ColdFusion's Directory Watcher is watching that targeted directory, ColdFusion will create a thumbnail image in a subfolder and notifiy LCDS that of the new image and related metadata.
*** This is the interesting part *** When Lightroom places new images in the target directory, this is propogated to the Photoshop Extension's datagrid, and the new row shows up as described earlier, showing a broken image for the thumbnail. BUT, instead of Lightroom, if I manually copy images to the folder where ColdFusion is watching, then exact same code path is exectuted and in the Photoshop Datagrid the new row appears and THE THUMBNAIL IMAGE shows up correctly.
The difference seems to be only in how the images are put in the original target location. The problem is when Lightroom puts them there, but it works when I put them there as a user.
*** More Interesting Info *** I have the Flex code for the Photoshop Extension duplicated in a standalone, non-CSSDK project using Flex 3.4 which I launch in a browser. I have mirrored the code in the Photoshop extension, but in this manner, the problem does not exist. With plain Flex 3.4 in a browser, whenever LCDS notifies the datagrid of a new photo record, the datagrid's new row ALWAYS shows the thumbnail correctly.
A primary difference in how the thumbnail image is rendered is that in a browser, the Flex 3.4 project accesses the image assets over the network, however, in the Photoshop Extension, the image asset WITH THE SAME RELATIVE PATH is accessed over the local file system.
source="{'LR_AUTO/imported/thumbs/' + data.fileName}"
So in the case of the browser, this path is a relative URL and the image is retrieved over HTTP, however, in the PS Extension, the same path represents a file system path relative to the project folder.
Unfortunately, because the Flash Player (including APE) cannot access BOTH the network and the local filesystem, so I cannot change the Extension to use network access.
** The important part to remember is that when I stop the Flash Builder debug session and close Photoshop, then relaunch the debug with Photoshop, then all the images show up correctly in the Extension.
Your advice is appreciated.
Thank you!
Steve
====================================================
Environment
====================================================
Photoshop CS5 Extended 12.01 x32
Flash Builder 4
CS SDK 1.02
Extension Builder SDK 3.4
MacBook Pro / OS X 10.5 / Intel Core 2 Duo 2.66 GHz / Procs: 1 / Cores: 2 / Memory: 8 GB
App configured for Photoshop CS5 and Photoshop CS5 Extended
====================================================
NewsAgencyPhotoshop.mxml
====================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.stevenerat.news.*"
horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0"
layout="vertical" horizontalAlign="left" backgroundColor="#353535"
historyManagementEnabled="false"
creationComplete="init();">
<mx:Script>
public function handlePhotoClick(data:Object):void {
this.PreviewImageWindow = PreviewImage(PopUpManager.createPopUp(this,PreviewImage,true));
var filePath:String = data.dirPath + data.fileName;
PreviewImageWindow.addEventListener("imageOpenEvent",imageOpenListener);
PreviewImageWindow.addEventListener("imageCloseEvent",imageCloseListener);
PreviewImageWindow.addEventListener("imageSavedEvent",imageSaveListener);
PreviewImageWindow.setFileName(data.fileName);
PreviewImageWindow.setFilePath(filePath);
PreviewImageWindow.y = 0;
PreviewImageWindow.x = 0;
]]>
</mx:Script>
<mx:ArrayCollection id="photos"/>
<NewsPhoto/>
<mx:DataService id="ds" destination="NewsAgencyPhotos" autoSyncEnabled="true" autoCommit="true" conflict="conflictHandler(event)"/>
<mx:Label text="News Agency Photos" fontSize="20" paddingBottom="30"/>
<mx:Label text="Available Images" fontSize="15"/>
<mx:DataGrid id="photoIPTC" dataProvider="{photos}" editable="true" width="220" rowCount="5" rowHeight="75" wordWrap="true">
<mx:columns>
<mx:DataGridColumn headerText="id" dataField="fileName" width="40" editable="false" sortDescending="true"/>
<mx:DataGridColumn dataField="psLock" width="65" headerText="Status" editable="false" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:ComboBox editable="false">
<mx:dataProvider>
<mx:String>New</mx:String>
<mx:String>Open</mx:String>
<mx:String>Edited</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image click="outerDocument.handlePhotoClick(data);" source="{'LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
====================================================
A DUMP OF THE DATAPROVIDER
in this case, one array item existed when launched, then a second was added
while running. The first has its thumbnail show, the second item has broken image
====================================================
------------------DUMP----------------------------
(mx.collections::ArrayCollection)#0
filterFunction = (null)
length = 2
list = (mx.data::DataList)#1
fillParameters = (Array)#2
length = 2
localItems = (Array)#3
[0] (com.stevenerat.news::NewsPhoto)#4
aperture = "F10"
cameraLens = "EF24-70mm f/2.8L USM"
cameraModel = "Canon EOS 7D"
city = ""
copyrightNotice = "© Steven Erat 2011"
country = ""
creator = "Steven Erat"
description = ""
dirPath = "/Users/stevenerat/LR_AUTO/imported/"
fileName = "ERAT_STEVEN_20110122_162.jpg"
focalLen = "42.0 mm"
headline = ""
id = 1
iso = "100"
keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
psLock = "New"
shutterSpeed = "1/128 sec"
state = ""
[1] (com.stevenerat.news::NewsPhoto)#5
aperture = "F10"
cameraLens = "EF24-70mm f/2.8L USM"
cameraModel = "Canon EOS 7D"
city = ""
copyrightNotice = "© Steven Erat 2011"
country = ""
creator = "Steven Erat"
description = ""
dirPath = "/Users/stevenerat/LR_AUTO/imported/"
fileName = "ERAT_STEVEN_20110122_163.jpg"
focalLen = "42.0 mm"
headline = ""
id = 2
iso = "100"
keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
psLock = "New"
shutterSpeed = "1/128 sec"
state = ""
uid = "8BAC025E-60D1-11F1-3654-44BDB0D218CE"
view = (mx.collections::ArrayCollection)#6
filterFunction = (null)
length = 2
list = (mx.data::DataList)#1
sort = (null)
source = (null)
sort = (null)
source = (null)
------------------END_DUMP------------------------I expected that if my extension uses the local filesystem AND the network that I would get a Security Sandbox Exception as I recently described in this thread:
http://forums.adobe.com/thread/791918?tstart=0
However, I just tried changing my datagrid image renderer to access the thumbnail via HTTP and the thumbnail issue after Lightroom export does not happen.
<mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image click="outerDocument.handlePhotoClick(data);" source="{'http://localhost:8500/LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Furthermore, I can also open the image via the Photoshop DOM, and it does open correctly. It seems that I do have a solution now, although I'm not certain as to why I'm not getting a Security Sandbox Exception as I described in the other post.
Thanks for reading. -
DataGrid ItemRender and font family
i am writing a custom data grid ItemRender that, for every
cell, displays a numeric value. Additionally, if the xml data
structure defines an attribute for a given row, it is supposed to
display a colored arrow in the same cell.
Reading the data and determining if to display the arrow, and
the color of the arrow work fine. I am trying to embed the
windgings font to display the arrow, that way I can set the color
programatically. As I said, reading the data works fine, the
coloring of the 'arrow' works fine. My problem is I cannot change
the fontFamily of any label in the item renderer. Even the entire
renderer itself. Below is my code, followed by several other things
I have tried. Thanks for the help.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Style>
@font-face
src: local("wingdings");
fontFamily: myArrowFont;
font-anti-alias-type: advanced;
font-weight: bold;
.arrowStyle
fontFamily: myArrowFont;
font-weight: bold;
font-size: 12;
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
protected var _listData:DataGridListData;
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = DataGridListData(value);
invalidateProperties();
override public function set data(value:Object):void
super.data = value;
cellArrow.setStyle('color',value[_listData.dataField].@color);
switch(value[_listData.dataField][email protected]())
case 'up':
cellArrow.text = 'é';
break;
case 'down':
cellArrow.text = 'ê';
break;
case 'equal':
cellArrow.text = 'd';
break;
default:
cellArrow.text = '';
break;
cellText.text = value[_listData.dataField];
]]>
</mx:Script>
<mx:Label id="cellText" text=""/>
<mx:Spacer width="100%"/>
<mx:Label id="cellArrow" styleName="arrowStyle"
text=""/>
</mx:HBox>
I have tried using <mx:Label id="cellArrow"
fontFamily='myArrowFont'/>
I have set the fontFamily='myArrowFont' in the base HBox tag
as well, and it doesn't change the font of either the cellArrow or
cellText label.
I have also used
cellArrow.setStyle('fontFamily','myArrowFont') in the override set
data method.
I have written the same component in ActionScript
implementing the same functionality.
The cellArrow label's text and color are set correctly to the
data, however I cannot get the font to change to windgings.
I have tried setting the DataGridColumn fontFamily to the
wingdings font, and all it does is change the header text of the
column, not any of the rows.
The actual datagrid is created entirely in actionscript,
because it is part of a control that will build a datagrid with X
number of columns, defined in a data structure. That code works
fine as well, and is below, incase it helps.
//_dataP is an XMLList from an httpservice or web service
that defines our grids
var colsX:XMLList = _dataP..column; //get an xmllist of our
columns
var len:int = colsX.length(); //and store the length
var cols:Array = new Array(); //create an empty array to hold
each column
var col:DataGridColumn; //a data grid column reference
for(var i:int = 0; i < len; i++)
col = new DataGridColumn(); //create a new column
col.headerText = colsX
.@text; //set the header text
col.dataField = colsX.@field; //and data field
col.itemRenderer = new ClassFactory(quadBoxItemRenderer);
cols.push(col); //add it to the array
_grid.columns = cols; //set our columns array as the columns
of the grid
var rows:XMLList = _dataP..row;
_grid.rowCount = (rows.length() == 0) ? 1 : rows.length();
_grid.dataProvider = rows; //and give it the list of rows
_grid.percentWidth = 100;
_gridBox.addChild(_grid);
any help is vastly appreciated. Thanks.Disregard my question - I've unfortunately failed to check the font-family string as submitted by the server and it turned out to still have a colon character in front of it...
I guess I've spent a few too many nights working on this making me susceptible to tiredness and a strangely blank mind...
My apologies,
Rogier -
How can we enter the data dynamically from datagrid to an arraycollection?
Hi All
How can we make datagrid fields editable when it is in empty position i mean the datagrid doesn't have any data to display.. and it must accept the data and update the arraycollection dynamically..
Now in my Application the datagrid is empty and it is not accepting any values and it still remain ideal.. i am unable to edit the datagrid fields in the datagrid .....
Please some one tell me how can i achieve this...Here is a very basic example.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _dataProvider:ArrayCollection;
private function onCreationComplete():void {
_dataProvider = new ArrayCollection();
for(var i:int = 1; i <= 100; ++i)
_dataProvider.addItem({ROW:i,A:"",B:"",C:"",D:"",E:"",F:"",G:"",H:"",I:"",J:"",K:"",L:"", M:"",N:"",O:"",P:""});
]]>
</mx:Script>
<mx:Panel title="Editable DataGrid Example" height="472" width="584" horizontalCenter="0" verticalCenter="0">
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{_dataProvider}" editable="true" horizontalScrollPolicy="on" sortableColumns="false" draggableColumns="false">
<mx:columns>
<mx:DataGridColumn dataField="ROW" headerText="" width="30" sortable="false" draggable="false" editable="false" paddingLeft="0" paddingRight="0" textAlign="right"/>
<mx:DataGridColumn dataField="A" headerText="A" width="100"/>
<mx:DataGridColumn dataField="B" headerText="B" width="100"/>
<mx:DataGridColumn dataField="C" headerText="C" width="100"/>
<mx:DataGridColumn dataField="D" headerText="D" width="100"/>
<mx:DataGridColumn dataField="E" headerText="E" width="100"/>
<mx:DataGridColumn dataField="F" headerText="F" width="100"/>
<mx:DataGridColumn dataField="G" headerText="G" width="100"/>
<mx:DataGridColumn dataField="H" headerText="H" width="100"/>
<mx:DataGridColumn dataField="I" headerText="I" width="100"/>
<mx:DataGridColumn dataField="J" headerText="J" width="100"/>
<mx:DataGridColumn dataField="K" headerText="K" width="100"/>
<mx:DataGridColumn dataField="L" headerText="L" width="100"/>
<mx:DataGridColumn dataField="M" headerText="M" width="100"/>
<mx:DataGridColumn dataField="N" headerText="N" width="100"/>
<mx:DataGridColumn dataField="O" headerText="O" width="100"/>
<mx:DataGridColumn dataField="P" headerText="P" width="100"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Hope this helps -
DataGrid headerrenderer refresh issue -Please help
hi
I have a datagrid and I am doing a custom sorting on the grid(by getting data from DB).
I achieve this by capturing the headerrelease event of datagrid .In thee venthandler I will query from DB and do event.preventdefault to prevent standard grid sorting.
Now I need to display my own custom ascending/descending arrows in the header.i have created an header renderer for this,
In the headerrenderer I am lsitening to the headerrelease event of datagrid and in the eventlistener, as per the sortfield, i am trying to make the sort arrow visible/invisible.
But somehow making the sort arrows visible/invisible is not working.The initial arrow works fine.it is shown the correct column(Name) as done in the init() method.
The eventhandler is invoked on clicking the column headers and all the alerts are shown.
Please see the headerrenderer code below and help me.(code is not complete only the relevant part is included)
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalScrollPolicy="off" creationComplete="init()" implements="mx.controls.listClasses.IDropInListItemRenderer">
public function init():void
headerLabel = dataField.label;
_dataGrid.addEventListener(DataGridEvent.HEADER_RELEASE,sortChanged,false);
if(_dataField.localeCompare('Name')==0)asc.visible=true;
private function sortChanged(e:DataGridEvent)
var dg:DataGrid=e.currentTarget asDataGrid;
varcolumn:DataGridColumn = DataGridColumn(e.currentTarget.columns[e.columnIndex]);
if(_dataField.localeCompare(e.dataField)==0)
if(asc.visible ||(!asc.visible&&!desc.visible))
Alert.show('in..');
asc.visible=false;
desc.visible=true;
else if(desc.visible)
asc.visible=true;
desc.visible=false;
else
asc.visible=false;
desc.visible=false;
]]>
</mx:Script>
<mx:Text text="{_headerLabel}" />
<mx:Image source="{ascIcon}" id='asc' visible="false">
<mx:Image source="{descIcon}" id='desc' visible="false"/>
</mx:HBox>I got the solution!!
i need to assign the headerrendereer to the columns dynamically inorder for this to work:
if anybody wants to know details of solution let me know -
How do i change the cell color of each cell in datagrid dynamically
I have a datagrid filled in with data..My job is to change the cell color of a particular cell in the datagrid when the user clicks that cell..Please help me asap..I have to change the color of each cell dynamically..
Pls find the solution of ur problem.Let me know if you have any issue.
MainApplicaion.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
[Bindable]
private var listDataArrayCollection:ArrayCollection=
new ArrayCollection([
{seq:'1',color:'0xFF0000', names:'John'},
{seq:'2',color:'0x00FF00', names:'Alex'},
{seq:'3',color:'0x0000FF', names:'Peter'},
{seq:'4',color:'0xFF0000', names:'Sam'},
{seq:'5',color:'0x00FF00', names:'Alis'},
{seq:'6',color:'0x0000FF', names:'Robin'},
{seq:'7',color:'0xFF0000', names:'Mark'},
{seq:'8',color:'0x00FF00', names:'Steave'},
{seq:'9',color:'0x0000FF', names:'Fill'},
{seq:'10',color:'0xFF0000', names:'Abraham'},
{seq:'11',color:'0x00FF00', names:'Hennery'},
{seq:'12',color:'0x0000FF', names:'Luis'},
{seq:'13',color:'0xFF0000', names:'Herry'},
{seq:'14',color:'0x00FF00', names:'Markus'},
{seq:'15',color:'0x0000FF', names:'Flip'},
{seq:'16',color:'0xFF0000', names:'John_1'},
{seq:'17',color:'0x00FF00', names:'Alex_1'},
{seq:'18',color:'0x0000FF', names:'Peter_1'},
{seq:'19',color:'0xFF0000', names:'Sam_1'},
{seq:'20',color:'0x00FF00', names:'Alis_1'},
{seq:'21',color:'0x0000FF', names:'Robin_1'},
{seq:'22',color:'0xFF0000', names:'Mark_1'},
{seq:'23',color:'0x00FF00', names:'Steave_1'},
{seq:'24',color:'0x0000FF', names:'Fill_1'},
{seq:'25',color:'0xFF0000', names:'Abraham_1'},
{seq:'26',color:'0x00FF00', names:'Hennery_1'},
{seq:'27',color:'0x0000FF', names:'Luis_1'},
{seq:'28',color:'0xFF0000', names:'Herry_1'},
{seq:'29',color:'0x00FF00', names:'Markus_1'},
{seq:'30',color:'0x0000FF', names:'Flip_2'}
private function onItemClick(event : ListEvent):void
var dataObj : Object = event.itemRenderer.data;
dataObj.color = "0xFF00FF";
event.itemRenderer.data = dataObj;
]]>
</mx:Script>
<mx:VBox width="300" height="100%"
horizontalAlign="center"
verticalAlign="middle">
<mx:DataGrid id="listComponent" width="50%"
height="100%"
borderStyle="none"
dataProvider="{listDataArrayCollection}"
itemClick="onItemClick(event)">
<mx:columns>
<mx:DataGridColumn width="100" dataField="{data.seq}" headerText="Seq" itemRenderer="SeqItemRenderer" />
<mx:DataGridColumn width="100" dataField="{data.names}" headerText="Name" itemRenderer="NameItemRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application
NameItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
]]>
</mx:Script>
<mx:TextInput width="75" height="30"
text="{data.names}"
editable="false" backgroundColor="{data.color}"/>
</mx:HBox>
SeqItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
]]>
</mx:Script>
<mx:TextInput width="75" height="30"
text="{data.seq}"
editable="false" backgroundColor="{data.color}"/>
</mx:HBox>
with Regards,
Shardul Singh Bartwal -
Changing a datagrid column image according to the datagrid column value
Flash Builder 4.5 / SDK 4.5.1.
Fairly new to Flash Builder & Flex
Application targets tablets so it's a "mobile" project.
Been beating my head up against the wall on trying to figure out how to do this. Watched videos on Lynda.com. Read Adobe "docs" till my eyes glaze over. Takes me about 2 lines of code in my corresponding .NET project doing the same thing.....
Tried numerous examples. Inline rendering, external rendering files per the examples.
I have a response field in the database and corresponding column in the s:datagrid. If the "reportInfoResponse" field is null (not answered), show an image with a question mark. If yes show an image with "Yes" on it. Same for a no answer.
I get errors of:
1120:Access of undefined property negativeAnswer.
1120:Access of undefined property affirmativeAnswer
1120:Access of undefined property reportInfoResponse
1120:Access of undefined property showResponseImage
If I put this in an external rendering file I also get an error where it can't access the datafield (reportInfoResponse). I've tried data.reportInfoResponse, {data.reportInfoResponse}, {reportInfoResponse} and just plain reportInfoResponse the external rendering file with no luck. I've tried single and double quotes around Y and N. According to all the examples (not to say there aren't more!), I should be able to reference data.reportInfoResponse in the external file and things should be fine. Of course, the examples are bare bones code and I don't have a clue if any importing of classes or other items need to take place. I never see any references of such. The examples also show the image embedding and changing the image by using imageID.source=... In my code it tells me it can't find it.
I have put (ERROR HERE...) on the lines where I'm getting the error messages. I've eliminated a lot of database scripting and such cause that's all working.
Any and all suggestions would be appreciated as I'm pulling out what little hair I have left.......and that's not much at my age........ And yes, I probably could do it by just show text in the column, but that's not what the customer wants... There are other columns I need to do this for so I figure if I can get 1 done and working, the rest are a snap. I CAN use inline or external rendering to show an image. It's the changing it that is the catch.........
Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<s:View 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="onCreationComplete()"
title="{whichCategoryName} > {whichSubCatName} > Questions">
<fx:Script>
<![CDATA[
import com.adobe.serializers.utility.TypeUtility;
import flash.data.SQLConnection;
import flash.data.SQLMode;
import flash.data.SQLResult;
import flash.events.StatusEvent;
import flash.filesystem.File;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.navigateToURL;
import flashx.textLayout.tlf_internal;
import mx.collections.ArrayCollection;
import mx.core.BitmapAsset;
import mx.events.FlexEvent;
import spark.events.GridEvent;
import spark.events.IndexChangeEvent;
...(lots of database coding left out here)
<s:DataGrid id="showQuestions" width="100%" height="100%"
creationComplete="Grid_creationCompleteHandler(event)" fontFamily="_sans"
gridClick="gridClickEvent(event);" horizontalScrollPolicy="off"
selectionColor="#8AD8EF" selectionMode="singleRow" sortableColumns="false"
variableRowHeight="true" verticalCenter="middle">
<s:columns>
<s:ArrayList>
<s:GridColumn visible="false" dataField="id_report" headerText="id_report" resizable="true" sortable="false"></s:GridColumn>
<s:GridColumn visible="false" dataField="id_question" headerText="id_question" resizable="true" sortable="false"></s:GridColumn>
<s:GridColumn id="col_reponse" visible="true" dataField="reportInfoResponse" headerText="Response" resizable="true" sortable="false">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
[Embed(source="assets/unknown.png")]
[Bindable]
public var unknownAnswer:Class;
[Embed(source="assets/yes.png")]
[Bindable]
public var affirmativeAnswer:Class;
[Embed(source="assets/no.png")]
[Bindable]
public var negativeAnswer:Class;
(ERROR HERE - 1120:Access of undefined property reportInfoResponse)
if(reportInfoResponse == "Y")
(ERROR HERE - 1120:Access of undefined property showResponseImage)
showResponseImage.source = affirmativeAnswer;
(ERROR HERE - 1120:Access of undefined property reportInfoResponse)
if (reportInfoResponse == "N")
(ERROR HERE - 1120:Access of undefined property showResponseImage)
showResponseImage.source = negativeAnswer;
]]>
</fx:Script>
<s:Image id="showResponseImage" source="{unknownAnswer}" verticalCenter="0" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn id="col_question" visible="true" dataField="question" headerText="Question" resizable="true" sortable="false"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:AsyncListView list="{showTheseQuestions}"/>
</s:DataGrid>
</s:View>Ioan Thanks for the reply.
Probably my previous explanation of the problem was a little incomplete. Let me give a better description.
The situation is something like this.
I have a requirement in which the customer wants the column header to reflect the 'keep filter value' restriction that he does dynamically in the query report.
i.e:
-- usually the kf column header shows 'sales volume'
-- column header with text variable of the Calender year / month variable -- 'sales volume for 2000 oct'
-- but when the report is run, if the user wants to go and change the filter: calender year / month > rt clk > keep filer value > select Jan 2003.
The kf column header still shows 'Sales Volume 2000 Oct'
How to make the column header change to 'sales volume for Jan 2003' ?
Any suggestions greatly appreciated.
Thanks, -
Problem overloading "set data" function on Button DataGrid Renderer
Hi all, I'm hoping this is something simple.
I have a class that extends mx.controls.Button and implements mx.core.IDataRenderer. I need to set the button icon whenever the Data property is set from the DataGrid. My problem is that my overloaded set/get Data function are never called (I've stepped through the code in debug). Instead the set/get functions in Container.as (Flex 3.4 SDK) get called.
Here's the basics code:
exportButtonRenderer.as
package controls
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.Button;
import mx.core.IDataRenderer;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.FlexEvent;
import mx.controls.Alert;
import model.descriptors.compDescriptor;
import events.exportClickedEvent;
public class exportButtonRenderer extends Button implements IDataRenderer
// embed your icons
[Embed(source='/assets/icons/export.png')]
[Bindable]
public static var imageExport:Class;
[Embed(source='/assets/icons/blank.png')]
[Bindable]
public static var imageBlank:Class;
public function exportButtonRenderer()
super();
private var _listData:DataGridListData;
override public function get listData():BaseListData
return _listData;
override public function set listData(value:BaseListData):void
_listData = DataGridListData(value);
private var _data:Object;
override public function get data():Object
return _data;
override public function set data(value:Object):void
_data = value;
override protected function clickHandler(event:MouseEvent):void
super.clickHandler(event);
Now I know I'm using the Flexlib TreeGrid and not a standard DataGrid but when I trace through all the code all code firing the set/get functions is coming from the DataGrid anyway.
Here's the my Grid def in my main app mxml:
Header 1
<flexlib:TreeGrid
id="MKTXGrid"
dragEnabled="false" sortableColumns="false" showRoot="false"
disclosureClosedIcon="@Embed(source='/assets/icons/arrow_right.png')"
disclosureOpenIcon="@Embed(source='/assets/icons/arrow_down.png')"
folderOpenIcon="@Embed(source='/assets/icons/psd.png')"
folderClosedIcon="@Embed(source='/assets/icons/psd.png')"
click="MKTXGrid_clickHandler(event)"
doubleClickEnabled="true" doubleClick="MKTXGrid_doubleClickHandler(event)" left="0" right="0" top="0" bottom="16">
<flexlib:columns>
<flexlib:TreeGridColumn dataField="Name" headerText = "Name" minWidth="200" width="200" editable="true"/>
<mx:DataGridColumn dataField="ExportName" headerText = "Export Name"/>
<mx:DataGridColumn dataField="Export" headerText = "Export" width="50" minWidth="20" resizable="false">
<mx:itemRenderer>
<mx:Component>
<mx:Box horizontalAlign="center" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<controls:exportButtonRenderer label="Export" icon="@Embed(source='assets/icons/export.png')" width="12" height="12" useHandCursor="true">
<controls:click>
<![CDATA[
import events.exportClickedEvent;
var e:exportClickedEvent = new exportClickedEvent();
e.itemData = data;
dispatchEvent(e);
]]>
</controls:click>
</controls:exportButtonRenderer>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</flexlib:columns>
</flexlib:TreeGrid>
Nothing too special going on.
I know this can be done, I've seen examples in the SDK:
http://opensource.adobe.com/svn/opensource/durango/trunk/ExternalFlexTools/com/dougmccune/ containers/accordionClasses/AccordionHeader.as
By the way I've stepped through the code of the TreeGridItemRenderer class in Flexlib which works correctly and the class def starts like this:
TreeGridItemRenderer.as
import flash.display.DisplayObject;
import flash.display.InteractiveObject;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flexlib.controls.TreeGrid;
import mx.controls.Image;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.IDataRenderer;
import mx.core.IFlexDisplayObject;
import mx.core.IToolTip;
import mx.core.SpriteAsset;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.events.FlexEvent;
import mx.events.ToolTipEvent;
import mx.events.TreeEvent;
import mx.managers.ILayoutManagerClient;
import mx.styles.IStyleClient;
public class TreeGridItemRenderer extends UIComponent
implements IDataRenderer,
IDropInListItemRenderer,
ILayoutManagerClient,
IListItemRenderer
Any help would be great!That's because you put your component in a Box. The DataGrid is setting the Box's .data property and no code is setting the one on your component. You shouldn't really need Box. You can override updateDisplayList to center your Button instead.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui -
Hello, I want to introduce a image in one datagrid column but I don't know why. I'm trying doing that:
private var columns:ArrayCollection = new ArrayCollection([
{headerText: 'Image', dataField: 'column1', itemRenderer:'xxxxx', width: '5' },
private var date:ArrayCollection = new ArrayCollection([
{column1:'../img/clip.png',
{column1:'../img/clip2.png,}])
What I have to put in itemRenderer? Or I'm doing totaly wrong
It's better if I do
[Embed(source="img/clip.png")] public var buzonIcon:Class;
and then use buzenIcon in column1:.....
What is the solution?
Thanks!Hi, Pls find the solution of the your problem.
MainApplication.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dgArrayCollection:ArrayCollection=
new ArrayCollection([
{imgPath:'assets/img1.png', names:'John'},
{imgPath:'assets/img2.png', names:'Alex'},
{imgPath:'assets/img3.png', names:'Peter'},
{imgPath:'assets/img1.png', names:'Sam'},
{imgPath:'assets/img2.png', names:'Alis'},
{imgPath:'assets/img3.png', names:'Robin'},
{imgPath:'assets/img1.png', names:'Mark'},
{imgPath:'assets/img2.png', names:'Steave'},
{imgPath:'assets/img3.png', names:'Fill'},
{imgPath:'assets/img1.png', names:'Abraham'},
{imgPath:'assets/img2.png', names:'Hennery'},
{imgPath:'assets/img3.png', names:'Luis'},
{imgPath:'assets/img1.png', names:'Herry'},
{imgPath:'assets/img2.png', names:'Markus'},
{imgPath:'assets/img3.png', names:'Flip'},
{imgPath:'assets/img1.png', names:'John_1'},
{imgPath:'assets/img2.png', names:'Alex_1'},
{imgPath:'assets/img3.png', names:'Peter_1'},
{imgPath:'assets/img1.png', names:'Sam_1'},
{imgPath:'assets/img2.png', names:'Alis_1'},
{imgPath:'assets/img3.png', names:'Robin_1'},
]]>
</mx:Script>
<mx:VBox width="300" height="100%"
horizontalAlign="center"
verticalAlign="middle">
<mx:DataGrid id="dg" width="50%"
height="100%"
borderStyle="none"
dataProvider="{dgArrayCollection}"
>
<mx:columns>
<mx:DataGridColumn dataField="color" itemRenderer="DatagridItemRenderer"/>
<mx:DataGridColumn dataField="names" headerText="Names"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>
DatagridItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="30" horizontalGap="5"
horizontalAlign="center"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
super.data = value;
]]>
</mx:Script>
<mx:Image width="75" height="30" source="{data.imgPath}"/>
</mx:HBox>
Let me know if you have any issue with this.
With Regards,
Shardul Singh Bartwal
Maybe you are looking for
-
Updating a previously backed-up library on an external hard drive?
I keep my iTunes library on my computer's hard drive and I have also backed it up to external hard drive. I have added more music to my library since my previous back-up and I want to back-up the new music to external drive as well. What's the best w
-
Illustrator CS2 Registration screen
Everytime I start Illustrator CS2 it displays the Registration Screen. Even though I have registered now many, many times the screen still comes up. How can I make it stop? Thanks
-
Hi All I want to restrict Choice List values depending on data coming from previous page. I am using following code : OAMessageChoiceBean contactList = (OAMessageChoiceBean)webBean.findChildRecursive("<Chioce List Name>"); contactList.setPickListCach
-
Core duo macbook pro HDD upgrade
I have an early 15" MacBook Pro, model A1150, with a core duo processor. The original hard drive is an 80 GB model and is nearly full. I'd like to upgrade to a 7200 rpm drive with more capacity, but am unsure if i can take advantage of a newer SATA
-
Itunes won't open on my ipod touch
I've restored it and everything,Safari works fine so there's nothing wrong with WiFi.Loading appears on it then it says cannot connect to itunes.