I am populating 3 columns of my datagrid using a simple XML file. The last column is supposed to be an itemrenderer, basically a Button. However the button should appear only on certain rows of the 3rd column of the datagrid depending on the value from the XML file, which is either “true” or “false”. So basically I want to set the Visible property of the button in the itemrenderer to true or false.
Here is the whole application
<?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" pageTitle="Dynamic Data Grid">
<!-- <s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>-->
<fx:Declarations>
<s:ArrayList id="cccb_dp">
<fx:String>User1</fx:String>
<fx:String>User2</fx:String>
<fx:String>User3</fx:String>
</s:ArrayList>
<fx:XML id="tempXML" source="assets/fieldsXML.xml"/>
<s:XMLListCollection id="fieldsXMLList" source="{tempXML.worker}"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:VGroup verticalAlign="middle" horizontalCenter="1" verticalCenter="1" horizontalAlign="center">
<s:HGroup horizontalAlign="center" verticalCenter="-221" width="580" height="158" x="75">
<s:Label text="CC" width="23" height="24" verticalAlign="middle" fontWeight="bold"/>
<s:DropDownList id="cc_cb" dataProvider="{cccb_dp}" width="175"/>
</s:HGroup>
<mx:DataGrid id="myDG" dataProvider="{fieldsXMLList}">
<mx:columns>
<mx:DataGridColumn headerText="Header1" dataField="@field_label"/>
<mx:DataGridColumn headerText="Header2" dataField="@field_value"/>
<mx:DataGridColumn headerText="Header3">
<mx:itemRenderer>
<fx:Component>
<s:Button click="onClick(event)" label="Click Me" dataChange="onDataChange(event)" >
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function onClick(evt:Event):void
{
Alert.show(data.@field_visibility);
}
private function onDataChange(evt:Event):void
{
visible=data.@field_visibility;
}
]]>
</fx:Script>
</s:Button>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
The XML:
<worker_fields>
<worker id="1" field_label="Seller" field_value="5" field_visibility="false"/>
<worker id="1" field_label="Balance" field_value="100" field_visibility="true"/>
<worker id="1" field_label="Cash Owned" field_value="300" field_visibility="true"/>
<worker id="2" field_label="Seller" field_value="5" field_visibility="false"/>
<worker id="2" field_label="Balance" field_value="130" field_visibility="true"/>
<worker id="2" field_label="Cash Owned" field_value="132" field_visibility="false"/>
<worker id="2" field_label="Credits" field_value="131" field_visibility="true"/>
</worker_fields>
Any idea how to go around it.
Thanks you for the precious help.
Each itemRenderer gets a data object; which contains the element the renderer is displaying. There is not going to be a property named field_visibility in your renderer because it is not a default property and you didn’t create one.
However, it should be a property on the data object passed into the renderer.
The data property should point to a single worker:
And you should be able to access it with slight mods to your code:
For best results; you should consider listening to the data change event and changing the visibility in that way. This is known to cause less issues, long term, than the use of binding:
For some reason the original posters last code edit wiped out his actual question. Flex is having an issue translating the the XML string value into a Boolean value.
data.@field_visibilityappears to be returning an XMLList. As a Boolean value that will always be true. That is issue one. It can be solved by doing a conditional like this:The second issue is that the button doesn’t appear to vanish if it is the top level component. So, you need to place it inside a container. I used a Canvas.
Here is modified application: