DataGrid mxml question.

When I declare a datagrid in mxml, clearly I can also declare
the columns.
I'm working on created my own custom grid class that inherits
from DataGrid but, when I try to declare it in mxml I can no longer
use mxml to define the grid columns.
I dug through DataGrid.as looking for some sort of meta data
that described what was allowed in mxml or something but couldn't
find anything.
Anyone else tried to do this before?
Regards,

"ctzn99" <[email protected]> wrote in
message
news:gfkll2$m4l$[email protected]..
> When I declare a datagrid in mxml, clearly I can also
declare the columns.
>
> I'm working on created my own custom grid class that
inherits from
> DataGrid
> but, when I try to declare it in mxml I can no longer
use mxml to define
> the
> grid columns.
>
> I dug through DataGrid.as looking for some sort of meta
data that
> described
> what was allowed in mxml or something but couldn't find
anything.
>
> Anyone else tried to do this before?
<yourNameSpace:columns>

</yourNameSpace:columns>
You can see that in action here:
http://flexdiary.blogspot.com/2008/09/extended-datagrid-with-stylefunction.html

Similar Messages

Extending MXML questions(trying to repeat fx:Script behaviour)

Hi! I am looking for a way to create MXML component/tag that will behave exactly like Script/Style tags. Flash Builder should know that this tag may contain text and autocomplete it with CDATA section and compiler should know that source property is for file only and allow me to put URL directly without @Embed('here is url') thing. How I can achieve this? And is this possible to use component under namespace like URL instead of using package to identify group of components?

hi
re component namespaces, this can be set in design.xml file (googling should bring up a few tutorials)

How to fix a DataGrid headercolumn's headerText causing sizing problems

Hello,
I have a datagrid with filter textboxes underneath the header columns.
My problem is that some of the headerText is rather large (in 2 of my columns), and causes it to wrap and stretch the header's height, which ultimately causes the columns to match up strangely and not in uniform.
Here is a screenshot of the problem:
http://img685.imageshack.us/img685/2283/gridcolumnsizeproblem.png
How can I make all column headings uniform in size, with my filtering text boxes? I do not see a height property. I have tried to add extra spaces in the smaller column headings but that does nothing as I think FLEX parses that out. Can I specifically size these so they match the longer ones?
Keep in mind, this DataGrid uses a custom renderer.
Here is my grid definition/MXML:
            <dataGridFilters:FilterDatagrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{deviceDataColl}" click="dg_clickHandler(event)" >
                <dataGridFilters:columns>
                    <dataGridFilters:DataGridFilterColumn dataField="name" headerText="Name" width="150"/>
                    
                    <dataGridFilters:DataGridFilterColumn dataField="tHeat"   headerText="Heat Point" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tCool" headerText="Cool Point" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tIndoor" headerText="Indoor Temp" width="80" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tOutdoor" headerText="Outdoor Temp" width="90" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="insideHumidity" headerText="Indoor Humidity" width="100" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentFState" headerText="Fan State" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentFMode" headerText="Fan Mode" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentTState" headerText="State" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentTMode" headerText="Mode" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTDate" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Date" width="100" textAlign="right"/>
                    
                    <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTTemp" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Temp" width="100" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="groupOne" headerText="Group 1" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="groupTwo" headerText="Group 2" width="75" textAlign="right"/>
                </dataGridFilters:columns>
            </dataGridFilters:FilterDatagrid>
Any help is greatly appreciated!
Thank you,
Devtron

Rootsounds,
Here is my headerRenderer class:
package filters.header
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class DataGridFilterHeader extends DataGridHeader
        public function DataGridFilterHeader()
            super();
         *re-position the sort icon
        override protected function placeSortArrow():void
            super.placeSortArrow();
            if(sortArrow)
                var hh:Number = cachedHeaderHeight;
                sortArrow.y = (hh - sortArrow.measuredHeight - 8) > 0 ? 10: 0;
                if(sortArrow.visible)
                    var n:int = headerItems.length;
                    for (var i:int = 0; i < n; i++)
                        if(visibleColumns[i].colNum == dataGrid.sortIndex)
                            headerItems[i].setActualSize(visibleColumns[i].width - sortArrow.measuredWidth + 5, headerItems[i].height);
Here is my dataGrid extender:
package filters
    import filters.header.DataGridFilterHeader;
    import flash.events.Event;
    import mx.collections.ICollectionView;
    import mx.controls.DataGrid;
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class FilterDatagrid extends DataGrid
        public function FilterDatagrid()
            super();
            headerClass = DataGridFilterHeader;
            addEventListener("filterEvent",onFilterChange);
        override public function set dataProvider(value:Object):void
            if(dataProvider)
                resetFiltres();
            super.dataProvider = value;
            resetFiltres(filterFunction);
        private function onFilterChange(event:Event):void
            if(dataProvider)
                (dataProvider as ICollectionView).refresh();
            selectedIndex = 0;
        private function resetFiltres(inFilterFunction:Function = null):void
            if(dataProvider)
                (dataProvider as ICollectionView).filterFunction = inFilterFunction;
                (dataProvider as ICollectionView).refresh();
            if(inFilterFunction == null)
                var iLen:int= columnCount;
                for(var i:int=0;i<iLen;i++)
                    var dgc:DataGridColumn = columns[i] as DataGridColumn;
                    if(dgc is DataGridFilterColumn)
                        DataGridFilterColumn(dgc).filterText = "";
            selectedIndex = 0;
        private function filterFunction(inObject:Object):Boolean
            var iLen:int= columnCount;
            for(var i:int=0;i<iLen;i++)
                var dgc:DataGridColumn = columns[i] as DataGridColumn;
                var dField:String = dgc.dataField;
                if(dgc is DataGridFilterColumn == false)
                    continue;
                var srchStr:String = DataGridFilterColumn(dgc).filterText;
                if(srchStr == "")
                    continue;
                var dataStr:String = dgc.itemToLabel(inObject);
                var regex:RegExp = new RegExp("^"+srchStr, "i");
                // if search string exists and
                // does not match the data in the row
                if(regex.exec(dataStr)==null)
                    return false;
            return true;
If all this wrapper class stuff "Extends" the DataGrid, why wouldnt "headerHeight" be available as an attribute in my MXML/grid? When I try to set it explicitly in my dataGrid MXML, the compiler says "Cannot resolve attribute 'headerHeight'". I guess this doesnt really "extend" it? Im confused.

Edit mode not showing up in DataGrid

I have the following DataGrid. The problem is that the ItemRenderer show corretly but ItemEditor does not. (below I've copied code for my DataGrid MXML, my ItemRenderer component (TimeRenderer) and ItemRenderer component (TimeEditor)
DataGrid
<mx:DataGrid id="grdSiteHours" dataProvider="{model.ModelLocator.getInstance().storeHours}" width="
100%" height="90%" editable="true">
<mx:columns>
<mx:DataGridColumn id="clmDay" headerText="Day"dataField="
day" editable="false" />
<mx:DataGridColumn id="clmOpenTime" headerText="Open Time"dataField="
openTime" editable="true"itemRenderer="
components.TimeRenderer" itemEditor="
components.TimeEditor" editorDataField="time"width="
200" />
<mx:DataGridColumn id="clmCloseTime" headerText="Close Time"dataField="
closeTime" editable="true"itemRenderer="
components.TimeRenderer" itemEditor="
components.TimeEditor" editorDataField="time"width="
200" />
</mx:columns>
</mx:DataGrid>
ItemRenderer
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30">
<mx:Script>
<![CDATA[
import view.valueobjects.TimeData;
Bindable]
protected var _data:Object;
Bindable]
protected var time:TimeData;
override public function get data():Object{
return this._data;}
override public function set data(value:Object):void{
super.data = value;
this.time = value.openTime as TimeData;}
]]>
</mx:Script>
<mx:Label id="lblTimeDisplay" text='
{this.time.hour.toString() + ":" +
this.time.min.toString() + " " +(
this.time.am == true ? "AM" : "PM")}' />
</mx:HBox>
Item Editor
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" height="30">
<mx:Script>
<![CDATA[
import view.valueobjects.TimeData;
Bindable]
protected var _data:Object;
Bindable]
public var time:TimeData;
override public function get data():Object{
return this._data;}
override public function set data(value:Object):void{
if(value != null){
super.data = value;
this.time = value.openTime as TimeData;}
protected function updateTime():void{
this.time.hour = Number(this.cmbOpenTimeHourSelector.selectedItem);
this.time.min = Number(this.cmbOpenTimeMinSelector.selectedItem);
this.time.am = this.radgrpOpenTimeAMPM.selectedValue == "AM" ? true : false;}
]]>
</mx:Script>
<mx:ComboBox id="cmbOpenTimeHourSelector" change="updateTime()"editable="
false">
<mx:ArrayCollection>
<mx:String>01</mx:String>
<mx:String>02</mx:String>
<mx:String>03</mx:String>
<mx:String>04</mx:String>
<mx:String>05</mx:String>
<mx:String>06</mx:String>
<mx:String>07</mx:String>
<mx:String>08</mx:String>
<mx:String>09</mx:String>
<mx:String>10</mx:String>
<mx:String>11</mx:String>
<mx:String>12</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:ComboBox id="cmbOpenTimeMinSelector" change="updateTime()"editable="
false">
<mx:ArrayCollection>
<mx:String>00</mx:String>
<mx:String>15</mx:String>
<mx:String>30</mx:String>
<mx:String>45</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:RadioButtonGroup id="radgrpOpenTimeAMPM" change="updateTime()" />
<mx:RadioButton id="radOpenTimeAM" groupName="radgrpOpenTimeAMPM"label="
AM" value="AM" />
<mx:RadioButton id="radOpenTimePM" groupName="radgrpOpenTimeAMPM"label="
PM" value="PM" /></mx:HBox>

Doesn't work even after implementing the interface.
The annoying thing is that when I hover mouse over other grid columns, it shows highlights on the rows but doesn't eeven highlight any row when I hover mouse through the custom-rendered column.
I previously used ItemEditor in a DataGridColumn which had just a ComboBox in one of my previous projects and it worked just fine. Am I missing something over here?

Export Release Build for datagrid [xml file doesnt show?]

SRC folder
          assets
                    icons
          db.xml (located within assets folder)
datagrid.mxml
default.css
I am able to load the database and it populates my "db.xml" with no issues, however when I export release build and run the app - the database displays but with no information? I noticed that the my "db.xml" was not exported as well.
It is set up correctly? or do I need to just drop my icons, db.xml within src folder and not seperate them?
thanks

When you export a release build, it takes all your MXML And ActionSCript files and turns them into a SWF without the extra debugging code. If you are not embedding the XML in the swf, then this is expected behavior.
In your project properties, under Flex Compiler you can try checking the "copy non-embedded files to output folder"; but I believe this is only for debugging purposes and not for exporting a release build.

Displaying image from Database with php

Hello everybody,
I'm working on a website that displays videos courses and tutorials as my final project
and I'm working with "Flash builder 4" the database with mySQL and the application server with php
Basically, the goal is to display a datagrid that shows the manager of the website in column all the information stored on the "Course" table
the structure of the table is :
Course (id,img,src,title,description)
-id : primary key
-img : path to a photo of course {for example picture of JAVA}
-src : path to the playlist file {xml file}
-title : String
-description : String too
I already succeeded to display all these contents on a DataGrid, but not with the image, I couldn't display an imageon its column using the path stored on the database, I used a DataRenderer to do that, and here is my code for Renderer and the DataGrid.mxml
CourseGrid.mxml
<?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" xmlns:courseservice="services.courseservice.*">
<fx:Script>
<![CDATA[
import Renderers.CourseDeleteRenderer;
import Renderers.CourseImageRenderer;
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
getAllCourseResult.token = courseService.getAllCourse();
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getAllCourseResult"/>
<courseservice:CourseService id="courseService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

</fx:Declarations>
<mx:DataGrid x="10" y="10" id="dataGrid"
creationComplete="dataGrid_creationCompleteHandler(event)"
dataProvider="{getAllCourseResult.lastResult}"
width="100%">
<mx:columns>
<mx:DataGridColumn headerText="" dataField="img" sortable="false" itemRenderer="Renderers.CourseImageRenderer"/>
<mx:DataGridColumn headerText="id" dataField="id"/>
<mx:DataGridColumn headerText="src" dataField="src"/>
<mx:DataGridColumn headerText="title" dataField="title"/>
<mx:DataGridColumn headerText="description" dataField="description"/>
<mx:DataGridColumn headerText="Delete" itemRenderer="Renderers.CourseDeleteRenderer"/>
<mx:DataGridColumn headerText="Update" itemRenderer="Renderers.CourseUpdateRenderer"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
CourseImageRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:Image source="{data}" width="60" height="60"/>
</s:MXDataGridItemRenderer>
Result :
Problem :
How can I access to the path of the image, I tried to write "data.img" instead of "data" as img is the name of the column in the database that stores the path but it wasn't successful.
I know that it not complete statement "data" because "data" is a reference to what the DataGrid provides of information that gets from the (CreationComplete) event.
Question :
- Can you please help me with this so I can complete displaying images by accessing to what is on the column in tha DB so I can manipulate my datas that is stored there ?
==> I still have some questions about the buttons to update and delete datas fomr the DataGrid, but, until now I need to access successfully to the photo and display it
Thank you,

Anyone that can help me with this ?
Please, try this with me, I'm asking Flex developpers this might be easy for you !
It's just question of how to access the string stored in the variable "data", when I used XML I just type the path to the repeated element like this :
XML file :
XML File
<parent>
<child>
<repeated_child></repeated_child>
<repeated_child></repeated_child>
<repeated_child></repeated_child>
</child>
</parent>
I used a Model as a reference to the xml file
and an arrayList as a container of the repeated child
I just write in the code "data.parent.repeated_child" to access the text in the "repeated_child"
and here is the code, that I implemented to generate videos from xml file to display a video play list
Video Playlist code(extract from XML file "data.xml")
<fx:Declarations>
<fx:Model id="model" source="assets/data.xml"/>
<s:ArrayList id="products" source="{model.video}"/>
</fx:Declarations>
<mx:List dataProvider="{products}" labelField="title"
change="list1_changeHandler(event,List(event.currentTarget).selectedItem)" x="103" y="77" height="350" width="198"/>
That was my goal to do that with the database.
Please help me
If you have other solution I still need it.
Thank you,

Can not get data from actionscript db operation class?

DBOperation.as:
import flash.events.*;
import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;
import mx.collections.ArrayCollection;
import mx.controls.List;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
public class DBOperation
private var nc:NetConnection;
private var responder:Responder;
public var list:ArrayCollection;
public function DBOperation():void{
nc = new NetConnection();
nc.objectEncoding = ObjectEncoding.AMF0;
nc.connect("rtmp://localhost/ins");
public function getSolutionData(sql:String):Boolean
responder=new Responder(getSolutionList,null);
nc.call
("dbo.getSolutionData",responder,sql);
return true;
public function getSolutionList
(solution:Object):void{
var solutionList:Array = new Array();
for(var items:String in solution)
solutionList.push
({label:items,title:solution[items].title,owner:solution
[items].owner,submitTime:solution[items].submitTime,image:solution
[items].image,imgInstruction:solution[items].imgInstruction});
list = new ArrayCollection(solutionList);
datagrid.mxml:
<mx:Script>
<![CDATA[
import DBOperation;
import mx.collections.ArrayCollection;
[Bindable]
private var solutionList:ArrayCollection;
private function initDG():void{
var dbo:DBOperation=new
DBOperation();
dbo.getSolutionData("some sql
strings");
solutionList=dbo.list;
]]>
</mx:Script>
my problem is I can get the data using DBOperation class,but
I can not
assign it to solutionList by "solutionList=dbo.list;"
The debug information says dbo.list=null, however inside
DBOperation
the "list" is full of data.
What's wrong with it??
Thanks!

hi,
if u r using bukrs and hkont as parameters in selection screen then
SELECT * FROM bsis INTO CORRESPONDING FIELDS OF TABLE it_temp
WHERE bukrs = p_bukrs
AND hkont = p_hkont.
this will work.
if u r using then as select-option then the above does n't work.
bcoz select-options work as internal table bcoz of that u have use the query like this
SELECT * FROM bsis INTO CORRESPONDING FIELDS OF TABLE it_temp
WHERE bukrs IN p_bukrs
AND hkont IN p_hkont.
<REMOVED BY MODERATOR - REQUEST OR OFFER POINTS ARE FORBIDDEN>
Edited by: Alvaro Tejada Galindo on Aug 15, 2008 5:25 PM

ItemEditor error

I am getting the itemEditor to work mostly now.
problem i am having is, after i switch the datagrid to become editable and then click into a given field (ie: itemEditor as a numeric stepper), if i just click in and out of the field, but do not make any changes to it, the data in the field either becomes "NaN" (in the case of a numeric stepper editor) or just blank (in the case of a combo box editor)
Here is my code:
DataGrid.mxml
<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
width="100%" height="100%">
<mx:Script>
<![CDATA[
import com.*;
import flash.events.Event;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
import flash.net.URLRequest;
import mx.controls.NumericStepper;
import mx.controls.DateChooser;
import mx.controls.CheckBox;
import mx.controls.ComboBox;
public static const CREATION_COMPLETE: String = "myCreationComplete";
public static const LOAD_SETTINGS: String = "load settings";
private function dateFormat(item:Object, column:DataGridColumn):String
return df.format(item.date);
public function onLinkBtnClick(request:URLRequest):void
//trace("urlRequest: "+request)
try {
    navigateToURL(request);
}catch (e:Error) {
    // UNFORTUNATELY, THE ERROR IS THRU INTERNET EXPLORER AND IS NOT CAUGHT HERE
    trace("error: " + e)
    Alert.show("There was an error in opening the requested file!")
}]]>
</mx:Script>
<mx:DateFormatter id="df" formatString="MM/DD/YY"/>
<mx:VBox width="100%" height="100%" verticalGap="0" >
<mx:HBox id="cbHBox" width="100%" height="0" fontWeight="bold" horizontalAlign="right" visible="false" >
<mx:CheckBox id="selectAllCB" label="Select All / None" labelPlacement="left" fontWeight="bold" color="0xFFFFFF" />
<mx:Spacer width="{colSelected.width/2 + 2}" />
</mx:HBox>
<mx:DataGrid id="settingsDataGrid"
height="100%" width="100%"
editable="false"
horizontalScrollPolicy="off">
<mx:columns>
    <mx:DataGridColumn width="24" headerText="Number" dataField="number" resizable="false"/>
    <mx:DataGridColumn width="120" headerText="Title" dataField="title" />
    <mx:DataGridColumn width="20" headerText="Date" dataField="date" labelFunction="dateFormat" editorDataField="dfDate" itemEditor="com.view.itemRenderers.DGDateFieldEditor" resizable="false" />
    <mx:DataGridColumn width="12" headerText="Book" dataField="book" editorDataField="nsBook" itemEditor="com.view.itemRenderers.DGNumericStepperEditor" resizable="false" />
    <mx:DataGridColumn id="colType" width="14" headerText="Type" dataField="type" editorDataField="cbType" itemEditor="com.view.itemRenderers.DGTypeComboBoxEditor" resizable="false" />
    <mx:DataGridColumn width="10" textAlign="center" headerText="Link" sortable="false" draggable="false" resizable="false"
    dataField="link" itemRenderer="com.view.itemRenderers.DGLinkButtonEditor"
    rendererIsEditor="true" editable="false"/>
    
    <mx:DataGridColumn id="colSelected" width="46" textAlign="center" visible="false" sortable="false" draggable="false" resizable="false"
    headerText="Select" dataField="sel" itemRenderer="com.view.itemRenderers.DGCheckBoxEditor"
    rendererIsEditor="true" editorDataField="cbSelected"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>
DGNumericStepperEditor.mxml
<?xml version="1.0"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusM anagerComponent"
horizontalAlign="center" verticalAlign="middle">
    <mx:Script>
        <![CDATA[
         import mx.controls.listClasses.ListData;
   import mx.controls.dataGridClasses.DataGridListData;
   import mx.controls.listClasses.BaseListData;
   import mx.controls.dataGridClasses.DataGridItemRenderer
   import mx.events.FlexEvent;
   import mx.controls.Alert
   private var _listData:DataGridListData;
            // Define a property for returning the new value to the cell.
            public var nsBook:Number;
            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
    bookNS.setFocus();
   [Bindable]
   override public function set data(value:Object):void{
    super.data = value;
    bookNS.value = data[_listData.dataField];
   override public function get data():Object {
    return super.data;
      public function get listData():BaseListData
    return _listData;
   public function set listData(value:BaseListData):void
    _listData = DataGridListData(value);
        ]]>
    </mx:Script>
<mx:NumericStepper id="bookNS" horizontalCenter="center" maximum="18" width="100%"
        click="nsBook = bookNS.value" />
</mx:VBox>
PLEASE HELP, getting these itemRenderers and itemEditors to work properly is DRIVING ME CRAZY!!!

You've already sub-classed numeric stepper. Just override the setter for data to something like this:
override public function set data(value:Object)
    if(isNaN(value))
        super.data = 0;
    }else
        super.data = value;

Show ItemRenderer only when editing (onclick)

I have a datagrid, that after the user has logged in becomes editable.
I would like that when the user clicks into a given field, say a date or number field, an itemRenderer that corresponds to the type of date appear.
Example: if i click into the date field, i get a datechooser, or a numericStepper when i click into a number based field.
Then after I click out of that field, it just shows the value, no longer the itemRenderer.
FYI, I am using Pure MVC, so this logic is in a mediator '.as' class.
Please help.

I am getting the itemEditor to work mostly now.
problem i am having is, after i switch the datagrid to become editable and then click into a given field (ie: itemEditor as a numeric stepper), if i just click in and out of the field, but do not make any changes to it, the data in the field either becomes "NaN" (in the case of a numeric stepper editor) or just blank (in the case of a combo box editor)
Here is my code:
DataGrid.mxml
<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
width="100%" height="100%">
<mx:Script>
<![CDATA[
import com.*;
import flash.events.Event;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
import flash.net.URLRequest;
import mx.controls.NumericStepper;
import mx.controls.DateChooser;
import mx.controls.CheckBox;
import mx.controls.ComboBox;
public static const CREATION_COMPLETE: String = "myCreationComplete";
public static const LOAD_SETTINGS: String = "load settings";
private function dateFormat(item:Object, column:DataGridColumn):String
return df.format(item.date);
public function onLinkBtnClick(request:URLRequest):void
//trace("urlRequest: "+request)
try {
    navigateToURL(request);
}catch (e:Error) {
    // UNFORTUNATELY, THE ERROR IS THRU INTERNET EXPLORER AND IS NOT CAUGHT HERE
    trace("error: " + e)
    Alert.show("There was an error in opening the requested file!")
}]]>
</mx:Script>
<mx:DateFormatter id="df" formatString="MM/DD/YY"/>
<mx:VBox width="100%" height="100%" verticalGap="0" >
<mx:HBox id="cbHBox" width="100%" height="0" fontWeight="bold" horizontalAlign="right" visible="false" >
<mx:CheckBox id="selectAllCB" label="Select All / None" labelPlacement="left" fontWeight="bold" color="0xFFFFFF" />
<mx:Spacer width="{colSelected.width/2 + 2}" />
</mx:HBox>
<mx:DataGrid id="settingsDataGrid"
height="100%" width="100%"
editable="false"
horizontalScrollPolicy="off">
<mx:columns>
    <mx:DataGridColumn width="24" headerText="Number" dataField="number" resizable="false"/>
    <mx:DataGridColumn width="120" headerText="Title" dataField="title" />
    <mx:DataGridColumn width="20" headerText="Date" dataField="date" labelFunction="dateFormat" editorDataField="dfDate" itemEditor="com.view.itemRenderers.DGDateFieldEditor" resizable="false" />
    <mx:DataGridColumn width="12" headerText="Book" dataField="book" editorDataField="nsBook" itemEditor="com.view.itemRenderers.DGNumericStepperEditor" resizable="false" />
    <mx:DataGridColumn id="colType" width="14" headerText="Type" dataField="type" editorDataField="cbType" itemEditor="com.view.itemRenderers.DGTypeComboBoxEditor" resizable="false" />
    <mx:DataGridColumn width="10" textAlign="center" headerText="Link" sortable="false" draggable="false" resizable="false"
    dataField="link" itemRenderer="com.view.itemRenderers.DGLinkButtonEditor"
    rendererIsEditor="true" editable="false"/>
    
    <mx:DataGridColumn id="colSelected" width="46" textAlign="center" visible="false" sortable="false" draggable="false" resizable="false"
    headerText="Select" dataField="sel" itemRenderer="com.view.itemRenderers.DGCheckBoxEditor"
    rendererIsEditor="true" editorDataField="cbSelected"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>
DGNumericStepperEditor.mxml
<?xml version="1.0"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent"
horizontalAlign="center" verticalAlign="middle">
    <mx:Script>
        <![CDATA[
         import mx.controls.listClasses.ListData;
   import mx.controls.dataGridClasses.DataGridListData;
   import mx.controls.listClasses.BaseListData;
   import mx.controls.dataGridClasses.DataGridItemRenderer
   import mx.events.FlexEvent;
   import mx.controls.Alert
   private var _listData:DataGridListData;
            // Define a property for returning the new value to the cell.
            public var nsBook:Number;
            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
    bookNS.setFocus();
   [Bindable]
   override public function set data(value:Object):void{
    super.data = value;
    bookNS.value = data[_listData.dataField];
   override public function get data():Object {
    return super.data;
      public function get listData():BaseListData
    return _listData;
   public function set listData(value:BaseListData):void
    _listData = DataGridListData(value);
        ]]>
    </mx:Script>
<mx:NumericStepper id="bookNS" horizontalCenter="center" maximum="18" width="100%"
        click="nsBook = bookNS.value" />
</mx:VBox>
PLEASE HELP, getting these itemRenderers and itemEditors to work properly is DRIVING ME CRAZY!!!

How to access the datagrid in one mxml in another component

I have a datagrid in a.mxml. when click on the add button, it comes to a b.as file (not a class) to do some things and then, b.as call a popupwindow (c.mxml) to add a row into table (call backend). After I added the row to database table successfully, I want to add the row into datagrid to display, but I could not access the datagrid in a.mxml from c.mxml. How can I do this?
Thank you in advance.

If this post answers your question or helps, please mark it as such.
To add a row to the DataGrid you really need to just add data to the dataProvider collection object.
You can access components by going through the main app:
mx.core.Application.application.myA.myVar = myC.cVar;
But you should really be using custom events to communicate between components, though it is more complex. Here is my Flex 3 Cookbook post of the topic of custom events:
http://cookbooks.adobe.com/post_Building_a_wizard_using_a_simplified_MVC_architect-11246.h tml
Here are some sample apps on custom events on my web site (right click to View Source):
http://www.chikaradev.com/learning/flex3/customevents/CustomEventSimple/CustomEventSimple. html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents1/index.html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents2/CustomEvents2.html
http://www.chikaradev.com/learning/flex3/customevents/CustomEvents3/CustomEvents3.html
Here is my tutorial on custom events:
http://www.chikaradev.com/learning/flex3/customevents/StudentsTutoringCustomEvents1.pdf

Datagrid questions

I have a datagrid whereI would like to select multiple rows
and then copy the rows into another object, manipulate them and the
shove them into antother data grid. The business process is to take
a shipment with a single start and end point (a single leg, or
route, if you will) and then introduce a hub into the route, thus
breaking a single-route into a two-leg-route, a two-leg-route into
a three-leg-route, and so on...
I found a method listed as:
copySelectedItems(useDataField:Boolean = true):Array which the help
says "Makes a copy of the selected items in the order they were
selected.", and it belongs to a ListBase which is a parent class.
Now, correct me if I'm wrong, but in Java I wouldn't have a problem
accessing a protected member of a parent class. That doesn't seem
to work in this case. I have tried to use the method like this:
private function setSelection(event:Event):void {
var list:Array =
event.currentTarget.copySelecteditems(true);
var list2:Array = list;
The exception is this:
ReferenceError: Error #1069: Property copySelecteditems not
found on mx.controls.DataGrid and there is no default value.
at
Pooling/setSelection()[F:\Eclipse6Workspaces\Services\Pooling\src\Pooling.mxml:27]
at
Pooling/__shipGrid_itemClick()[F:\Eclipse6Workspaces\Services\Pooling\src\Pooling.mxml:49 ]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at
mx.core::UIComponent/dispatchEvent()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framewor k\src\mx\core\UIComponent.as:8915]
at
mx.controls.listClasses::ListBase/mouseClickHandler()[E:\dev\flex_3_beta2\sdk\frameworks\ projects\framework\src\mx\controls\listClasses\ListBase.as:8661]
I'm not sure what is the root of this issue, or if it's just
a matter of me not understanding actionScript. I can make the
process work by iterating through the selected items, and that's
not too bad, but it would be great if I could make the shortcut
method work.
I appreciate everyone's help, thanks...

Okay, I'll answer my own question. The selectedItems property
of the dataGrid returns an array.
var list:Array = event.currentTarget.selectedItems;
...does exactly what I need.
I don't feel too smart after this one!
Cheers,

Questions about Spark DataGrid (Header Font Styles, Header Gradient)

Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios. Not sure where to set them now.
I think that is it for now. From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
Bill

You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin 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:skins="spark.skins.spark.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <s:CustomGridHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
-Kevin

Datagrid with comboBox headerRenderer question

Hi All,
I have a comboBox as header renderer in my datagrid.
How can I fire a function that it is in my main form (where the datagrid is) when I change the selected item in the comboBox?
Thanks
Johnny

Why my HTML Code didn't show.
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
             labelField="label" dataProvider="{acCombo}" rowCount="20"
             change="onSelectionChange(event)" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.dataGridClasses.DataGridColumn
            import mx.rpc.events.ResultEvent;
            [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{id:1, label:"Private"},{id:2, label:"Public"}]);
            private var _ownerData:Object;
            public function init():void
                //init code
            override public function set data(value:Object):void
                if (value is DataGridColumn ){
                }else
                    super.data = value
            override public function get data():Object
                return _ownerData;
            override public function setFocus():void
                super.setFocus();
                open();
            private function onSelectionChange(e:ListEvent):void
        ]]>
    </mx:Script>
</mx:ComboBox>

How to add Column to Adobe flex mx:DataGrid in mxml and/or actionsctpt?

I have simple mxml code
<mx:DataGrid id="DGG"
             editable="true">
    <mx:dataProvider>
        <mx:Object scheduledDate="4/1/2006"/>
    </mx:dataProvider>
</mx:DataGrid>
<mx:Button id="SetBut"
           label="Set Array as Data Provider"
           click="SetDP(); AddBut.visible = true;"
           x="100.5"
           y="164"
           width="211"/>
<mx:Button id="AddBut"
           label="Add a column!"
           click="AddCol();"
           x="100.5"
           y="194"
           width="211"
           visible="false"/>
<mx:Script>
    <![CDATA[
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.collections.ArrayCollection;
        [Bindable]
        public var MyAC:ArrayCollection=new ArrayCollection([{scheduledDate: "4/1/2006", homeTeam: "Chester Bucks"}]);
        public function SetDP():void
            DGG.dataProvider=MyAC
        public function AddCol():void
            MyAC.addItem({scheduledDate: "4/5/2007", homeTeam: "Long Valley Hitters", Umpire: "Amanda Hugenkis"});
            DGG.columns.push(new DataGridColumn("Umpire"));
    ]]>
</mx:Script>
I want to add rows to my table datagrid how to do such thing?
How to add Column to Adobe flex mx:DataGrid in mxml and/or actionsctpt?
(You can put this code in Flash or AIR app - it will compile with no errors, but will not add any columns=( )

Change this:
             public function SetDP():void
                DGG.dataProvider=MyAC
                MyAC.addItem({scheduledDate: "4/5/2007", homeTeam: "Long Valley Hitters", Umpire: "Amanda Hugenkis"});
            public function AddCol():void
                var dgc:DataGridColumn = new DataGridColumn("Umpire");
                var ca:Array = DGG.columns;
                ca.push(dgc);
                DGG.columns = ca;
Dany

How make a button enable property "true" while i am clicking a row from datagrid in mxml flex4 app

hi friends,
i am new to flex, i am doing flex4 web application with mxml tags.
i have struck in this place,please give some idea.
i have one data grid with 5 rows and 4columns,and also i am having one button (property enable is false).
while i am click a particular row from datagrid that time the button property enbale should be change to true.
where i have to write code.
any suggession or snippet code,
Thanks in advance.
B.venkatesan.

Hi,
You can take help of following 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" minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var Arr:ArrayCollection = new ArrayCollection([{a:"AAA",b:"BBB"} , {a:"111" , b:"222"}]);
public function enable():void{
Btn.enabled=true;
]]>
</fx:Script>
<mx:DataGrid x="91" y="36" dataProvider="{Arr}" click="enable()">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="a"/>
<mx:DataGridColumn headerText="Column 2" dataField="b"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="210" y="237" id="Btn" label="Button" enabled="false"/>
</s:Application>
Thanks and Regards,
Vibhuti Gosavi | [email protected] | www.infocepts.com

DataGrid mxml question.

Similar Messages

Maybe you are looking for