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
Related
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>
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
Let me explain the situation...
dg.selectedItems gives me all the values selected, but if i need one column names value alone then what should i do.
<mx:DataGridColumn dataField="1" headerText="Email" />
dg.selectedItems[itemIndex]["columnName"]
itemIndex = the index of the selected item in the array
note: this is if you have allowMultipleSelection = true... if you are only selected a single item/row use dg.selectedItem. This will return an object of all the columns.
Added full working code example below:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.ItemClickEvent;
import mx.collections.*;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection( [
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:12.99},
{Artist:'Miley Cyrus', Album:'Break Out', Price:10.99}] );
private function clickItemHandler(event:ListEvent):void{
if(myGrid.selectedItem != null){
trace(myGrid.selectedItem["Album"]);
}
}
]]>
</mx:Script>
<mx:DataGrid id="myGrid" width="350" height="200"
dataProvider="{dp}" itemClick="clickItemHandler(event);" >
<mx:columns>
<mx:DataGridColumn dataField="Album" />
<mx:DataGridColumn dataField="Price" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
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.
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....