Flex :: Custom ComboBox Part 2

Last time we looked @ creating a custom ComboBox that could be reused for displaying states/countries. This time will wrap up by looking @ how that ComboBox can be used as an itemRenderer in a DataGrid. Since DataGrids use TextInputs as their default renderers when the grid is editable, we have to tell the grid we want to use our ComboBox for a particular column or columns. So, here’s an example of an editable grid that’s making use of the custom component:

<mx:DataGrid 
      x="10" y="40" 
      width="769" height="145" 
      id="dgGigs" 
      dataProvider="{dp}" 
      editable="true" 
      itemEditEnd="editedGig(event)"
      >
  <mx:columns>
	<mx:DataGridColumn headerText="Gig ID" dataField="gid" width="50" editable="false"/>
	<mx:DataGridColumn headerText="Date" dataField="date"/>
	<mx:DataGridColumn headerText="Event" dataField="event" width="200"/>
	<mx:DataGridColumn headerText="Venue" dataField="venue" width="180"/>
	<mx:DataGridColumn headerText="City" dataField="city" width="100"/>
	<mx:DataGridColumn headerText="State" dataField="state" width="65" itemEditor="components.StatesCombo"/>
	<mx:DataGridColumn headerText="Time" dataField="gtime" width="65"/>
  </mx:columns>
</mx:DataGrid>

Here we tell the grid that for the state column we want to use our custom ComboBox as the itemEditor for that column. In other words, use a TextField for static display of the data, but once a user clicks the cell to edit it use StatesCombo. Now, to wrap up we’ll look briefly @ the actual editing process. Check out itemEditEnd in the code above. Think of it as an Event Listener that says when the user is finished making an edit to the grid call the editedGig() method and pass the edit event as an argument. So, here’s the ActionScript to process those edits:

//gig variables
public var gigsDate:String;
public var gigsName:String;
public var gigsLoc:String;
public var gigsCity:String;
public var gigsState:String;
public var gigsTime:String;
 
//gig itemEditor
private function editedGig( event: DataGridEvent ):void
{
	var gigID:Number = dgGigs.editedItemRenderer.data.gid;
	switch (event.dataField)
	{
		case "date":
			//code for this case
			break;
		case "event":
			//code for this case
			break;
		case "venue":
			//code for this case
			break;
		case "city":
			//code for this case
			break;
		case "state":
			dgGigs.editedItemRenderer.data.state = components.StatesCombo( event.currentTarget.itemEditorInstance ).selectedItem.data;
			gigsDate = dgGigs.editedItemRenderer.data.date;
			gigsName = dgGigs.editedItemRenderer.data.event;
			gigsLoc = dgGigs.editedItemRenderer.data.venue;
			gigsCity = dgGigs.editedItemRenderer.data.city;
			gigsState = dgGigs.editedItemRenderer.data.state;
			gigsTime = dgGigs.editedItemRenderer.data.gtime;
			updateData( 'client.manager.updateGig',[gigID,gigsDate,gigsName,gigsLoc,gigsCity,gigsState,gigsTime] );
			break;
		case "gtime":
			//code for this case
			break;
	}
}

The key line here is

dgGigs.editedItemRenderer.data.state = components.StatesCombo( event.currentTarget.itemEditorInstance ).selectedItem.data

We must first set the itemRenderer for the state column equal to the list item the user selected with our component. Then, we assign the itemRenderer value to the gigsState variable and pass the data to our grid updating mechanism so that we can see the changes reflected. I’m just kinda scratchin’ the surface to keep it as simple and easy to understand as possible. You can check out the LiveDocs for more detailed info on renderers. If you missed it, you can catch part 1 here.

Buffer