|
Ralf, The DataGrid maps column data to a
dataProvider via the ‘columnName’ property. You can also employ
cellRenderers and labelFunctions to render MovieClips/components and alternate
text into the Datagrid from the dataProvider value. Here is an example dataGrid (Actually this
is the DataGrid used within the Flash By Example UI): <mx:DataGrid id="datagrid"
borderStyle="none" height="100%" width="100%"
change="datagrid_change()"> <mx:columns> <mx:Array> <mx:DataGridColumn
headerText="I" textAlign="center"
columnName="icon" cellRenderer="ifbin.cells.Icon"
width="20"/> <mx:DataGridColumn
headerText="L" textAlign="center"
columnName="license" cellRenderer="ifbin.cells.Icon"
width="20"/> <mx:DataGridColumn
headerText="Name" textIndent="5" textAlign="left"
columnName="n" width="200"/> <mx:DataGridColumn
headerText="Author" textIndent="5"
textAlign="left" labelFunction="authorNameLabel"
width="100"/> <mx:DataGridColumn headerText="Player"
textIndent="5" textAlign="left" columnName="p"
width="60"/> <mx:DataGridColumn
headerText="Flash" textIndent="5"
textAlign="left" columnName="f" width="50"/> </mx:Array> </mx:columns> </mx:DataGrid> I could do the following with this
Datadrig instance: //create a dataProvider >> The
DataProvider API decorates the base Array.prototype at runtime myData = [] datagrid.dataProvider = myData myData.addItem ( { icon:’i32’
, license:23 , n:’My Example 1’ , p:8 , f:8 } ) myData.addItem ( { icon:’i32’
, license:23 , n:’My Example 2’ , p:8 , f:8 } ) myData.addItem ( { icon:’i32’
, license:23 , n:’My Example 3’ , p:8 , f:8 } ) Using the addItem method within the
DataProvider API broadcasts change events to the datagrid view causing it to
update. You could also do this as they are identical: datagrid.addItem ( { icon:’i32’
, license:23 , n:’My Example 1’ , p:8 , f:8 } ) datagrid.addItem ( { icon:’i32’
, license:23 , n:’My Example 2’ , p:8 , f:8 } ) datagrid.addItem ( { icon:’i32’
, license:23 , n:’My Example 3’ , p:8 , f:8 } ) When the datagrid renders rows, it uses
the cellRenderer to layout the cell column and used labelFunction to obtain the
cell text value. Once you see this working, you can do great things with the
DataGrid in terms of dynamically created values and inserting controls into the
datagrid. The important thing to realize is that the
DataGrid used the dataProvider API from within the component but it is also
usable from the Array itself. If you happen to have 2 datagrids using the same
dataProvider reference, both will update when data is added using the
dataprovider API. If you add data using the base Array methods, you will not
see data update within the view until the datagrid row is visually refreshed.
If you rollover a datagrid row, all the data in the row will update from the
dataProvider. This same model applies to all uses of the
dataProvider model. If you are using Trees, Lists, ComboBox, DataGrid,
Accordion, and many others, the dataProviders work essentially the same. Each
control interprets dataProvider contents slightly differently according to its
own features set. Just remember: Array == DataProvider via decoration! Here is the methods of the DataProvider API
that are added into the Array.prototype object at runtime. dispatchQueue dispatchEvent removeEventListener addEventListener editField getEditingData removeItemsAt addItemsAt updateViews sortItems sortItemsBy getItemID getItemAt replaceItemAt removeItemAt removeAll addItemAt addItem addView What is really nice is that you can write
a true DataProvider class by implementing this interface. On a prior Flex
project we wrote a filtered DataProvider that allows you to hide certain
records within a dataProvider by setting a filter value like so: myDP = new flow.DataProvider() myDatagrid.dataProvider = myDT myDP.addItem( { name:’Ted’,
age=33 } ) myDP.addItem( { name:’Fred’,
age=20 } ) myDP.addItem( { name:’Jean’,
age=25 } ) // set the filter such that only records
where age is less than 30 show myDP.filter = “age<30” Later in the app if you wanted to show all
rows simply say: myDP.filter = undefined Hopefully this more than covers your initial
question. Sorry for the rambling post. Cheers, Ted ;) From: Thanks Ted. -- -- |
Title: Re: [flexcoders] Adding rows to a datagrid programmatically
- RE: [flexcoders] Adding rows to a datagrid programmatic... Theodore E Patrick
- RE: [flexcoders] Adding rows to a datagrid program... Theodore E Patrick
