The amazing adventures of Doug Hughes

Just quickly wanted to describe setting the edit position on the Flex Datagrid component.

I recently wanted to add a new empty row to my datagrid and make sure that new row had focus and was ready to be edited. Setting the editedItemPosition property on the datagrid requires passing an object in the following format:

{ rowIndex : 0 , columnIndex : 1 }

Here’s some code to get you there if your looking to do something similar:

protected var dataGridDataProvider: ArrayCollection = new ArrayCollection([
            name: 'firstName',
            description: 'First Name'
        }, {
            name: 'lastName',
            description: 'Last Name'
        }, {
            name: 'email',
            description: 'Email'
     * Handles the click event from the add row btn.
     * @param	event	MouseEvent
    public function addRowBtnClickHandler(event: MouseEvent): void {
        // add am empty item
        dataGridDataProvider.addItem({name:'', description:''});
        // select the empty item
        dataGrid.selectedIndex = dataGridDataProvider.length - 1;
        // set the new item to edit
        dataGrid.editedItemPosition = {rowIndex:dataGrid.selectedIndex, columnIndex:1}

/ * * * Handles DataGridEvent that is dispatched when an item editing session ends on the dataGrid. * * @param event DataGridEvent * /
public function dataGridItemEditEndHandler(event:DataGridEvent):void
trace('Edit the Datagrid.')

Hope this helps some folks and thanks for any comments.

Comments on: "Setting the edit position on the Datagrid" (3)

  1. Thanks. This was just what i was looking for. Great example.


  2. Thanks.But i am using item rendrer in datagrid and i want to edit like textInput at particular location .And if i am using editedItemPosition it shows whole XML(that is used in dataprovider) in text box .So if you have any solution then please help.


  3. Thanks it helped me. Good example.


Comments are closed.

Tag Cloud

%d bloggers like this: