advanced datagrid - apache-flex

Can anyone provide me with an example of how to use the advanced datagrid in Flex?
I am trying to get the values from a database and construct the hierarchial data. In particular, constructing the dynamic hierarchal data for advanced datagrid.

There are some examples in the official documentation: http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_07.html
You might also be interested in the HierarchicalData class: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/HierarchicalData.html

You can try this
<mx:AdvancedDataGrid left="0"
right="0"
top="0"
bottom="35"
allowMultipleSelection="false"
folderClosedIcon="{null}"
folderOpenIcon="{null}"
defaultLeafIcon="{null}"
displayItemsExpanded="true"
dataTipFunction="testTip"
sortExpertMode="true" variableRowHeight="true" wordWrap="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierrarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Result Name"
dataField="resultName"
width="150"
/>
<mx:AdvancedDataGridColumn headerText="Run Date"
dataField="runDate"
/>
<mx:AdvancedDataGridColumn headerText="File Count"
dataField="fileCount"
width="300"
/>
</mx:columns>
</mx:AdvancedDataGrid>
Form the "dpHierrarchy" from the result obtained from the service result as given below:
[ArrayElementType("ResultsVO")]
public var dpHierrarchy:ArrayCollection = new ArrayCollection();
public function createHierarchialResultVO(results:ArrayCollection):void
{
for each(var result:Result in results)
{
var resultVO:ResultsVO= new ResultsVO();
resultVO.resultName = result.resultName;
resultVO.runDate = result.runDate.toString();
resultVO.type="header";
var childrens:ArrayCollection = new ArrayCollection();
for each(var processDetails:ProcessDetails in result.details)
{
var children:ResultsVO= new ResultsVO();
children.files =result.fileCount;
children.status=result.status;
children.type="result";
}
resultVO.children =children;
dpHierrarchy.addItem(resultVO);
}
//return dpHierrarchy;
}
The advanced datagrid will look like this

Related

AdvancedDataGrid dataFields refresh

I have a problem with an AdvancedDataGrid; i want the fields Actual and Estimate to change with the timer function but it doesn't work. It works only by refreshing all the adg with the collapse of the tree structure. I want that if the tree is "exploded" only actual and estimate fields refresh. Sorry for my uncorrect english.
Here's the code
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication initialize="init();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.*;
import flash.utils.Timer;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
[Bindable]
public var randomNumber:Number = new Number
public function randomValues():Number
{
randomNumber=Math.random()*100
randomNumber*=100
randomNumber=Math.round(randomNumber)
randomNumber/=100
trace(randomNumber)
return randomNumber
}
public var timer:Timer = new Timer(20);
public function timing():void{
timer.addEventListener(TimerEvent.TIMER,function(event:Event):void{randomValues()});
}
[Bindable]
public var dpFlat:ArrayCollection = new ArrayCollection;
public function dpCollection():ArrayCollection
{
dpFlat= new ArrayCollection([
{Continente:"Europa", Paese:"Italia", Actual:randomValues(), Estimate:randomValues()},
{Continente:"Europa", Paese:"Germania", Actual:randomValues(), Estimate:randomValues()}
]);
return dpFlat;
}
public function init():void{
dpCollection()
randomValues()
}
]]>
</mx:Script>
<mx:AdvancedDataGrid horizontalScrollPolicy="on" columnWidth="100" resizableColumns="false" id="myADG" width="469" height="223" color="0x323232" initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{dpCollection()}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="Continente"/>
<mx:GroupingField name="Paese"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Continente"/>
<mx:AdvancedDataGridColumn dataField="Paese"/>
<mx:AdvancedDataGridColumn id="act" dataField="Actual"/>
<mx:AdvancedDataGridColumn id="est" dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:TextArea text="{randomNumber}" x="477" y="10"/>
<mx:Button click="timing()" x="10" y="231" label="Start timing function"/>
<mx:Button click="timer.start()" x="161" y="231" label="Start the time"/>
<mx:Button click="timer.stop()" x="275" y="231" label="Stop the time"/>
</mx:WindowedApplication>
You are not changing the dataProvider in the Timer handler. You are just calling the randomValues() method that just returns a number.
Call gc.source = dpCollection(); from the Timer's handler.
Update: Apparently, the IGroupingCollection does not detect changes to a group automatically, so you must call the refresh() method to update the view after setting the group property.
There seem to be a work around to this issue here

Assigning an array of objects to a DataGrid

When the dataProvider for an DataGrid is an array of objects, how do I set each column's dataField to a property of the object.
I have an ArrayCollection (say a) where each item is an object
For example a[i] = data:Object
Where the object data has some subproperties - data.name, data.title, data.content etc.
I have a DataGrid in which I want to display this data.
So I put:
<mx:DataGrid id="entries" dataProvider="{resultRSS}">
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Title" dataField="data.title"/>
<mx:DataGridColumn headerText="Date" dataField="data.created"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
This doesn't seem to work at all. I get an empty DataGrid. How should I assign the dataField property, so that it shows up properly? I've tried {data.title} too.
Thanks.
Edit: sample of my data
-[]arraycollection
--[0]
----id="id1"
----data.
------title="something"
------name="something"
------text="some html"
--[1]
----id="id2"
----data.
------title="something2"
------name="something2"
------text="some html2"
and table should be
|title |name |text |
=================================
|something |something |some html|
|something2|something2|somehtml2|
here is your answer
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initialize()">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
var a:Array = new Array();
var o:Object = {};
private function initialize():void{
o["text"]="hello";
o["desc"]="Rahul";
a.push(o);
}
]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%" sortExpertMode="true" id="adg1" designViewDataType="tree" dataProvider="{new HierarchicalData(a)}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="text" dataField="text"/>
<mx:AdvancedDataGridColumn headerText="desc" dataField="desc"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
edit - ok now discard my previous answer according to your data try this
var a:Array = new Array();
var o:Object = {};
private function stringArrayToObjectArray():void{
o["id"]="mauj";
var oj:Object=new Object();
oj["title"]="aaa";
o["data"]=oj;
var oj1:Object=new Object();
oj1["id"]="mauj2";
var oj2:Object=new Object();
oj2["title"]="qqqq";
oj1["data"]=oj2;
a.push(o);
a.push(oj1);
}
private function some_labelFunc(item:Object,th:Object):String {
return item.data.title;
}
]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%" sortExpertMode="true" id="adg1" dataProvider="{a}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="COMPANIES" dataField="data" labelFunction="some_labelFunc"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
try this sorry for such a bad code

Flex CheckBox in Datagrid

In the followin flex Code :
Also viewable at : http://www.cse.epicenterlabs.com/checkBoxDg/checkBoxDg.html
1. Add a row in datagrid by clicking on "AddRow"
2. Click on "CheckDg" to see the values of all the checkboxes
- it shows "checkBox57" or "checkBox64" or some similar string
3. Now, "select" the checkBox in the first row.
4. Click again on "CheckDg"
-it show "true"
So, initially dp.getItemAt(i).date returns a CheckBox
and later it returns the "selected" value of the CheckBox?
Why this difference?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Canvas>
<mx:DataGrid x="69" y="119" id="dgFee" editable="true" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true"
editorDataField="selected" rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="false">
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="amount" headerText="Amount" editable="true">
<mx:itemEditor>
<mx:Component>
<mx:TextInput restrict="0-9"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:CheckBox x="130" y="54" label="Checkbox" selected="true" click="Alert.show(abc.selected.toString())" id="abc"/>
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
public var dp:ArrayCollection = new ArrayCollection();
public function addRow():void
{
var tmp:Object = new Object();
tmp['amount'] = 100;
tmp['date'] = new CheckBox();
dp.addItem(tmp);
}
public function delRow():void
{
if(dgFee.selectedIndex != -1)
dp.removeItemAt(dgFee.selectedIndex);
}
public function loop1():void
{
for(var i:int=0;i<dp.length;i++)
{
Alert.show(dp.getItemAt(i).date);
}
}
]]>
</mx:Script>
<mx:Button x="29" y="89" label="AddRow" click="addRow()"/>
<mx:Button x="107" y="89" label="DelRow" click="delRow()"/>
<mx:Button x="184" y="89" label="CheckDg" click="loop1()"/>
</mx:Canvas>
</mx:Application>
You are not supposed to assign objects to data variables but data. Checkbox.select property is set to your check box object first and then true or false after the preceding actions. Try this instead
public function addRow():void
{
var tmp:Object = new Object();
tmp['amount'] = 100;
tmp['date'] = false; // not new CheckBox();
dp.addItem(tmp);
}
PS: Also dp should be attributed with [Bindable] :-)
When you click on the check box in the grid, it writes "true" or "false" into the date field, replacing the original CheckBox object that was there. I believe what itemEditors (you are using your render as an editor) do is they write the .data property from the respective components into the collection.
Set the 'editable' property for that particular datagrid column as false. This will resolve the issue

How can I implement a drilldown effect in a Flex DataGrid?

I want the Flex DataGrid to implement a drilldown effect. The data to the DataGrid is obtained from an XML file.
Datagrid should be something like this:
<mx:DataGrid id="DataGridAnswers"
top="10" bottom="10" left="10" right="10"
>
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<fx:Component>
<mx:LinkButton label="Посмотреть результат"
click="linkbutton1_clickHandler(data.test_id, data.id)">
<fx:Script>
<![CDATA[
import etc.NavigationEvent;
protected function linkbutton1_clickHandler(testId:int, answerId:int):void
{
var navEvent:NavigationEvent =
new NavigationEvent(NavigationEvent.NAVIGATION_STRING,
NavigationEvent.REPORTS_SCREEN, true, true);
navEvent.testId = testId;
navEvent.answerId = answerId;
dispatchEvent(navEvent);
}
]]>
</fx:Script>
</mx:LinkButton>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
And handle this event in container like this:
protected function navigationHandler(event:NavigationEvent):void
{
// выбрать соответвтующий экран на главном меню
mainMenu.selectScreen(event.screen);
switch (event.screen)
{
case NavigationEvent.LOGOUT:
...
break;
}
// Переключить вью стек
if (screenDic[event.screen] != null)
viewStack_main.selectedChild = screenDic[event.screen];
}
plus add eventlistener to container
initialize="this.addEventListener(NavigationEvent.NAVIGATION_STRING, navigationHandler)"

How to Connect Flex to HTTP

I have created a project in Flex Builder 3 and I do not think it is connecting to the HTTP I have assigned. It is a blog application, that is connected to a database with a PHP page. When I view the application on a HTML page, the text fields are not editable--you cannot type in them. This leads me to believe that I have assigned the HTTP incorrectly. Could this be the problem? How do I fix this?
Are you able to dsplay any data in your DataGrid?
If you set a break point in your getData HTTPService, can you catch it? In other words, is it getting called? Or, is there a fault? Add a Fault handler like this:
result="getPHPData(event)" fault="getFault(event)"
and define getFault().
Below is some of the mxml code that I am using. I am not getting any errors about not being able to connect to the database, so I don't think anything is wrong with the PHP.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="535" height="345">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.controls.TextInput;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;
[Bindable]
private var dataArray:ArrayCollection;
private function initDataGrid():void
{
dataArray = new ArrayCollection();
getData.send();
}
private function getPHPData(event:ResultEvent):void
{
var rawArray:Array;
var rawData:String = String(event.result);
rawArray = JSON.decode(rawData) as Array;
dataArray = new ArrayCollection(rawArray);
}
private function sendPHPData():void
{
var objSend:Object = new Object();
var dataString:String = JSON.encode(dataArray.toArray());
dataString = escape(dataString);
objSend.setTutorials = "true";
objSend.jsonSendData = dataString;
sendData.send(objSend);
}
private function updatedPHPDataResult(event:ResultEvent):void
{
lblStatus.text = String(event.result);
}
private function checkRating(event:DataGridEvent):void
{
var txtIn:TextInput = TextInput(event.currentTarget.itemEditorInstance);
var curValue:Number = Number(txtIn.text);
if(isNaN(curValue) || curValue < 0 || curValue > 10)
{
event.preventDefault();
lblStatus.text = "Please enter a number rating between 0 and 10";
}
}
]]>
</mx:Script>
<mx:HTTPService id="getData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="getPHPData(event)">
<mx:request xmlns="">
<getTutorials>"true"</getTutorials>
</mx:request>
</mx:HTTPService>
<mx:HTTPService id="sendData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="updatedPHPDataResult(event)">
</mx:HTTPService>
<mx:Binding source="dgData.dataProvider as ArrayCollection"
destination="dataArray"/>
<mx:Panel x="0" y="0" width="535" height="345" layout="absolute"
title="Forum">
<mx:DataGrid id="dgData" x="10" y="10" width="495" height="241"
dataProvider="{dataArray}" creationComplete="{initDataGrid()}"
editable="true" itemEditEnd="{checkRating(event)}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>
<mx:DataGridColumn headerText="Author" dataField="author" width="115"
editable="false"/>
<mx:DataGridColumn headerText="Rating" dataField="rating" width="50"
editable="true" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="259" label="UpdateDatabase" id="butUpdate"
click="{sendPHPData()}"/>
<mx:Label x="140" y="261" id="lblStatus"/>
</mx:Panel>
</mx:Application>

Resources