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.
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 am dragging item from a datagrid and while dragging I could see all of the columns in the selected record, being getting dragged. However I only want to show one column (maybe name or id of the record)? Is there a way to achieve this? Also, could I show an icon or image instead of the record while dragging.
Thanks Guys.
This can be done by extending the DataGrid to expose the DataGridDragProxy property. Check out http://dgrigg.com/blog/2006/11/03/datagrid-drag-image/ for a working example.
The extended DataGrid:
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridDragProxy;
import mx.core.IUIComponent;
/**
* #public
* class to use as DragProxy image
* set the default value to the standard DataGridDragProxy class
*/
[Bindable]
public var dragProxyImage: Class = DataGridDragProxy;
override protected function get dragImage():IUIComponent
{
var image:IUIComponent = new dragProxyImage();
image.owner = this;
return image;
}
]]>
</mx:Script>
</mx:DataGrid>
Using the DataGrid:
<controls:DataGrid
dataProvider="{dataSource}"
rowHeight="40"
dragEnabled="true"
height="140"
dragProxyImage="com.dgrigg.controls.CustomDragProxy"
allowMultipleSelection="true">
<controls:columns>
<mx:DataGridColumn headerText="Image" dataField="image">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.image}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Product" dataField="name"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</controls:columns>
</controls:DataGrid>
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.
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 am trying to implement the following :
First column of datagrid has a checkbox.
Select checkboxes, and then delete the datagrid column.
Dynamically, add checkbox when row is added dynamically.
Do not show check box if now data in row.
Can someone give some guidance ?
I am assuming you want to delete a row and not a column. The following works
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var ac:ArrayCollection=new ArrayCollection([{name: "John", shouldDelete: true}, {name: "Joe", shouldDelete: false}, {name: "Jill", shouldDelete: false}])
private function deleteRows()
{
for each (var row:Object in ac)
{
if (row.shouldDelete == true)
{
var i:int=ac.getItemIndex(row);
ac.removeItemAt(i);
}
}
}
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid id="dg"
dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn dataField="name">
</mx:DataGridColumn>
<mx:DataGridColumn id="col2"
editorDataField="selected"
rendererIsEditor="true"
dataField="data.shouldDelete">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox label="Test"
selected="{data.shouldDelete}"
change="data.shouldDelete=selected"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Button label="delete"
id="deleteBtn"
click="deleteRows()"/>
</mx:VBox>
</mx:Application>
In itemdatabound u should give enabled as false in particular cell....