<mx:DataGrid
   cellEditor="No default."
   cellRenderer="No default."
   columns="No default."
   columnName="No default."
   dataProvider="No default."
   editable="false|true"
   focusedCell="No default."
   headerColors="[0xE6EEEE, 0xFFFFFF]"
   headerHeight="20"
   headerStyle="No default."
   hGridLineColor="#666666"
   hGridLines="false|true"
   resizableColumns="true|false"
   rollOverColor="#0xE3FFD6"
   selectable="true|false"
   selectionColor="#0xCDFFC1"
   showHeaders="true|false"
   sortableColumns="true|false"
   vGridLineColor="#666666"
   vGridLines="false|true"
   cellEdit="Event handler; no default."
   cellFocusIn="Event handler; no default."
   cellFocusOut="Event handler; no default."
   cellPress="Event handler; no default."
   columnStretch="Event handler; no default."
   headerRelease="Event handler; no default."
 >
 Following is a DataGrid sample Code Specifying the Column Order:
 <mx:DataGrid>
   <mx:dataProvider>
     <mx:Array>
       <mx:Object Artist="Pavement" Price="11.99"
         Album="Slanted and Enchanted" />
       <mx:Object Artist="Pavement"
         Album="Brighten the Corners" Price="11.99" />
     </mx:Array>
   </mx:dataProvider>
   <mx:columns>
     <mx:Array>
       <mx:DataGridColumn columnName="Album" />
       <mx:DataGridColumn columnName="Price" />
     </mx:Array>
   </mx:columns>
 </mx:DataGrid>
 

<?xml version="1.0"?>
<!-- Simple example No:1 to demonstrate the DataGrid control -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

    <mx:Panel title="DataGrid Panel" marginTop="10" height="100%" width="100%">

        <mx:DataGrid editable="true" height="100%" width="100%">

            <mx:dataProvider>
                <mx:Array>

                    <mx:Object>
                        <Artist>Pavement</Artist>
                        <Price>9.99</Price>
                        <Album>Slanted and Enchanted</Album>
                    </mx:Object>

                    <mx:Object>
                        <Artist>Pavement</Artist>
                        <Price>9.99</Price>
                        <Album>Brighten The Corners</Album>
                    </mx:Object>

                </mx:Array>
            </mx:dataProvider>

        </mx:DataGrid>

    </mx:Panel>

</mx:Application>
        

<?xml version="1.0"?>
<!-- Simple example No:2 to demonstrate the DataGrid control -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

    <mx:Script>
        <![CDATA[
         
          function cellPressEvt(event)
	  {
	       clean();
	       focusCol.text=focusCol.text +  '\n' + event.columnIndex;
	       focusItem.text=focusItem.text + '\n' + event.itemIndex;
	       focusType.text=focusType.text + '\n' + event.type;
	  }
	  
	  function clean()
	  {
	       focusCol.text="ColumnIndex";
	       focusItem.text="ItemIndex";
	       focusType.text="EventType";
	  }
	    
	    ]]>
    </mx:Script>

    <mx:Panel title="DataGrid Panel" marginTop="10">

        <mx:VBox>

            <mx:DataGrid id="myGrid" width="350" height="100" cellPress="cellPressEvt(event);">

                <mx:dataProvider>
                    <mx:Array id="arr">
                        <mx:Object Artist=" Kapil" Album="All Time Favourites" Price="10"/>
                        <mx:Object Artist=" Kapil" Album="Classic Songs" Price="10"/>
                    </mx:Array>
                </mx:dataProvider>

            </mx:DataGrid>

        </mx:VBox>

        <mx:HBox>

            <mx:TextArea id="focusCol" text="ColumnIndex"/>
            <mx:TextArea id="focusItem" text="ItemIndex"/>
            <mx:TextArea id="focusType" text="EventType"/>

        </mx:HBox>

    </mx:Panel>

</mx:Application>   
        

Comments

No screen name said on Jan 15, 2005 at 5:48 AM :

i have two DataGrid,they are all dragenabled.wher i drag a item to another,i wanna to copy the data into the target ,then delete the data from its source dataGrid.how can i do it ?

smgilson said on Jan 18, 2005 at 10:54 AM :

You can see an example just like you describe in the Flex Explorer example that ships with Flex, or on our website at: http://www.macromedia.com/devnet/flex/example_apps.html. Look for the 'Drag and Drop' example in the explorer window.

Stephen Gilson
Flex Doc

No screen name said on Jan 27, 2005 at 5:47 AM :

I have a datagrid,and I have a webservice which is a cfc file.
now i want pass all the items in the dataGrid to a method in the webservice,just like:
ws.insertData(datagrid.dataProvider);
but error occured. it seems I use the wrong data Type between the server side and the client side.
how can i do it ? is there some samples?

mpeterson said on Jan 27, 2005 at 10:51 AM :

Regarding the previous comment:

Thanks for your comment on Macromedia Flex LiveDocs. We use LiveDocs for gathering feedback on the documentation. This is a question best handled by our support team. You can contact them at:

http://www.macromedia.com/support/flex/

You can also contact the Flex development community using the Flex forums at:

http://www.macromedia.com/cfusion/webforums/forum/index.cfm?forumid=60

You also might want to join the Flex Coders mailing list at:
http://www.flexcoders.org

- Mike Peterson
Flex documentation team

No screen name said on Mar 9, 2005 at 8:14 AM :

The doc for the datagrid says:

The DataGrid control provides the following features:
...
Multiple modes of selection (row, column, cell, and edit), and selection events
...


My question is how do I select a column? When selectable=true, only rows are selectable. I don't see the property that allows me to say what the 'selection mode' is...

Thanks,
Cliff

smgilson said on Mar 15, 2005 at 8:54 AM :

There is currently no way to select the column of a DataGrid control.

Stephen Gilson
Flex Doc

01merced said on Mar 17, 2005 at 10:58 AM :

setting the headerColors style seems to hve no effect. Is there an error in the documentation? Thanks

Dustin Mercer

halL said on Mar 18, 2005 at 9:28 AM :

In Response to 01Merced:

There is a known issue, bug number 103620, with setting headerColors using the setStyle method, but you should be able to set it in the MXML tag.
The bug description is: "Setting headerColors via setStyle is not taking effect until any user interaction on DataGrid. Setting headerColors in DataGrid tag works correctly."
I confirmed that setting headerColors in the tag and it worked correctly, although on a developmental build.

dhirenb said on Apr 23, 2005 at 9:14 AM :

The description of the DataGrid control mentions that the DataGrid provides:
Optional customizable column and row headers

I don't see any way to set row headers and declare a scroll policy to have them static on horizontal scrolling. Is this possible?

No screen name said on May 22, 2005 at 7:24 PM :

How to delete all contents of dataDrid ? is there any possibility to remove all data from cells and rows without destroing rows ,headers etc.

there should be add a function passed to datagrid that clear all content

myGrid.clearData();

it should refresh datagrid component and returns it as before add any objects.

No screen name said on May 22, 2005 at 7:29 PM :

If there's a script that slect and set focus to next or previous cell , when i press button , like :
on(press){
myDataGrid.selectNextCell();
}

myDataGrid.selectPrevCell();

how to do such thing?

Thanxs

Duality.Enigma said on Jul 13, 2005 at 12:05 PM :

cellFocusIn event isn't broadcasting when the focus of the dataGrid is changed.

For instance cellPress="changeData(event)" calls the function properly when the data is clicked, however, cellFocusIn="changeData(event)" does NOT call the function when I change the row with the arrow keys or click on a row.

Is this a known bug?

No screen name said on Jul 18, 2005 at 8:47 AM :

the initial syntax description dont include columnnames and columncount properties whereas the property description has them

smgilson said on Jul 26, 2005 at 9:10 AM :

The columnNames property has a typo - it is called columnName in the MXML syntax. We will fix that in the next release.

columnCount is read only and therefore omitted from the MXML syntax since you cannot set it.

Stephen Gilson

mr_dan said on Sep 15, 2005 at 9:46 AM :

The DataGridColumn documentation page mentions that the datagrid has a sort method, "the DataGrid.sort() method." This is not mentioned on the datagrid documentation page.

mr_dan said on Sep 15, 2005 at 10:44 AM :

Rather, for programmatic sorting, use the datagrid's "sortItemsBy" method with the direction parameter being the either literal string "asc" or "desc"

function sortItemsBy (columnName:String, direction:String):Void;

Sample:
var dg:mx.controls.DataGrid = datagrid1;
dg.sortItemsBy("LastName","asc");

Since programmatic sorting (useful when the grid's dataProvider changes and you want to retain the sort order on the desired column) doesn't update the sort arrow, I wouldn't mind seeing also how this is done.

halL said on Sep 16, 2005 at 9:02 AM :

In response to the two comments from mr_dan on sorting.

You are correct, that there is no DtaGrid.sort() method.
It is correct that you can use the SortIemtsBy() method.
If you have fields that do not require a standard numeric or alphabetic sort, you can use the SortItems() method, which requires you to provide a comparison function.

We will consider enhancing the documentation for the next Flex release with DataGrid sorting examples.

aubweb said on Jan 9, 2007 at 12:23 AM :

In response of how to clear a datagrid,
I use : myDataGrid.dataProvider = null ;