DataGrid issue

Hi,
I'm having a strange issue that I'm hopeing someone else has encountered and solved.
I have a datagrid in a module that I load into a shell. When the datagrid is displayed the header is collapsed and no text shows up ( header or DataGridColumns )
I can get the header text to display if I set styles in my css for the datagrid ( or by setStyle ) for fontfamily, fontSize and color and specify the headerHeight I want. However, the rows remain "textless". I can see that the dataGrid is populated by my dataProvider since there are two rows inserted that I can rollover and select, but no text visible in the columns...
I've tried a few different ways of providing the data - xml, ArrayCollection, manually put objects in the dataProvuider tag, but so far the data provider method does not seem to be the issue.
Appreciate any help I can get on this.
Thanks!

Maybe you've specified a background color for those columns or the renderer for those columns is drawing a background.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Similar Messages

Spark DataGrid Issue

I'm working with the new Spark DataGrid, and I understand it's still a work in progress. I've also created a bug in the Adobe bug system. However, I want to be sure that I'm not overlooking something.
Here is an example that illustrates the issue. If I create an itemRenderer for a column in a dDtaGrid, it takes 2 clicks to trigger the click event and 3 clicks to trigger the doubleClick event, if you click on the column with the itemRenderer. This happens about 95% of the time. Occasionally, it works as expected, but that's a rarity. So the question is, am I doing something wrong in the use of itemRenderers.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:DataGrid x="33" y="57" requestedRowCount="4" textAlign="center" click="Alert.show('Clicked')">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Name" width="75">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{data.dataField1}" left="5" paddingTop="10" paddingBottom="5"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column2" width="75"/>
<s:GridColumn dataField="dataField3" headerText="Column3" width="75"/>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="John" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="Ryan" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="Kyle" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="Edward" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid></s:Application>

I have approximately the same problem : I want to listen double click (doubleClick or gridDoubleClick) on a spark datagrid.
The double click event is always dispatched when I double-click on a column whose item renderer is a textArea (even with doubleClickEnabled=false).
The double click event is SOMETIMES dispatched when I double-click on a column whose item renderer is an image or a label :
1. When I double-click for the first time on the label renderer : it gives focus to datagrid and select item but does not dispatch doubleClick
2. When I double-click on the textArea colum, then on the Label column of the same row, doubleClick is well dispatched
3. When I double-click on the textArea colum, then on the Label column of a different row, doubleClick is not dispatched
4. when I double-click on the label column after double-clicking on another row in the Label column, doubleClick is well dispatched
I think it's the same behaviour with simple click event.
Do you think spark datagrid is not stable enough and we should use mx datagrid instead ?
Here is the code :
<s:DataGrid dataProvider="{arrayCollection}" doubleClickEnabled="true" doubleClick="trace(event)" gridDoubleClick="trace(event)">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:Label text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:TextArea text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

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

Dynamic DataGrid Issues

I have a data grid that is updated via streaming data every 5 seconds. However, when the datagrid updates, all of the user's selections/sorting gets wiped out and the data resets.
Right now the data is bound to an array directly returned from my service call, so every time it "refreshes" the bound array refreshes triggering the redraw of the grid.
How can I save the "current state" of the data grid so that when the data updates, all of the sorts/selections/whatever is saved.
And example of what im looking for is kind of like the windows task manager. Everything resorts in real time as the data updates, if you have a column sorted.
Any ideas?

Thanks for the response.
That works, but the grid data will not refresh now unless I interact with it. If I re-sort a column for instance it will give my column new values, but just sitting there it doesnt update.
I have seen code where there is a dataprovider.refresh() call, but that is not available on my dataProvider.
Any suggestions?

Adjustable DAtagrid issue

I am working the with the flash form cfgrid and the
vdividedbox attribute of cfformgroup. How does one make the the
height of the cfgrid change when the moving the vdividedbox up and
down.
Here is the code...
<cfform action="
http://intraflir/shared/gridaction.cfc"
method="POST" name="listEditor" enctype="multipart/form-data"
timeout="9999999" style="color: ##000000;" skin="halosilver"
format="flash" preloader="no">
<cfset panelstyle="backgroundColor: ##CBDDF8;
headerColors: ##0080C0, ##0080C0;borderColor: ##FFFFFF;
barcolor:##999999; color: ##000000;font-size:12; font-family:arial;
">
<cfformgroup type="panel" style="#panelstyle#;"
label="Edit #session.tablename#" height="{Stage.height - 50}" >
<cfformgroup type="vdividedbox" >
<cfformgroup type="vbox">
<cfgrid name="listofdata" query="generallist" insert="yes"
delete="yes" sort="yes" italic="no" bold="no" appendkey="yes"
highlighthref="no" griddataalign="left" gridlines="yes"
rowheaders="no" rowheaderalign="left" rowheaderitalic="no"
rowheaderbold="no" colheaders="yes" colheaderalign="left"
colheaderitalic="no" colheaderbold="no" selectmode="browse"
picturebar="no" insertbutton="Insert" deletebutton="Remove "
textcolor="##000000" autowidth="true" style="color: ##000000;"
enabled="Yes" visible="Yes">
<cfgridcolumn name="id" display="no">
<cfgridcolumn name="#session.fieldname#"
headeralign="left" header="Category" dataalign="left" bold="no"
italic="no" select="yes" display="yes" headerbold="no"
headeritalic="no" >
</cfgrid>
<cfinput type="hidden" name="method" value="update">
<cfinput type="hidden" name="tablename"
value="#attributes.tablename#">
<cfinput type="hidden" name="fieldname"
value="#attributes.fieldname#" >
<cfinput type="hidden" name="location"
value="#attributes.location#">
</cfformgroup>
<cfformgroup type="hbox">
<cfformgroup type="horizontal" style="color:
##000000;"><cfinput type="submit" name="updateBook"
value="Save" ></cfformgroup>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>

import the dataprovider class and try:
//add a listener for the complete event
function onDataLoad(evt:Event){
      var myData:XML =XML(evt.target.data);
      var myDataGrid:DataGrid = new DataGrid();
      var myDataGridHeader:Array = new Array();
      for each (var item:XML in myData.row[0].children())
       trace("Col: "+item.name());
       myDataGridHeader.push(item.name());
       var col:DataGridColumn = new DataGridColumn (item.name());
       myDataGrid.addColumn(col);
      myDataGrid.width = 700;
      myDataGrid.height= 200;
      myDataGrid.move(190, 150);
      addChild(myDataGrid);
      var rowList:XMLList = myData..row;
      var rowLen:int = rowList.length();
      var HeadLen:int = myDataGridHeader.length;
var dp:DataProvider=new DataProvider(myData);
myDataGrid.dataProvider=dp;
     removeEventListener(Event.COMPLETE, onDataLoad);

Several datagrid issues

I have a Datagrid that is populated dynamically. For each
item there are 5 columns all having the same width. I set the grid
to be wide enough to display one set of 5 columns, one of the
columns uses a numeric stepper as an itemRenderer/Editor. The
problem occurs on scroll the stepper still refers to the first set
of columns. How can I get so the steppers are reassigned to the new
data on scroll of the Grid? Any help as always is greatly
appreciated.

"Mush15" <[email protected]> wrote in
message
news:gk7mbd$7bl$[email protected]..
>I have a Datagrid that is populated dynamically. For each
item there are 5
> columns all having the same width. I set the grid to be
wide enough to
> display
> one set of 5 columns, one of the columns uses a numeric
stepper as an
> itemRenderer/Editor. The problem occurs on scroll the
stepper still refers
> to
> the first set of columns. How can I get so the steppers
are reassigned to
> the
> new data on scroll of the Grid? Any help as always is
greatly appreciated.
>
http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf
Q2

DataGrid Sorting Issue with Hotfix2

I already opened a ticket with Adobe on this, but since this
is a critical issue for us I wanted to post a message to see if
anyone has any idea where the issue in flex sdk lies.
Check tab 2 of the sample app, Sorting a datagrid who's
column only has partial data causes an error, works fine on Hotfix
1 (same test)
Sample App:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="creationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectProxy;
[Bindable]
public var dgData:ArrayCollection = new ArrayCollection();
public function creationComplete():void
var object:ObjectProxy;
object = new ObjectProxy();
object["filled"] = "Filled A";
object["partial"] = "Partial A";
dgData.addItem(object);
object = new ObjectProxy();
object["filled"] = "Filled B";
object["partial"] = "Partial B";
dgData.addItem(object);
object = new ObjectProxy();
object["filled"] = "Filled C";
dgData.addItem(object);
object = new ObjectProxy();
object["filled"] = "Filled D";
dgData.addItem(object);
]]>
</mx:Script>
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management">
<node label="Large node Large Node Large Node Large
Node"/>
</node>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
<node label="Spam2"/>
<node label="Sent2"/>
<node label="Spam3"/>
<node label="Sent3"/>
<node label="Spam4"/>
<node label="Sent4"/>
<node label="Spam5"/>
<node label="Sent5"/>
<node label="Spam6"/>
<node label="Sent6"/>
</node>
</mx:XMLList>
<mx:TabNavigator height="100%" width="1005">
<mx:Canvas label="Tree Issue">
<mx:Text x="284" y="51" fontSize="16" fontWeight="bold"
text="Issue: Expand the tree node to open up Product Management
node, no Horizontal Scroll bar appears." width="390"/>
<mx:Canvas verticalScrollPolicy="auto"
horizontalScrollPolicy="auto">
<mx:Tree x="50" y="50" width="226" height="303"
dataProvider="{treeData}" labelField="@label"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto"/>
</mx:Canvas>
</mx:Canvas>
<mx:Canvas label="DataGrid Issue">
<mx:DataGrid id="dgTest" dataProvider="{dgData}"
width="500" height="300" x="10" y="10">
<mx:columns>
<mx:DataGridColumn headerText="Filled Row"
dataField="filled"/>
<mx:DataGridColumn headerText="Partially Filled Row"
dataField="partial"/>
</mx:columns>
</mx:DataGrid>
<mx:Text x="10" y="318" fontSize="16" fontWeight="bold"
text="Issue: Toggle the sort in the column that has only partial
data. You will get a find criteria error. This worked in Hotfix 2
and was broke in Hotfix 2." width="390"/>
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>

Hi,
With new hotfixes some bugs ( most of bugs) in Flex SDK are
get fixed, but rarely new (sometimes critical) bugs can appear.
Before Flex 3 release which will allow on IDE level to switch
between different versions of Flex SDK on the fly, I would advice
you to store locallly copy of all versions of Flex 2 SDK released
to the public. Then, in case if you will encounter a serious bug in
the most recent release of Flex 2 SDK, you can fix it by yourlself
by reusing the old code from former release of Flex 2 SDK.
See what I did with found bug in Flex 2.0.1 release, which is
what not present in Flex 2.0 SDK release:
jabbypanda.com/blog/?p=25

Datagrid refresh + itemrenderer

Can anybody help me out with datagrid issue with itemrenderer?
I am using datagrind with signle column with itemrenderer to populate data from server in XML format.
It's work fine without itemrenderer , but for some reason it does not get refreshed properly with itemrenderer.
i already checked my xml several times it is correct, also working correctly without itemrenderer.
Thanks in advance,
waiting for any suggestions................

This type of problem can be very difficult to troubleshoot. I would suggest trying to narrow it down by boiling the code down to a simplified yet complete code that still exhibits the problem. Then if you have not solved the issue, post that simplified yet complete code here and an answer should come soon.

Datagrid column calculate totals

Hi - hope someone can help with this datagrid issue - I think
it's just a small bit of code I've got to tweak. Might be some
useful information to someone here anyway.
I've got a datagrid populated by info from mysql via amfphp.
I've managed to create a column that multiplies the qty and
price fields:
root.dgCart.addColumn(column2);
var column2 = new DataGridColumn();
column2.headerText = "sum";
column2.labelFunction = customLabelFunction2;
column2.columnName = 'sum';
function customLabelFunction2(item:Object):Number {
// if (item == undefined) return undefined;
var sumtotal = round2D(Number(item.item_price) *
Number(item.qty));
return sumtotal;
//helps to make decimals
function round2D (nr){
var tmp = String(nr)
var pos = tmp.substr(tmp.indexOf(".")+1)
if(tmp.indexOf(".")==-1) return nr+".00" //no decimals
else if(pos.length==1) return nr+"0" //1 decimal
else return Math.round (Number(nr) * 100) / 100 //2 or more
Now I'd like to get a total of all the items in the 'sum'
column - the following code works to add up the 'price' column but
the same approach doesn't seem to work for the 'sum' column -
perhaps because the figures are generated by a function?
function getTotal(){
var totalPrice = 0;
for(var i=0; i<root.dgCart.length; i++) totalPrice +=
Number(root.dgCart.getItemAt(i).item_price)
root.txttotal.htmlText = "<b>Total:</b> "+
round2D(totalPrice);
If anyone here could shed the light, I'd be sooooo
greatful!

I guess one way to do it would be to calculate the total from
your webservice (I am guessing you're using php to generate an xml
file) and then pass that to your flex project using the http
service.
or you could simply write a script for it within your
project.

Columnar alignment problem with DataGrid

Hi All.
I've got the following DataGrid:
http://www.joshbeall.com/personal/flex/grid1.png
If you filter out some of the results with zeros in the
referred/applied columns, this is what you get:
http://www.joshbeall.com/personal/flex/grid2.png
See how the column heads aren't aligned with the columns?
Interestingly enough, I don't always get this behavior, but it
happens often. If I click a column head (to change the sort order),
the alignment is corrected.
I've attached the complete MXML for this application.
BTW, another problem I had (and have given up trying to hunt
down is), why do I need to declare my WebService as
<mx:WebService>, instead of just doing it entirely in code?
You can see in my MXML that I have commented out a few lines of AS
initializing the WebService instance. Originally, I was declaring
and using my WebService entirely in code. However, the databinding
wasn't working -- the grid never populated. When I changed it to be
declared as an <mx:WebService> tag, everything started
working.
-Josh

Josh,
Which version of the Flex 3 SDK are you using? There were a
few DataGrid issues similar to this which have been fixed since the
public Labs beta 1 drop. If you download the latest nightly SDK
build (
http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html)
and install that into Flex Builder are you still seeing the
DataGrid issue?
Peter

[svn:fx-trunk] 14966: Merge 14965 from 4.x to trunk.

Revision: 14966
Revision: 14966
Author:   [email protected]
Date:     2010-03-23 14:53:53 -0700 (Tue, 23 Mar 2010)
Log Message:
Merge 14965 from 4.x to trunk.
Fix for http://bugs.adobe.com/jira/browse/SDK-25909 and another underlying List/Tree/DataGrid issue. The bug was that the dragProxy for a TileList and HorizontalList didn't have the right layoutDirection causing it to be incorrectly positioned. While investigating the issue, I found that there was some fallout from changing SpriteAsset. The selection and rollover highlights on a List were disappearing. It turns out that List and DataGrid create their own SpriteAssets for creating certain indicators (like highlight and selection), while Tree creates it to wrap the disclosureIcon.
The fix for first bug is to set the layoutDirection of the dragProxy to ?\226?\128?\156rtl?\226?\128?\157 when the dragInitiator is also "rtl". It doesn?\226?\128?\153t inherit the layoutDirection because it is a child of the systemManager. I?\226?\128?\153ve also included the fix for the fallout from SpriteAsset by setting layoutDirection on those specific instances to null (inheriting) instead of their default ?\226?\128?\156ltr?\226?\128?\157.
QE notes: Need updates to mirrored Tree bitmaps.
Doc notes: No
Bugs: SDK-25909
Reviewer: Jason
Tests run: checkintests
Is noteworthy for integration: No
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-25909
    http://bugs.adobe.com/jira/browse/SDK-25909
Modified Paths:
    flex/sdk/trunk/frameworks/projects/framework/src/mx/controls/dataGridClasses/DataGridBase .as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/controls/listClasses/ListBase.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/controls/treeClasses/TreeItemRenderer .as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/managers/DragManagerImpl.as
Property Changed:
    flex/sdk/trunk/

Speeding up datagroup display

Hi all,
I have a complex dataGroup with about 20 items that takes a long time to put on the screen ( up to 10 seconds ). I've tried virtualization, which speeds up the initial display, but in turn really slows down the scrolling. ( with virtualization, scrolling down the first time is a real pain, after having scrolled up and down once, all goes smooth)
Now, what are some ways to speed up the datagrid? Or at least make for a smoother user expierence? I was thinking about adding a timer and only adding 1 item to the dataprovider every 100 ms or so. But before I do something hackish like that, I would love to hear some ideas on speeding up my little datagrid issue.
Also, would using a List instead of a DataGroup speed things up?
Any advise would be much appreciated.

Ryan Frishberg gave a good presentation at MAX this year about performance in Flex:
http://2010.max.adobe.com/online/2010/MAX232_1288135166359SECT
Take a look at around the 30 minute mark for some tips on speeding up your item renderers.

Datagrid Checkbox item renderer Issue.

Hi There
Recently I faced a requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
But Finally I ended with one strange issue
When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
Source Flex Air project attached.
From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
Cany any one faced this strange issue. and found any solution ?????
If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
Message was edited by: ChintuBabu

Hi There
Recently I faced a requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
But Finally I ended with one strange issue
When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
Source Flex Air project attached.
From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
Cany any one faced this strange issue. and found any solution ?????
If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
Message was edited by: ChintuBabu

Click issue with s:Datagrid on mobile for iPads with retina displays (only left half is clickable)

I'm currently testing a Flex mobile application (that was originally made for iPad 2) on high rest iPad fourth generation and iPad Air devices.
I'm having this strange issue where the s:DataGrid, no matter where I use it in the application, will display correctly, but only the left half is clickable to select rows. The number of columns in the DataGrid is not important, nor is the width of the DataGrid, the problem is always present. As soon as you try to click in the right half, it doesn't work.
The application uses an applicationDPI of 160, and scales properly on the higher resolution devices.
So this feels like a bug to me, as if the DataGrid scales properly, but not it's clickable area?
I have tried a bunch of stuff to see if I could work around this issue, like calling invalidate functions and setting the DataGrid's width dynamically, but no change so far.
At this point I'm open for any suggestions or ideas...
Edit: After further testing it seems the same is true for the height. I noticed when I added more rows in the grid. Only the top half of the DataGrid can be clicked. So it really looks like a dimension issue with the clickable area?
Thanks

I ended up not using the DataGrid, and decided to use the experimental MobileGrid instead, which is not afflicted with this issue.
So this issue no longer concerns me.
BTW the default theme of MobileGrid is dark, but can be lightened up with CSS and by extending the MobileGrid skins, up to a point where I almost can't tell the difference v.s. the DataGrid.
It also performs better then the DataGrid. since it's based on List. With 300 elements, it scrolled noticeably faster.

Datagrid column header word wrap issue

Hi All,
I'm passing dynamic text to a datagrid column header. The word wrap is true but it's not working.
Any ideas how to fix this issue?
DataGridColumn headerText="{myVar.text} Total" headerWordWrap="true"
Thanks
Johnny

@Johnny,
Try to make use of the headerRenderer property and use <mx:Text /> control as a renderer so that your headerText gets wrapped..
Thanks,
Bhasker
Message was edited by: BhaskerChari

DataGrid issue

Similar Messages

Maybe you are looking for