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
Related
Here's the situation:
I have a populated datagrid and I want to move a form to be inline (same y position) with the datagrid's selectedItem. I cannot rely on a mouseClick event because the selected item may change with a keyboard event. The datagrid does not have an itemRenderer, just plain old dataField.
Anyone done this before?
Here's some stubbed out example code for all those interested based on Jacob's answer.
<?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:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.formatters.DateFormatter;
[Bindable] public var ac_POitems:ArrayCollection = new ArrayCollection();
[Bindable] public var selectedY:int;
protected function dg_POitems_creationCompleteHandler(event:FlexEvent):void
{
//TODO
}
protected function submit_clickHandler(event:MouseEvent):void
{
//TODO
}
protected function format_sqlite_date(item:Object, col:DataGridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YYYY";
var value:Object = item[col.dataField];
return df.format(value);
}
protected function dg_POitems_changeHandler(event:ListEvent):void
{
trace(event.itemRenderer.y);
selectedY = event.itemRenderer.y;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:DataGrid id="dg_POitems" dataProvider="{ac_POitems}" creationComplete="dg_POitems_creationCompleteHandler(event)"
editable="true" height="100%" change="dg_POitems_changeHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Consumer" dataField="consumer" editable="false"/>
<mx:DataGridColumn headerText="Description" dataField="description" width="300" editable="false"/>
<mx:DataGridColumn headerText="Amount" dataField="item_cost" editable="false" width="55"/>
<mx:DataGridColumn headerText="Service Date" dataField="service_date" labelFunction="format_sqlite_date"/>
<mx:DataGridColumn headerText="Invoice Date" dataField="invoice_date" labelFunction="format_sqlite_date"/>
<mx:DataGridColumn headerText="Paid Date" dataField="payment_received" labelFunction="format_sqlite_date"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:Form id="form_POItemDateEditor" label="{dg_POitems.selectedItem.consumer}" x="{dg_POitems.x + dg_POitems.width + 10}"
y="{selectedY + 10}" visible="{dg_POitems.selectedItem}" borderColor="#ffffff">
<s:Label text="edit {dg_POitems.selectedItem.consumer}" width="100%" textAlign="center" verticalAlign="middle" fontWeight="bold" textDecoration="underline"/>
<mx:FormItem label="Service Date">
<mx:DateField id="service_date"/>
</mx:FormItem>
<mx:FormItem label="Invoie Date">
<mx:DateField id="invoice_date"/>
</mx:FormItem>
<mx:FormItem label="Paid Date">
<mx:DateField id="payment_received"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="submit" label="Submit" click="submit_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:Application>
This should help you get started:
<fx:Script>
<![CDATA[
import mx.events.ListEvent;
protected function datagrid1_changeHandler(event:ListEvent):void
{
trace(event.itemRenderer.y);
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{steps}" change="datagrid1_changeHandler(event)" >
....
Edit Showing listener for spark:List valueCommit Event.
protected function valueCommitHandler(event:FlexEvent):void
{
trace(event.currentTarget.layout.getElementBounds(list.selectedIndex));
}
Have a look at DisplayObject's localToGlobal function. It will allow you to convert the ItemRenderer's 'y' position (that is with respect to the parent container, probably a List) to a global 'y' position (with respect to the Stage).
globalToLocal will do the opposite.
You'll have to do some additional calculations from here on, but those will depend on what your application display hierarchy looks like, so I can't be more specific than that.
You can find full code for exactly what you want to do right here http://flexdiary.blogspot.com/2009/11/flex-template-component.html
I wrote very simple code to understand how columnstretch and calllater work but I couldn't get resizeGrid function worked. What is going on here?
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var denemelist:ArrayCollection;
private function calculateHeight(l:int):Number{
return deneme.measureHeightOfItems(0, l) + deneme.headerHeight;
}
public function resizeGrid():void{
if(denemelist && deneme)
deneme.height = calculateHeight(denemelist.length);
}
public function preinit():void {
denemelist = new ArrayCollection([
{former:"sdfad", latter:"sdfgs"},
{former:"sdfgsd", latter:"sdfgsfd"}
]);
}
public function test():void {
denemelist.addItem({former:"sdfgsdf", latter:"sdfgdsgf"});
}
]]>
</mx:Script>
<mx:VBox width="100%" height="500">
<mx:DataGrid
width="100%"
resizeEffect="Resize"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
id="deneme"
variableRowHeight="true"
editable="false"
dataProvider="{denemelist}"
styleName="phrDataGrid"
columnStretch="callLater(resizeGrid)">
<mx:columns>
<mx:DataGridColumn dataField="former" headerText="former"/>
<mx:DataGridColumn dataField="latter" headerText="latter"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="deneme1" click="test()" />
</mx:VBox>
I don't think the datagrid has been updated yet at the time that you're calling the function. But you might try leaving off the height of the dg and then just setting the rowCount to the number of items in the list.
HTH;
Amy
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
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
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>