Using Item Editors in DataGrid, adding new data to DataGrid

In this example we are going to explore how to use editable dataGrids with itemEditor’s. We will also see how to add values to the DataGrid.

The application that we will build here can be found here.

Our application consists of Label, Button and DataGrid. In the DataGrid we are showing couple of US cities, the button gives us possibility to add new cities to our DataGrid.

Our application MXML tag has once again calls init() when application is initialized, there we add couple of items to ArrayCollection cities.
ArrayCollection cities has 3 fields id, city and millions (referring to population of a city).

	
private function init():void{
				cities.addItem({id:1, city: 'New York', short: 'NY', millions: 8});
				cities.addItem({id:2, city: 'Miami', short: 'MI', millions: 1});
				cities.addItem({id:3, city: 'Los Angeles', short: 'LA', millions: 4});
				cities.addItem({id:4, city: 'San Francisco', short: 'SF', millions: 1});
			}

Next lets look at our DataGrid MXML code:

<mx:DataGrid id="dg_cities" dataProvider="{cities}" editable="true">
		<mx:columns>
			<mx:DataGridColumn headerText="id" editable="false" dataField="id"/>
			<mx:DataGridColumn headerText="City" dataField="city"/>
			<mx:DataGridColumn headerText="Population in millions" dataField="millions" 
				itemEditor="mx.controls.NumericStepper" editorDataField="value" width="150"/>
		</mx:columns>
	</mx:DataGrid>

We set the dataProvider of DataGrid to cities, notice the usage of curly braces, which means that we want ActionScript 3 code to be executed within those braces. In our case just point to cities AC as dataProvider. Next we also set editable tag to true, which will enable us to modify data in DataGrid.

Since we dont wont Flex to build DataGrid for us based on it’s dataProvider we use mx:colums and mx:DataGridColumn to specify each of the 3 columns we want to show.

For column id, we want the header text to read id, that is why we put headerText=”id”, we also do not want this column to be editable, thus editable is set to false. We also have to tell DataGrid which field from cities AC we want to show in the first column, we do this by dataField=”id”.

Second column is preety much the same, we want it to be editable don’t have to use editable=”true” since this is default behavior for any DataGrid that has editable set to true. HeaderText is City and dataField is city.

For the third column we will use a itemEditor. In this case since we have population in millions of people we use Flex component NumericStepper. We can do this by itemEditor=”mx.controls.NumericStepper”. Since we are using custom itemEditor, we have to specify what data should DataGrid take from itemEditor. Since the value in NumericStepper is stored in value we put editorDataField=”value”.

Our button has a click event that calls function add_city(). Let’s explore what happens there. First we stor the last id from cities AC into variable _id. Next we increase _id by one with _id++. (in the source code below _id is casted as Number, where we should use int).
We than addItem to cities AC, select the last row in DataGrid (which is the row we just added), with dg_cities.selectedIndex = _id.

The next two lines of code ensure that when the DataGrid will become scrolable, it will automatically scroll to the last row in DatGrid. I belive that we have to use dg_cities.validateNow(), before we use dg_cities.scrollToIndex(_id), because we just added a new row to AC and we want DataGrid to refresh itself before we tell it to scroll to the last row.

Next time we will look at how to dispatch Event so that when we click Add new city button we will directly go into city itemEditor for the newly added city. This is something users are accustomed to and it saves us 1 click 🙂 (added in the next post)

Application Source Code

Advertisements

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: