I am trying to set the selected value of a checkbox from a dataprovider (an xml file).
<mx:DataGridColumn width="75" headerText="show/hide" dataField="#hidden">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.#hidden}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The problem I am having is, I think, that it's not recognizing the attribute in the html as boolean "hidden="false" or hidden="true". I can get the value, but how to I make it recognize the value as something other than a string?
I think you can wrap it in the type {Boolean(data.#hidden)}
An alternative if wrapping it doesn't work you can declare a boolean
var myBool:Boolean = new Boolean();
And then do a determination:
myBool = (data.#hidden=="true");
EDIT
I don't have much of your code so I can't really test this but I think it should work.
create an MXML component based on the checkbox with this, for my example it will be called ItemRendCheckBox:
<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data( value:Object ):void{
super.data = value;
this.selected = Boolean(data);
}
]]>
</mx:Script>
</mx:CheckBox>
Then in your dataGrid XML do this:
<mx:DataGridColumn width="75" headerText="show/hide" dataField="#hidden">
<mx:itemRenderer>
<mx:Component>
<mx:ItemRendCheckBox/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
I had a similar problem, to get around this just drop this code snippet into your curly brackets:
('false' == data.#hidden) ? false : true
Basically the value you're going to get from data.#hidden will not be a boolean, but a string, hence the use of the quotation marks around false.
Related
Guys I've a grid view in flex,
one of the columns is rendered like this:
<mx:DataGridColumn headerText="Cancel" >
<mx:itemRenderer>
<fx:Component>
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Download" width="100%" >
<mx:click>someFunction();</mx:click>
</mx:Button>
</mx:Box>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
now I've a problem that the function in button click is not being recognized. It says "call to a possibly undefined function" even though it was defined. What is wrong with this? How do i make a button in a grid call a function in the same mxml file??
thanks
Your itemRenderer is considered its own encapsulated component so it's looking for someFunction() within the itemRenderer itself. To call a function you have defined in the mxml file that contains your DataGrid, try calling the function using outerDocument.someFunction();.
If you would like to define the function at the itemRenderer level, you could do something like this:
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<fx:Script>
<![CDATA[
public function someFunction():void
{
// Do Something
}
]]>
</fx:Script>
<mx:Button click="someFunction();"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
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 a <mx:Script> on the main file, where I define this:
[Bindable]
private var dpCols:ArrayCollection = new ArrayCollection([
{'prx':'bl', 'nmb':'Blanco', 'ral':'RAL1013', 'hex':'E8E4CD'},
{'prx':'am', 'nmb':'Amarillo', 'ral':'RAL1005', 'hex':'C79E03'},
{'prx':'gr', 'nmb':'Gris Perla', 'ral':'RAL7045', 'hex':'8E939E'}
]);
I can use it as a dataProvider in many places, but not here:
<mx:TileList dataProvider="{dpCols}">
<mx:itemRenderer>
<mx:Component>
<mx:Box backgroundColor="{int('0x' + data.hex)}"
height="64" width="72">
<mx:Label text="{data.ral}" textAlign="center" width="100%"/>
<mx:Label text="{data.nmb}" textAlign="center" width="100%"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
This TileList is within a <radg:RaDG> (my subclass for AdvancedDataGrid), <radg:columns>, <mx:AdvancedDataGridColumn>, <mx:itemEditor> and <mx:Component>. If I put it outside, it just works. But I need it to put it has the itemEditor.
How should I refer to dpCols then? (or how can I solve this error?)
Thanks!
You need outerDocument, since you're inside the <mx:Component> tag. See the "Using the Component Tag" section in this Adobe docs page or this SO question.
If you're getting particularly tricky with nesting, you may need to use parentDocument instead, but it sounds like outerDocument should work in your case (only one nesting of <mx:Component> tags).
Usage:
<mx:TileList dataProvider="{outerDocument.dpCols}" />
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 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.