I have the following question regarding Flex/AIR data grids:
Can I access the value of a var of one aggregated object as a dataField of a column of the DataGrid?
What I would like to have is:
public class A {
public var id:String;
}
public class B {
public var a:A;
public var value:uint;
}
<mx:DataGrid id="grid" dataProvider="{items}">
<mx:columns>
<mx:DataGridColumn headerText="aId" dataField="a.id"/>
<mx:DataGridColumn headerText="value" dataField="value"/>
</mx:columns>
</mx:DataGrid>
items is an ArrayCollections of B's.
From what I have read and looked in the code for the DataGridColumn this 'a.id' does not work as that value is taken from the data object using the array syntax data[key], I have tried to use a custom item renderer but that did not work either.
Could I get some help with this? I am trying to figure out Flex as home project and I just started out.
After some more tries got the problem solved.
<mx:DataGrid id="grid" dataProvider="{items}">
<mx:columns>
<mx:DataGridColumn headerText="aId">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.a.id}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="value" dataField="value"/>
</mx:columns>
</mx:DataGrid>
Related
I am listing an Arraycollection in a datagrid using flex and inside the datagrid I have a button to delete a row, after that I re-assign the same Arraycollection again by fetching an array from a java service
My Code:
<mx:DataGrid width="100%" height="100%" dataProvider="{xxx}" >
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="status" headerText="Status"/>
<mx:DataGridColumn dataField="path" headerTeUxt="Actions" wordWrap="true" minWidth="120">
<mx:itemRenderer>
<mx:Component>
<mx:Script>
<![CDATA[
protected function deliteminlist(event:MouseEvent):void
{
//delete a value in arrayCollection
//Fetch the array collection from java Service
//assigning to variable dataprovider variable
_view.xxx = null;
_view.xxx = temp;
//xxx is the arraycollection and dataprovider for the datagrid
}
]]>
</mx:Script>
<mx:Image source="#Embed(source='/assets/images/clone.png')" click="deliteminlist(event)" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
This is throwing an error (An internal error has occurred - Error #1010.
) and data is not refreshing in the datagrid.
You are using inline item renderer. Its scope is different from the parent view so that you can't reference _view.xxx ( not in scope ).
You can try outerDocument keyword to solve this problem.
outerDocument.xxx = null;
outerDocument.xxx = temp;
I have a dataprovider that is an ArrayCollection of simple string values. I need to get these strings translated before they are rendered in my datagrid. How can I do this?
Note that I do not want to copy it to a new ArrayCollection with the translated values since i allowing inline editing to update the dataprovider source.
Current datagrid without translation for values in the dataprovider
<mx:DataGrid width="100%" height="100%" id="contactInfoGrid"
dataProvider="{model.selectedCustomer.contacts}"
editable="true" itemEditEnd="contactInfoChanged(event)">
<mx:columns>
<mx:DataGridColumn width="200" dataField="type" editable="false"
headerText="{resourceManager.getString('customer','customer.contactInformation.type')}"/>
<mx:DataGridColumn width="300" dataField="value" editable="true"
headerText="{resourceManager.getString('customer','customer.contactInformation.value')}"/>
<mx:DataGridColumn editable="false" headerText="{resourceManager.getString('customer','general.remove')}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center">
<controls:RemoveLinkButton visible="true" label="" click="outerDocument.removeContactInfo(event)"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
You will either need to:
translate the values in the dataprovider itself. I'm not sure if you want to do this as you will change the source of data.
add label functions to the datagrid columns and return the translated text for each cell
I have this code. I want to add Buttons in the second column of the data grird.
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
How can I add buttons in second column using an ItemRenderer?
There are many ways you can do this.
You could use an inline itemRenderer like so:
<fx:Script>
public function myButton_clickHandler(event:Event):void
{
Alert.show("My button was clicked!");
}
</fx:Script>
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<mx:Button label="My Button" click="outerDocument.myButton_clickHandler(event);" />
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Or you could create a custom component and set the itemRenderer property of the DataGridColumn.
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="" itemRenderer="MyCustomItemRenderer"/>
</mx:columns>
</mx:DataGrid>
UPDATE:
To get the id of the button that was clicked, you can use the currentTarget property of the event that gets passed to your eventListener.
public function myButton_clickHandler(event:Event):void
{
Alert.show("Button " + Button(event.currentTarget).id + " was clicked!");
}
I have a datagrid with a custom label itemrenderer (basically it makes the label look like a traditional html hyperlink).
<mx:DataGridColumn id="itemId">
<mx:itemRenderer>
<mx:Component>
<controls3:HyperlinkLabel text="{data.doc}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The above works perfectly.
I'd like to try add an event listener to this itemrenderer, but I'm not sure how to do this given that I cant specify an id for the itemrendered itself.
I tried the following, but it doesnt seem to work:
itemId.addEventListener(MouseEvent.CLICK, onItemSelect);
You don't need an ID. Just do it using event.currentTarget
<mx:DataGridColumn id="itemId">
<mx:itemRenderer>
<mx:Component>
<controls3:HyperlinkLabel text="{data.doc}" click="onItemSelect(event)" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
And then ... up in your Script tag ...
private function onItemSelect(event:MouseEvent) : void {
// do something with event.currentTarget
}
I have 3 checkboxes for calculating amount purpose. I used Datagrid within datgrid used
<mx:DataGrid>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox id=mycheckbox change="calc()"/>
</mx:Component>
</mx:itemRenderer>
...
public function calc():void
{
statistic.dataProvider = mycheckbox.selectedItem;
}
but it's throws error like Call to possibly undfined method (calc)
You can't give the checkbox an id the way you have done and expect it to behave as a single component.
When you specify the checkbox as an item renderer for a column you are not talking about a single checkbox.
You will be dealing with as many check boxes as there are rows in the datagrid.
The following example shows you how to determine if the checkbox in a particular row is selected or not
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private var ac:ArrayCollection=new ArrayCollection([
{name: "John", test: true},
{name: "Joe", test: false}]);
private function init() {
dg.dataProvider=ac;
}
public function check():void {
var obj:Object=dg.selectedItem;
Alert.show("Checkbox=" + obj.test);
}
]]>
</mx:Script>
<mx:DataGrid id="dg"
dataProvider="{ac}"
click="check()">
<mx:columns>
<mx:DataGridColumn dataField="name">
</mx:DataGridColumn>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox label="Test"
selected="{data.test}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Sometimes flex seems to have trouble updating the data provider for the datagrid when you have a nested itemrenderer. You can explicitly set the appropriate property of the dataprovider row when the change event occurs on the checkbox as below;
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox label="Test" selected="{data.test}"
change="data.test=selected"/>
</mx:Component>
</mx:itemRenderer>
A checkbox does not have a "selectedItem" function or property...
mycheckbox.selected will return true or false based on whether or not sed checkbox is checked
Not really sure what you're trying to accomplish by setting a dataprovider to true or false, seems to me like you want to use a RadioButtonGroup
use outerDocument.functionname inside itemrenderer, and set the function as public. This is a limitation of Flex, Hierarchy mismanagement.