Datagrid Column with complex itemRenderer / itemEditor

I have a datagrid with a custom component used as an itemRenderer / editor. The component has two view states (default is simply the text of my data and the second state contains my editor fields). I have is set up so that when an individual double-clicks on the cell of my datagrid the renderer changes view states to the editor view. This view contains a dateSelector component and two numeric stepper components that reflect a date (dateSelector) and the hour and minute in the two steppers. The problem I have is that I'm trying to control the view state based on when the user clicks outside of the editor. When the user is done editing the applicable field(s), I want the viewstate to change back to simply the text-view state and remove the editors.
I had this working except that whenever a user changed focus from say the dateSelector to one of the numeric steppers the view state changed prematurely. The editor view should stay in view until the datagrid cell loses focus. Any ideas???

Hi Alex,
thanks for the response. I've looked at your example with the two text fields and can't seem to find a way to implement the same idea in my project. When the DG loads I don't want the editable fields to be displayed. I just want the user to see the text values. When the user double-clicks, I want the renderer to change to an editor and allow the user to make the necessary changes. I'm trying to switch view states within the renderer/editor to make this happen but can't seem to get the editor to switch back to a renderer when the cell in the DG loses focus. That's when I would like the switch to occur and not before. What happens now is that whenever one of the editable components loses focus the editor automatically switches back to a renderer and doesn't allow the user to navigate to any of the other editable components without double-clicking again. My editor uses a date selector and two numeric steppers. Any ideas? I'm still learing Flex and AS 3 so any help is greatly appreciated!! BTW... great blog.
Bill

Similar Messages

Very specific datagrid column with's, Lazy Way

I have a datagrid where I want the width of certain columns
to automatically be set to the width of the header text + 6 pixels.
Is this possible

Hi,
See if this thread helps:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1237299
Cheree

Database Adapter: cannot access table with complex record type as columns

Hi all,
I cannot perform any operations on a table that has columns with complex record type.
I have created a table to store purchase order details.
Sample script:
CREATE type XX_CUST_INFO_TYP as object
ssn VARCHAR2(20),
rating NUMBER(15)
CREATE type XX_ITEM_TYP as object
item_name VARCHAR2(20),
unit_price NUMBER(15),
quantity NUMBER(15)
CREATE table XX_PORDER (cust XX_CUST_INFO_TYP, porder XX_ITEM_TYP);
When i try to access the table X_PORDER in jdev through a database Adapter, i receive the error as
"some tables contains columns that are not recognized by the database adpter"
1.) so in this case, how to include such tables that have complex types?
Also, check out this scenario also..
1. add a table through a database adapter
2. drop the table in backend
3. i can still see the table and its structure in the database adapter wizard even after restarting Jdeveloper.. How is it possible?
These are some really interesting scenarios to experiment. Please suggest your ideas on this..
Thanks All!

Hi Hem,
for a select you could select against a view. And for inserts you could create a stored procedure. They support complex types since 10.1.2. Complex types support in tables/views was added for 11 (next major release).
You might be able to use PureSQL as a workaround too, i.e.
insert into XX_PORDER values (XX_CUST_INFO_TYP(?,?), XX_ITEM_TYP(?, ?, ?))
As for your other problem, in 10.1.2/10.1.3 the DBAdapter wizard sits on top of the Jdev Offline Tables and TopLink Mapping Workbench components. When you remove a table in the wizard it won't delete the Offline DB component. It was added by the wizard, but afterwards it is public to the entire Jdev project. You must remove it from Jdev yourself. This has been improved for the next major release too, no artifacts from underlying components are created.
To remove it select:
Offline DB Objects -> <schema> -> <table> and try File.. Erase From Disk.
Thanks
Steve

Datagrid itemRenderer/itemEditor trouble

I have a datagrid in a Flex project, the data grid has an XML file as the source (contents below), now due to the way it is formatted (I cannot change this) some of the data I want to display is inside a tag that isnt at the initial array level. Here is the file:
<?xml version="1.0" encoding="utf-8" ?>
<Categories>
<Category>
<CategoryName>Cat 1</CategoryName>
<CategoryLink>http://www.google.com</CategoryLink>
<CategoryData>
   <CategoryDescription>This is the description of category 1</CategoryDescription>
   <CategoryHeader>My Category Title 1</CategoryHeader>
   <CategoryNumber>1</CategoryNumber>
</CategoryData>
</Category>
</Categories>
I need to display CategoryName, CategoryLink, CategoryData.CategoryDescription, CategoryData.CategoryNumber.
Now I blindly dropped the datagrid into the project and bound it to the data source, I get the following returned for CategoryData:
[object CategoryData_type]
Not much use, but with what appears to be a hack I changed the code for the column to read dataField="CategoryData.CategoryDescription", and hooray it works. I didnt realise at the time that this was wrong, and when I dropped in an itemEditor things went wrong. When the datagrids load they display the correct data, but then when you try to edit any of the child property fields you get the following error:
ReferenceError: Error #1069: Property CategoryData.CategoryDescription not found on valueObjects.Category_type and there is no default value.
I have looked up the error and I realise that it means that there is no value for CategoryData.CategoryDescription, but if I can display it why can i not edit it! What do I have to do to make this work?
Anyway, here is the code, it shows the default bound datagrid, a second datagrid with the hack applied, and a third hacked datagrid with an itemRenderer and itemEditor on the number columns
Can you please take a look and tell me what I did wrong, well more to the point, if there is a doc that explains how to deal with XML like this then please point me at it.
I did try changing the return type for ANY of the columns, but this fails, I also tried a labelFunction, but again I can get the [object CategoryData_type] to display, but I get the null reference exception as the datagrid loads if I try to get to the child props.
Here is the Flex code:
<?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"
      xmlns:categories="services.categories.*"
      minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
    getDataResult.token = categories.getData();
   protected function lftest(item:Object, column:GridColumn):String
    var t:String = item.CategoryData;
    return t;
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<categories:Categories id="categories"
          fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
          showBusyCursor="true"/>

</fx:Declarations>
<s:DataGrid id="dataGrid" x="10" y="10" width="684"
    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
    requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid2" x="10" y="147" width="684" editable="true" requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryDescription" headerText="Desc"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryHeader" headerText="Head"></s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Num"></s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid3" x="10" y="284" width="684" editable="true" requestedRowCount="4">
<s:columns>
   <s:ArrayList>
    <s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
    <s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
    <s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
    <s:GridColumn headerText="Number">
     <s:itemRenderer>
      <fx:Component>
       <s:GridItemRenderer>
        <s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
       </s:GridItemRenderer>
      </fx:Component>
     </s:itemRenderer>
    </s:GridColumn>
    <s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Number">
     <s:itemEditor>
      <fx:Component>
       <s:GridItemEditor>
        <s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
       </s:GridItemEditor>
      </fx:Component>
     </s:itemEditor>
    </s:GridColumn>
   </s:ArrayList>
</s:columns>
<s:typicalItem>
   <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
        CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
</s:Application>
All and any advice welcome.
Shaine

One last try, I now know for sure that the data in the file is loading, I created a labelFunction on the CategoryDescription column that looks like this:
protected function dispData(item:Object, column:GridColumn):String
    var t:Object = item.CategoryData;
    var s:String = item.CategoryData.CategoryDescription;
    return s;
Because it returns s, which I now know is undefined (which is the problem!) I managed to get a debug output. As you can see the value of t is the categorydata, and it appears to have the 3 values I need to get access to, but I have no idea how to do this. I also changed the function to read:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = t.CategoryDescription;
return s;
But this undefines t and s! Very confused
this test2 (@d2e10a1)
item valueObjects.Category_type (@91f8a51)
[inherited]
column spark.components.gridClasses.GridColumn (@d61b239)
t valueObjects.CategoryData_type (@91f8c11)
[inherited]
_cacheInitialized_isValid false
CategoryDescription "This is the description of category 1"
CategoryHeader "My Category Title 1"
CategoryNumber "1"
_changedObjects mx.collections.ArrayCollection (@d5d9e41)
_changeWatcherArray [] (@cfab061)
_dminternal_model _CategoryData_typeEntityMetadata (@d4286a1)
_doValidationCacheOfCategoryDescription null
_doValidationCacheOfCategoryHeader null
_doValidationCacheOfCategoryNumber null
_doValidationLastValOfCategoryDescription null
_doValidationLastValOfCategoryHeader null
_doValidationLastValOfCategoryNumber null
_internal_CategoryDescription "This is the description of category 1"
_internal_CategoryHeader "My Category Title 1"
_internal_CategoryNumber "1"
_invalidConstraints [] (@ca50fd9)
invalidConstraints_der <setter>
_isValid false
isValid_der <setter>
managingService <setter>
_managingService null
_model _CategoryData_typeEntityMetadata (@d4286a1)
_validationFailureMessages [] (@cfab0b1)
s undefined
As always all help welcome.
Shaine
Message was edited after a oops moment by: ProcessEndNow

Flex datagrid with complex data item - drag doesnt start sometimes

Hi,
my project has a datagrid which is rendering complex data item. I need to drag one row from the grid and drop it into the same grid but in a different position.
I have enabled drag, drop and dragMove.I am able to drag and drop the rows. The problem is that sometimes the drag doesnt start.
Here are a few scenarios where drag doesnt start
the first column is not editable. if I start my drag by doing a mouse down on the frist cell of the row, it usually drags an empty row but sometimes it drags the whole row.
if I have dragged and droped a row in position i(say). Then sometimes the row at position i-1 or i+1 doesnt get dragged no matter how many times i try to do mouse down and drag. However, if I drag some other row (not necessarily drop it elsewhere) and then try this row, it works.
any pointers would be helpful.
thanks in advance

Update on item 4a -
This was a major issue (the main reason for opening this thread really) and I managed to resolve it!
As part of my application, I override the default DataGrid behavior for column selection (headerRelease event).
Instead of sorting, I change the column's header looks and define it as Selected (for showing its dynamic properties and enable its deletion).
At first I did this by setting styles, but the look didn't refresh unless I created a new instance of the header renderer.
Later I changed thi behavior to work with states, but I left the new header renderer instance creation commands and those lines created all the mess!
Conclusion -
If you define a custom header renderer for your datagrid column and then a custom item renderer, don't create a new instance of your header renderer!
It would still be nice to get some response for the other issues I raised.
Thanks and have a nice week.

ItemRenderer in a datagrid column setStyle() does not do anything to the appearance

I have a custom ItemRenderer in a datagrid column, however
the setStyle() does not do anything to the appearance. when it is
called. Any ideas?
<mx:DataGridColumn dataField="area" width="50"
headerText="Area">
<mx:itemRenderer>
<mx:Component>
<mx:Text>
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
setStyle("Color",0xff0000);
if(data.area == 'G'){
setStyle("backgroundColor",0xff0000);
}else{
setStyle("backgroundColor",0xff0000);
]]>
</mx:Script>
</mx:Text>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Your renderer code looks a little strange. This works, and
may get you started:

Changing dataGrid column width with actionScript

Having a strange change when trying to change any dataGrid column width with this code:
dataGrid.columns[ 5 ].width = 200;
It do changes the width of column number 6 to 200, but strangely it's also changes the width of the preceding columns (0-4). Every preceding column automatically increases a little bit than its' existing width without having me any idea.
Any idea anyone have!
Thanks..!
SK

Hi,
See if this thread helps:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1237299
Cheree

Setting datagrid column width according to itemrenderer.

Hi all,
This is my first question ever in any forum i have visited, so if you find anything stupid about my way of asking question then Pls ignore.
I have taken a datagrid and for one of the datagrid column I have an itemrendere which is an HBOX. THe Hbox contains 3 buttons Edit, Update, cancel. At first only Edit button is visible and on click of it, It is removed from the Hbox and 2 other buttons i.e. Update and Cancel are added in the Hbox. what i want is when i add these 2 buttons the size of the datagrid column should get adjusted accordingly.
I have serached a lot abt this but couldnt find a solution. Please help.
Happy new year to all.....

@Pramod :
(listdata.owner as datagrid) .validateNow();
// thats wat i did. but not working.
@John : TypicalItem may work but I am using Flex Builder 3 and i think it does not provide the typicalItem class in it.

DataGrid binding with comumns of column ItemSource

<DataGrid Grid.Column="1" Name="grid2" DataContext="{Binding SelectedPage}"
ItemsSource="{Binding Params}"
AutoGenerateColumns="False" Grid.RowSpan="2">
<DataGrid.Columns>
<DataGridComboBoxColumn ItemsSource="{Binding Source={StaticResource xKeySource}}"
DisplayMemberPath="Name"
SelectedValuePath="Name"
SelectedValueBinding="{Binding Name}"/>
<DataGridTextColumn Header="ParamName" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Address" Binding="{Binding Address}"/>
<DataGridTextColumn Header="Format" Binding="{Binding Format}"/>
<DataGridTextColumn Header="Description" Binding="{Binding Description}"/>
</DataGrid.Columns>
</DataGrid>
Is it possible when I select from my ComboBoxColumn, compile automatically other columns in my DataGrid ?
The name of fileds in ItemSource are the same of name of another binding columns (are two different list but the property name is equal).
thanks

I don't follow what you mean
compile automatically other columns in my DataGrid
If you mean change the content of other fields in the same row then yes.
If there is a viewmodel per row you could act in the setter of the property of that which the combo is bound to. Set those properties in the viewmodel and if it implements inotifypropertychanged then they would change in the view.
In your markup
<DataGridComboBoxColumn ItemsSource="{Binding Source={StaticResource xKeySource}}"
DisplayMemberPath="Name"
SelectedValuePath="Name"
SelectedValueBinding="{Binding Name}"/>
<DataGridTextColumn Header="ParamName" Binding="{Binding Name}"/>
These are both bound to the same property though.
You combo is in the datacontext the row is in.
That Name property is the same as the Name property the other column would be in.
Select combo > Name
Enter in ParamName > Name
Both the same property.
Making it a property of something else would be very strange - which row is pointing at what.
Hope that helps.
Technet articles: Uneventful MVVM;
All my Technet Articles

Adding a Tree into a datagrid column

I have a requirement where I have to create a datagrid with
one of the columns having a tree control. The problem I am trying
to resolve is how to dynamically change the height of the datagrid
column which has the tree when the tree is collapsed and
dynamically increase the datagrid column height when the tree is
expanded.
Is is feasible ? Am I chasing a wild dream ?
Any help will be greatly appreciated...
Thanks

Darin,
Thank you for responding. I was able to get a tree display in
a datagrid. I am going to attach all the code.
The problem I am facing is, I need two clicks to expand a
tree in the datagrid column so that both the tree to expand and the
datagrid column to adjust its height. Let me know why this is so.
May be, being a newbie, I am completely off the track here. Thanks
in advance.
THE MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="com.ram.flash.custom.*">
<mx:XML id="xmlData" source="myDataWithTree.xml"/>
<mx:HBox>
<mx:DataGrid id="dgSource"
dataProvider="{xmlData.person}" editable="false"
variableRowHeight="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn editable="false" sortable="false"
resizable="true" width="400" textAlign="left" headerText="Id"
dataField="address">
<mx:itemRenderer>
<mx:Component>
<ns1:PruDataGridTreeColumn
disclosureOpenIcon="@Embed(source='icn_minus.jpg')"
disclosureClosedIcon="@Embed(source='icn_plus.jpg')" width="260"
height="20" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"
editable="false"/>
<mx:DataGridColumn headerText="Age" dataField="age"
editable="false"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
THE DATA
<?xml version="1.0" encoding="UTF-8" ?>
<data>
<person>
<name>Mister</name>
<age>36</age>
<address>
<Capitals label="U.S. State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person><person>
<name>Missus</name>
<age>28</age>
<address>
<Capitals label="Indian State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person>
</data>
THE CUSTOM ACTIONSCRIPT CLASS
package com.ram.flash.custom
import flash.geom.Rectangle;
import mx.core.IDataRenderer;
import mx.controls.listClasses.IListItemRenderer;
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import mx.managers.ISystemManager;
import mx.controls.Tree;
import flash.display.Sprite;
import flash.display.DisplayObject;
import mx.events.FlexEvent;
import mx.collections.XMLListCollection;
import flash.events.MouseEvent;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import mx.core.ClassFactory;
import mx.events.ScrollEvent;
import mx.controls.DataGrid;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
public class PruDataGridTreeColumn extends Tree implements
IListItemRenderer, IDataRenderer
private var _data : Object = null;
private var _dataGrid:DataGrid = null;
[Bindable("dataChange")]
public override function get data():Object
return _data;
public function set myDataGrid(value:DataGrid):void
_dataGrid = value;
public function PruDataGridTreeColumn()
super();
public override function set data(value:Object):void
this._data = value;
this.invalidateProperties();
var xmlDATA:XMLList = new XMLList(_data);
this.labelField='@label';
this.dataProvider = xmlDATA.address.Capitals;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
override public function expandItem(item:Object,
open:Boolean, animate:Boolean=false, dispatchEvent:Boolean=false,
cause:Event=null):void
animate = true;
super.expandItem(item,open,animate,dispatchEvent,cause);
var lc:XML = new XML(item);
var ht:Number = 20;
var wt:Number = this.width;
if(open)
ht = (lc.children().length() * 20 + 40);
this.height = (lc.children().length() * 20 + 40);
else
ht = 20;
this.height = 20;
}

Cancel edition in a Datagrid Column

What i´m wishing to do is very simple, i just want to cancel an edition in a DataGrid column,
Loosing focus of the textbox confirms the edition, i wanted to place 2 buttons above the edition text box, cancel and confirm, but it seems to be impossible...
any idea?
thanks in advance!!

Yea that seems to work fine for me so in full, with editing features
Custom Comp
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="182" height="72" >
<mx:Script>
<![CDATA[
private function handleOk():void {
this.data.someText = textInput.text
override public function set data(value:Object):void {
super.data = value;
textInput.text = data.someText
private function cancel():void {
textInput.text = data.someText;
]]>
</mx:Script>
<mx:TextInput id="textInput" x="10" y="10" />
<mx:Button x="10" y="40" label="Update" click="handleOk()"/>
<mx:Button x="85" y="40" label="Cancel" click="cancel()"/>
</mx:Canvas>
Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{someText : 'Line 1'},
{someText : 'Line 2'},
{someText : 'Line 3'},
{someText : 'Line 4'},
{someText : 'Line 5'},
{someText : 'Line 6'},
{someText : 'Line 7'},
{someText : 'Line 8'},
{someText : 'Line 9'},
{someText : 'Line 10'}
]]>
</mx:Script>
<mx:DataGrid x="71" y="90" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="someText" itemRenderer="Comp1" width="182"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Hope this helps
Andrew

Access datagrid column from another column

Hello
Basically, I have 2 columns in a DataGrid, both with CheckBox itemRenderers.
When I check the first checkbox, I want the second to be enabled = false. I'm stuck.
Thanks!

This answers your question:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import mx.events.ListEvent;
      import mx.collections.ArrayCollection;
      [Bindable] private var ac:ArrayCollection = new ArrayCollection([
        {oneSelected: false, twoSelected: false, twoEnabled: true},
        {oneSelected: false, twoSelected: false, twoEnabled: true},
        {oneSelected: false, twoSelected: false, twoEnabled: true},
        {oneSelected: false, twoSelected: false, twoEnabled: true}
      public function changeEnabled(evt:ListEvent):void{
        var origData:Object = ac.getItemAt(evt.rowIndex);
        origData.twoEnabled = origData.twoEnabled == false?true:false;
        ac.setItemAt(origData, evt.rowIndex);
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}" itemClick="changeEnabled(event)">
    <mx:columns>
      <mx:DataGridColumn dataField="oneSelected">
        <mx:itemRenderer>
          <mx:Component>
            <mx:CheckBox selectedField="oneSelected"
              change="onChange(event);" label="">
              <mx:Script>
                <![CDATA[
                  private function onChange(evt:Event):void {
                    data.oneSelected = !data.oneSelected;
                ]]>
              </mx:Script>
            </mx:CheckBox>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn dataField="twoSelected">
        <mx:itemRenderer>
          <mx:Component>
            <mx:CheckBox selectedField="twoSelected"
              change="onChange(event);" label="" enabled="{data.twoEnabled}">
              <mx:Script>
                <![CDATA[
                  private function onChange(evt:Event):void {
                    data.twoSelected = !data.twoSelected;
                ]]>
              </mx:Script>
            </mx:CheckBox>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
</mx:Application>
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

How to bind each DataGrid column separately?

Good day fellow Flex developers!
Could you please help me out. I am trying to figure out how to bind each DataGrid column separately. I need to bind each column to a separate bindable array variable. Is there a dataProvider property for each DataGridColumn???
Thanks in advance,
Eugene

hopefully nope
just imagine code complexity for that feature?
how would you think should behave DataGrid when you'll populate your separate arrays with variable items number each?
all you are able and should do is to build composite dataProvider source, join all your separate arrays into it, this is your responsibility.
If you feel this message answers your question or helps, please mark it respectively

Direction Needed: Storing calculated values from datagrid column in order to call values into graph

Hi all,
I am new to Flex/Flash Builder, actionscript, and mxml, so please be kind.
I have developed a small program that has a component that displays a datagrid fed with information out of a mysql db via a php data services connection. Within that same component (page), I have a graph that charts the dates via a plot chart. I am interested in adding a line series to the graph, but the data I want to use is a calculated field in the datagrid which I used a custom lable function to derive and display. Can someone steer me to the correct method to store such values and how to call them into a chart?
Some addition information
Custom label function:
/* Custom label function for the Delta1 column. Calculates the number of days between the planting date and 10% flower. */
                              private function calculateTo1stFlower(item:Object, column:GridColumn):String {
                                        var tempDate1:Date = new Date(item.dflower10 - item.dplanting);
                                        return Math.round((tempDate1.time / MS_PER_DAY) + 1).toString();
/* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
                              private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
Within my spark datagrid
<s:GridColumn width="30" headerText="Δ1" labelFunction="calculateTo1stFlower" ></s:GridColumn>
I assume I need to store the array of values for this column and then chart the saved values as the xField within the LineSeries. Should I use a class based model?
The following link seemed like it may be an appropriate path; I am not sure though.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b51.html
Thanks in advance for any support,
Matthew

Thanks for trying to post DDL, but you have no idea how to do a data model. You do not know that tables have to have keys, what ISO-11179 is, etc.
You have a table that is supposed to model companies. Your singular names says that there is only one company! There is no company identifier (the industry standard is the DUNS). A customer is not a company. We do not use numeric data types for identifiers;
do you do math on them? NO! The attribute property comes after the attribute name (you never heard of ISO-11179).
Think about how silly VARCHAR(1) is.
CREATE TABLE Companies
(company_duns CHAR(9) NOT NULL PRIMARY KEY,
company_name VARCHAR(30)NOIT NULL,
margin_oil INTEGER NOT NULL,
margin_hangar INTEGER NOT NULL,
margin_cleaning INTEGER NOT NULL);
INSERT INTO Companies
VALUES (1, 'AviatKorea', 100, 125, 200),
(2, 'AXHollande', 50, 40, 30),
(3, 'BFXNorway', 60, 80, 600),
(4, 'EEEFrance', 10, 25, 60);
CREATE TABLE Company_Tariffs
(company_duns INTEGER NOT NULL
REFERENCES Companies(company_duns),
tariff_type CHAR(1) NOT NULL
CHECK (tariff_type IN ('A','B','C','D'),
PRIMARY KEY (company_duns, tariff_type));
INSERT INTO Company_Tariffs values (1, 'A'), (2, 'C'), (2, 'D'), (3, 'A'), (4, 'A'), (4, 'C'), (4, 'D')
SELECT * -- do not use * in production code
FROM Companies AS C,
Company_Tariffs AS T
WHERE C.company_duns = T.company_duns;
>> I would like something like with a computed column [ ] that retrieves the different contracts used: <<
You might but a SQL programmer would not. This violated First Normal Form. It is a display report and is done in the presentation layers.
--CELKO-- Books in Celko Series for Morgan-Kaufmann Publishing: Analytics and OLAP in SQL / Data and Databases: Concepts in Practice Data / Measurements and Standards in SQL SQL for Smarties / SQL Programming Style / SQL Puzzles and Answers / Thinking
in Sets / Trees and Hierarchies in SQL

Need help adding image to datagrid column

Hi,
Can anyone tell me how to add an image to a datagrid column?
I have created a flex library project which contains a mxml component with a datagrid, an item renderer mxml component which rendered the image within the datagrid column depending on the value coming back from the database for that column and a folder 'assets' which hold all the images. When I add the library to my main project and call the mxml component with the datagrid an image place holder is visible in the datagrid column but not the image. However, if I take the image out of the library project and added to an 'assets' folder in the main project the image is displayed in the datagrid column.
It looks like, even though the images are in the flex library project and only the flex library project is trying to display the images in the datagrid, the library project is looking in the main application project folder for the image.
Does anyone know why this is happening and how to fix it?
Thanks in advance for an help,
Xander.

I have tried embedding the images in my library but it still didn't work. Also I can't embed the image as I'm using the value of the column to complete the image name, for example in my mxml item renderer component I have the added the following code
<mx:Image source="@Embed(source='assets/' + data.mycolumnvalue + '.png')" tooltip="{data.mycolumnvalue}"/>
but nothing is displayed.

Datagrid Column with complex itemRenderer / itemEditor

Similar Messages

Maybe you are looking for