Data Grid display in flex

Hello All - I am new to flex and just had a quick question. My XML file structure is like this
I would like to create a table like this. Id and resourceId are lined but I have to display in single table
fullname      location Type
======     ======   ===
<?xml version="1.0" encoding="UTF-8"?>
<person>
<model>
    <person fullname="Person 1" id="6513181" location="Islandia, NY" manager="Manager 1" genre="male"/>
    <person fullname="person 2" id="2694791" location="Islandia, NY" manager="manager2" genre="male"/>
    <absence resourceId="6513181" color="0x65844d" type="sickness" reason="sickness" status="approved" note="Sick out" requestTime="2009/12/29" startTime="2010/02/15" endTime="2010/02/18"/>
    <absence resourceId="6513181" color="0x65844d" type="vacation" reason="vacation" status="approved" note="Trip To Nepal" requestTime="2009/12/29" startTime="2010/03/7" endTime="2010/3/18"/>
     <absence resourceId="2694791" color="0x65844d" type="sickness" reason="sickness" status="approved" note="Sick out" requestTime="2009/12/29" startTime="2010/01/01" endTime="2010/01/04"/>
    <absence resourceId="2694791" color="0x65844d" type="vacation" reason="vacation" status="approved" note="Home Country Trip" requestTime="2009/12/29" startTime="2010/02/1" endTime="2010/02/27"/>
</model>
how would this be possible? I believe we have to use Arraycollection after reading XML? Please let me know
Thanks

This is only in theory, haven't actually checked it but I think it could work
If each one of those posts is done by an itemrender, your renderer can have 2 states stateone and statetwo for example.
The reply state (statetwo) being bigger and containing space for the reply post.
Store your replies in the database and have another boolean column ( Tinyint(1) or something) in your MySql db indicating that a particular post has a reply . When you pull your data from the database and put in in an arraycollection check this column for each post and use it to set the state of the itemrenderer.
That way posts with no reply with be state one, and posts with replies will be state 2 and you can populate the reply field with data from the object in your arraycollection.
I suppose it all does depend on how you get your data from MySQL and how you store it in Flex but I think states is a way you could accomplish things like this.

Similar Messages

Data Grid Display child Class data

Hi,
   I have 2 Action Script class binded to remote java class
Class 1
package hmil.setup.model
import hmil.com.general.model.Employee;
[Bindable]
[RemoteClass(alias="hmil.setup.model.Area")]
public class Area
public function Area()
public var ARMST_AREA_ID:int;
public var ARMST_CMPN_NO:String;
public var ARMST_CORP_NO:String;
public var ARMST_SCTN_TYPE:String;
public var ARMST_CRTE_USR_NO:String;
public var ARMST_CRTE_TIME:Date;
public var ARMST_UPDT_USR_NO:String
public var ARMST_UPDT_TIME:Date;
public var ARMST_DLR_LIST:ArrayCollection;
public var ARMST_EMP:Employee;
Class 2
package hmil.com.general.model
[Bindable]
[RemoteClass(alias="hmil.com.general.model.Employee")]
public class Employee
public function Employee()
public var EPMST_ID:Number;
public var EPMST_CMPN_NO:String;
public var EPMST_CORP_NO:String;
public var EPMST_EMP_NO:String;
public var EPMST_DLR_NO:String;
public var EPMST_EMP_NAME:String;
When the remote java method returns a list of Area object through Blaze DS this list can be assiged as data to the Data Grid
The DataGridColumn   dataField can be mapped to the column name and it displays properly
<mx:DataGridColumn dataField="ARMST_AREA_ID" headerText="Id"/>
But lets say I wanted to display the child value (ARMST_EMP.EPMST_ID )   in the Data Grid
Since the sever returns the Parent Java Object which contains the related Employee as inner Object.
The Objetcs are deserialized to AS class objects.
But how to display the child columns in data grid.
If i give the data field as ARMST_EMP it is displayed as Object. but if i mention the datafield as ARMST_EMP.EPMST_ID, it does not display anything.
please let me know how to display the child object in datagrid
Thanks

Hi Mugunda, did you ever find out how to do this?

Data Grid Display Bug CS3

I'm having problem with Data Grid Component leaving a color
outline on the screen when I move out to another frame that does
not contain the Grid component.
This Only happens if I load a swf containing the Grid into
another movie.
Download
Example
Run Movie1 and select an item from the grid. This will jump
you to frame 5. This works fine.
Run Movie2 and click the button. This will load Movie1 into a
mc. Now select and item, and when jump to frame 5 you'll see the
green box appear...
Changing the theme halo blue/orange will leave blue/orange
boxes.
If anyone out there has a fix. PLEASE let me know.
Thanks,

Hi Mugunda, did you ever find out how to do this?

Display value in data grid

08/29/2008 08:58:48 AM
Reply | Quote | Top | Bottom | Edit
hi all,
i have two classes.
class User
public String name;
public int age;
public Address address;
class Address
public String city;
I'm passing a List<Users> to the data provider of a
data grid . I can display the values of properties of Users i.e,
name and age.. My issue is how do i display the value of city which
is a propertyt of Address class in the datagrid column..
thanx in advance
Mark this message as the answer.
Print this message
Report this to a Moderator

Hi,
Try labelFunction property of the DataGridColumn.
labelFunction allow you to specify a function name, which will be
invoked when that data is rendered. You will get the Object (User
id your case) corresponding the row being rendered will be passed
as argument to the function. You can use the object and return the
value you want to be displayed.
Please find more details on labelFunction at the URL below
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#l abelFunction
You can also try custom item renderer.
Hope this helps.

Display image into Data Grid

Hello,
I have to display into a data grid, in Flex 2, 2 columns:
first column ( "Images") must contain a picture with an object and
second column (" quantity") must contain the amount of that object
that I want to buy. The problem is that I must take the name of the
image from an .xml file, specified like this:
<mx:DataGrid id="obj" dataProvider="{ObjList}" > where
ObjList is the .xml file with <name/>
<picture_address/> etc.
The second column must contain a textbox so I can input a
number of items for each picture ( can be also a combobox where
from I can select some value, from 1 to 20 for example).
I've searched the Internet and I haven't found a solution
yet. Please give me a link or a solution for this problem.
Tudor

use itemrenderes.... the example below shows how to add an
image.... you can do the same thing with a text box or combo box
<mx:DataGridColumn width="10" headerText="Image">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="100%">
<mx:Image verticalCenter="0" horizontalCenter="0"
source="{data.picture_adress}""/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>

I am looking for a tutorial I had found a few days back on Tabular data display in Flex

Hi,
I picked up Flex programming a few days ago and I was learning about data grids and tabular display of data. I came across a tutorial with code samples that showed how to 1. display information in a tabular format.
2. how to read that information from a xml
3. how to show more information if a item in the tabular format is selected.
the tutorial used gamers and their preferred games as tabular data items and once an item is clicked it showed the game publisher info and some detailed information as text. I am looking for this particular tutorial again and not able to find through google search
Could you please help me discovering this article again?
regards,
Ram

Found it.
http://www.switchonthecode.com/tutorials/flex-fun-advanced-datagrid-topics

Coded UI: How to verify watermark displayed in the fields and Data grid?

Hi,
I've an requirement to verify watermark in the fields say username field displays "Username" water mark when no data is available in the field and water mark in data grid saying "No data available".
Please observe the water mark displayed in screenshot below:
So how to verify watermark?
Thanks & Regards,
Sunil
Best Regards, Sunil Email: [email protected]

Hello,
Depending on what form technology you are using, you can try posting to one of the following forums:
Windows Forms General
Windows Presentation Foundation (WPF)
ASP.Net forums
Karl
When you see answers and helpful posts, please click Vote As Helpful, Propose As Answer, and/or Mark As Answer.
My Blog: Unlock PowerShell
My Book:
Windows PowerShell 2.0 Bible
My E-mail: -join ('6F6C646B61726C406F75746C6F6F6B2E636F6D'-split'(?<=\G.{2})'|%{if($_){[char][int]"0x$_"}})

User-Defined Type does not display values in Table Data grid

I have a User defined Type that is a collection of one character VARCHAR2 values. In the Table Data grid it does not display the character values. I know on all our other Oracle development applications these values display. Is this a bug or is there a snippet to display these values?

Version: 1.0.0.15
DB: 10.2.0
Workstation OS: Windows XP

How to put an image in a data grid in Flex Builder 2

Hi All,
I need to populate a data grid with some text data received
from a web service and, in a particular column of the datagrid, I
have to put an image depending of a specific data returned me by
the web service.
It seems that there is the possibility to add an image in
data grid column with the cellRenderer properties, but this
property is available only for ActionScript 3.
I'm developing an application in Flex Builder 2 that run
ActionScript 2 and cellRenderer properties is not available. Is it
right?
If no, I will can use this cellRenderer properties in my
application. Please, can you show me an example?
If yes, there is a way to insert an image in datagridcolumn
with ActionScript 2?
Thank you very much
Regards

Flex Builder 2 uses Actionscript 3.
You will need to write a renderer for for this column.
There are a lot of examples of datagrids with images in them.
here is one from the livedocs
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=cellrenderer_072_28.html

Text in data grids doesn't display

With the new 29 version of FireFox, data grids on our site don't seem to display the data in the grids any longer. When using Chrome or IE11, these still show just fine. Version 28 and earlier worked great. The menu system in our site doesn't work well any longer either using version 29.
What we are seeing on this site was also seen with IE11 when it first came out but that was easily fixed by just using the "compatability" settings in IE11 and adding our site to the list of compatible sites. There isn't such a setting in FireFox so I wonder how we go about getting around this.

Thanks for the offer but we no part of this site can be publicly accessed. The thought of a font causing the problem doesn't make much sense to me because it was working fine prior to version 29. Why would the font all of a sudden be causing the problem. Furthermore, it isn't just text in data grids but the menu system we use doesn't work properly either. You have to hold down on the left mouse button to use the menu and then when you are on the item you want to select, let off the left mouse button. Guess our only option is to start recommending Chrome or IE.

Leading Zeros Missing - When exporting data from ALV grid display to Excel

Hi,
Am exporting the data from ALV GRID DISPLAY to Excel sheet using standard toolbar icon 'Local file'
the leading zeros displayed in the ALV output is missing in the EXCEL sheet.
(eg) in ALV o/p - 0029.
in Excel - Only 29 is appearing.
As per the requiement i have to show the leading zeros in excel also.
Pls help on this issue.
Thanks in advance..

Hi ,
Please set the property :
wa_fieldcat-lzero = 'X' .
when you are creating field catalog for display alv data .
your prob will solved .
Regards ,
Nilesh Jain

Pulling Data from an imported web service into a data grid - Flex 3.0

Hi all,
I have created a web service from Oracle using JDeveloper and imported it into my Fex 3 project, and I am trying to populate a data grid with the data from the web service. I was trying to emulate the example found in my Adobe Flex 3.0 for Dummies book (see http://dougmccune.com/flexfordummies/chapter14/srcview/index.html), and while the code from the book with that data service works fine, I can't get my application to work. My issue is with the part of code mx:DataGrid dataProvider="(service)" - I do not know how to specify what to use for the data source to populate the data grid from my imported web service. Any suggestions or examples would be helpful, as I am a newcomer to Adobe Flex. My code is as follows:
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:webservices="
generated.webservices.*">
<mx:Script>
<![CDATA[
private function getData():void {service.getPdRec(ageDt.text);
]]>
</mx:Script>
<webservices:PD_Pct_Web_Service id="service" />
<mx:VBox>
<mx:HBox width="100%">
<mx:TextInput id="ageDt" width="100%" />
<mx:Button id="submitButton" label="Search" click="getData()" />
</mx:HBox>
<mx:DataGrid dataProvider="(service.getPdRec_lastResult
" rowHeight="
58" width="100%" height="300">
<mx:columns>
<mx:DataGridColumn dataField="creditManager" headerText="Credit Manager" width="40" />
<mx:DataGridColumn dataField="pdTarget" headerText="PD Target" width="40" />
<mx:DataGridColumn dataField="totalPd" headerText="Total PD" width="40" />
<mx:DataGridColumn dataField="pdPct" headerText="PD Percent" width="50" />
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>
My web service returns the following when invoked:
<env:Envelope
xmlns:env="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ns0="http://erec_db/PD_Pct_Web_Service.wsdl/types/">
<env:Body>
<ns0:getPdRecResponseElement>
   <ns0:result>
    <ns0:creditManager>Cobb</ns0:creditManager>
    <ns0:pdTarget>10</ns0:pdTarget>
    <ns0:totalPd>147.65</ns0:totalPd>
    <ns0:pdPct>26.77</ns0:pdPct>
   </ns0:result>
   <ns0:result>
    <ns0:creditManager>Collova</ns0:creditManager>
    <ns0:pdTarget>10</ns0:pdTarget>
    <ns0:totalPd>27.71</ns0:totalPd>
    <ns0:pdPct>21.67</ns0:pdPct>
   </ns0:result>
   <ns0:result>
    <ns0:creditManager>Lee</ns0:creditManager>
    <ns0:pdTarget>10</ns0:pdTarget>
    <ns0:totalPd>33.61</ns0:totalPd>
    <ns0:pdPct>72.38</ns0:pdPct>
   </ns0:result>
   <ns0:result>
    <ns0:creditManager>Maynard</ns0:creditManager>
    <ns0:pdTarget>10</ns0:pdTarget>
    <ns0:totalPd>74.19</ns0:totalPd>
    <ns0:pdPct>33.69</ns0:pdPct>
   </ns0:result>
   <ns0:result>
    <ns0:creditManager>Ong</ns0:creditManager>
    <ns0:pdTarget>10</ns0:pdTarget>
    <ns0:totalPd>13.26</ns0:totalPd>
    <ns0:pdPct>46.06</ns0:pdPct>
   </ns0:result>
</ns0:getPdRecResponseElement>
</env:Body>
</env:Envelope>

Use data binding. <mx:DataGrid dataProvider="{service.getPdRec_lastResult}"
-Radhakrishna

Flex List with data-grid issue any body can help me ......i added the full code below

Thanks in advance
Exactly wat i need is
1.if i click the open button want to visible all datagrid ,its working perfectly.
2.if i click the close button want to close all data grid ,its working perfectly.
3. if i click a particular list means want to visible particular datagrid..some times working good but some times not visible ...
4.if i click the list if datagrid already open means want to close .some times creates extra space below the datagrid........
if u cont get clearly please copy the below code and check it.......any other way to solve this problem?.......
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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%" >
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var ArrUserList:ArrayCollection;
[Bindable]
public var listDB:ArrayCollection = new ArrayCollection([ {label: "2011", data:"jan",day:"saturday",date:"1-4-11"},
{label: "2011", data:"jan",day:"monday",date:"13-4-11"}, {label: "2013", data:"jan",day:"monday",date:"1-5-11"}, {label: "2013", data:"jan",day:"wednesday",date:"14-5-11"}, {label: "2015", data:"jan",day:"tuesday",date:"11-5-11"}, {label: "2015" ,data:"jan",day:"friday",date:"1-6-11"} ]);
public var loc_first_last_name:String;
function Load():void
ArrUserList=Find_Duplicate(listDB);
for(var i:int=0; i<ArrUserList.length; i++)
ArrUserList[i].click=0;
Lst_userlist.dataProvider=ArrUserList;
Lst_userlist.rowCount=ArrUserList.length;
function Clink_lnk_open():void
if(lnk_open.label=="Open")
for(var i:int=0; i<ArrUserList.length; i++)
ArrUserList[i].click=1;
lnk_open.label="Close";
ArrUserList.refresh();
Lst_userlist.validateNow();
Lst_userlist.dataProvider=ArrUserList;
Lst_userlist.rowCount = ArrUserList.length ;
else
for(var i:int=0; i<ArrUserList.length; i++)
ArrUserList[i].click=0;
lnk_open.label="Open";
ArrUserList.refresh();
Lst_userlist.validateNow();
Lst_userlist.dataProvider=ArrUserList;
Lst_userlist.rowCount = ArrUserList.length ;
function Click_UserName1(event:MouseEvent,data:Object):void
loc_first_last_name=event.currentTarget.text;
var str:String;
for(var i:int=0; i<ArrUserList.length; i++)
str=ArrUserList[i].label;
if(loc_first_last_name==str)
if(ArrUserList[i].click == 0)
ArrUserList[i].click=1;
else
ArrUserList[i].click=0;
ArrUserList.refresh();
Lst_userlist.validateNow();
Lst_userlist.dataProvider=ArrUserList;
Lst_userlist.rowCount=ArrUserList.length;
public function Find_Duplicate(test_arr:ArrayCollection):ArrayCollection
var res_arr:ArrayCollection=new ArrayCollection();
var flag:Boolean;
for(var i:int=0;i<test_arr.length;i++)
var j:int=0
flag=false;
for(;j<res_arr.length;j++)
if(res_arr[j].label==test_arr[i].label)
res_arr[j].dataCollection.addItem(test_arr[i]);
flag=true;
break;
if(!flag)
var myItem:Object = new Object() ;
myItem.label=test_arr[i].label;
myItem.dataCollection=new ArrayCollection();
myItem.dataCollection.addItem(test_arr[i]);
res_arr.addItem(myItem) ;
return res_arr;
]]>
</fx:Script>
<s:Scroller id="id_scroller" width="100%" height="100%">
<s:VGroup id="id_Vgroup" paddingLeft="50" paddingTop="10" paddingBottom="10"   width="100%" height="100%" >
<mx:VBox width="850" paddingLeft="0" paddingTop="1"    color="black" backgroundColor="#FFFFFF">
<mx:HBox width="850" left="50" paddingBottom="3" paddingLeft="5" backgroundColor="#6D6C6C"   paddingTop="3" color="#FFFFFF" >
<mx:LinkButton id="lnk_open" label="Open" textDecoration="underline" click="Clink_lnk_open();"/>
<mx:Button id="load_btn" label="Load" click="Load()"/>
</mx:HBox>
<mx:VBox id="Vbox_main" width="850"   horizontalScrollPolicy="off" verticalScrollPolicy="off" >
<mx:List variableRowHeight="true"   width="850" id="Lst_userlist" paddingTop="-3" verticalScrollPolicy="off" horizontalScrollPolicy="off"
buttonMode="true" >
<mx:itemRenderer>
<fx:Component>
<mx:VBox paddingTop="-5" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
override public function set data(value:Object):void
super.data = value;
Membership_Grid.dataProvider=data.dataCollection;
Membership_Grid.rowCount=data.dataCollection.length;
lbl_userhead.text=data.label;
lbl_userhead1.text=data.dataCollection.length+" Datas";
if(data.click==1)
Vbox_main.visible=true;
Vbox_main.includeInLayout=true;
else
Vbox_main.visible=false;
Vbox_main.includeInLayout=false;
Membership_Grid.validateNow() ;
]]>
</fx:Script>
<mx:HBox id="vbox_grid" horizontalScrollPolicy="off" height="25" verticalScrollPolicy="off" width="850" paddingLeft="10" paddingTop="5" backgroundColor="#6D6C6C" color="#FFFFFF">
<s:Label id="lbl_userhead" click="outerDocument.Click_UserName1(event,data)" buttonMode="true"   width="250" paddingTop="3" />
<s:Label id="lbl_userhead1" buttonMode="true"   width="548" paddingTop="3" />
</mx:HBox>
<mx:VBox id="Vbox_main" width="850" horizontalScrollPolicy="off" verticalScrollPolicy="off" visible="false" includeInLayout="false" >
<mx:DataGrid id="Membership_Grid"   alternatingItemColors="[#DCDCDC,#F8F8FF]" paddingLeft="5" horizontalScrollPolicy="off" color="black"
horizontalGridLines="false" verticalScrollPolicy="auto" verticalGridLines="false" rowHeight="25" width="850" borderSkin="{null}"
borderVisible="false" >
<mx:columns>
<mx:DataGridColumn width="150" headerText="Year" dataField="label"/>
<mx:DataGridColumn width="150" headerText="Month" dataField="data"/>
<mx:DataGridColumn width="150" headerText="Day" dataField="day" />
<mx:DataGridColumn width="150" headerText="Date" dataField="date"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
</mx:VBox>
</s:VGroup>
</s:Scroller>
</s:Group>

Hi
Sir am using flex 4.0.1     SDKS 4.1.0....
Still i cont fix this problem....i have the same prob in many mxml files .any alternate solution for my prob pls let me know...
Thanks in Advance,
senthil.

"advanced data grid" with flex builder 3.0

I'm getting watermark as "Flex Data Visualization
Trial" when tried to use advances data grid with flex builder 3.0. There are some links floating on the internet where it's suggested that the license key should be provided in the flex-config.xml to avoid this issue. I would like to know if this componenet is stable with flex builder 3.0 and is it ok to use this in production environment?

Someone from Adobe might be able to answer more definitely
but it's probably just not considered compatible with a modified
Eclipse (at least, the installer). It may just be the installer
blowing up when it shouldn't. I think Adobe doesn't want to support
install configurations that they don't have setup and tested. I had
a similar issue once and solved it by doing the following... not
sure if it'll work, and it's more of a last resort:
Setup a regular eclipse install - install the plugin there.
Somehow, you'll have to keep track of all the files it adds, either
using timestamps or some compare software. It should be a bunch of
files and/or folders in the '/plugins' directory, and possibly a
few others in '/configuration', maybe '/features'. Take all the new
folders and any jar files etc, and drop them into the same folders
in your special Eclipse version. Hopefully when you start it up
you'll get the Flex functions...
Of course, you could end up hosing your entire "NWDS"
(whatever this is) install. So you probably want to test it out
first!

Displaying SQL result in data grid

I'm trying to access a local DB file using an Air app. I can
successfully create the connection and connect; what I'm really
stuck on is displaying the data from my request in a Data Grid.
Using this code I can see my records in the console, but how
do I get it into a data grid? It doesn't seem to want to go into an
ArrayColleciton.
quote:
function selectResult(event:SQLEvent):void
var result:SQLResult = selectStmt.getResult();
resultData = result;
var numRows:int = result.data.length;
for (var i:int = 0; i < numRows; i++)
var output:String = "";
for (var columnName:String in result.data
output += columnName + ": " + result.data[columnName] +
trace("row[" + i.toString() + "]\t", output);

"arthurlockman" <[email protected]> wrote in
message
news:g7lfrq$qi$[email protected]..
>I want to have an image component that gets it's source
from the item that
>is
> currently selected selected in a data grid (like a
master detail region).
> I
> also want to do the same with a text box and a text
area. How do i do it?
yourDataGrid.selectedItem will contain the data from the
selected item.

Data Grid display in flex

Similar Messages

Maybe you are looking for