how to add a datagrid row on key down event?

Question

I have a datagrid with one row intially. When I click on the first row, i.e on key down event, I want another row to be added.

Earlier I had a button, on clicking which I added the row. But now I want the row to be added automatically once I click the first row. How to do that?

I added keydown event to the datagrid, but it threw some error.

Can someone help me? I have given my code here. I have a text box and a button in the task component. When I click the text box in the task component, I want the addTaskRow function to be called..

 <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
        import mx.collections.XMLListCollection;


 [Bindable]

         private var initDG:ArrayCollection = new ArrayCollection([
            {Select:true},

        ]); 

        private function addTaskRow(event:MouseEvent):void
        {
            taskDataGrid.dataProvider.addItem(
                {

                }
            );
            taskDataGrid.height += 30; 

        }

    ]]>
</mx:Script> 

<mx:DataGrid id="taskDataGrid" dataProvider="{initDG}"  variableRowHeight="true" editable="true"  
  width="100%"  paddingBottom="1" paddingTop="1" height="47"> 

 <!--mx:DataGrid id="taskDataGrid"  dataProvider="{initDG}" rowCount="1" variableRowHeight="true" editable="true" width="100%"  keyDown="addTaskRow(event);"-->
    <mx:columns>
     <mx:DataGridColumn dataField="Select" 
                editable="true" 
                rendererIsEditor="true" 
                itemRenderer="mx.controls.CheckBox" 
                editorDataField="selected" />

                <mx:DataGridColumn dataField="TaskName"
                width="220"
                editable="true" 
                rendererIsEditor="true" 
                itemRenderer="components.taskComponent"/>

                <mx:DataGridColumn dataField="TaskId"
                itemRenderer="mx.controls.TextInput" />

                <mx:DataGridColumn dataField="TaskType"
                 itemRenderer="mx.controls.TextInput"/>

                 <mx:DataGridColumn dataField="ProjectWon"
                  itemRenderer="mx.controls.TextInput"/>

                <mx:DataGridColumn dataField="ItemCodeVersion"
                 itemRenderer="mx.controls.TextInput"/>



    </mx:columns>
  </mx:DataGrid>

Answer 1

You want it on key press or mouse click? Change keyDown to mouseDown.

but it threw some error.

What error did it throw?

If you use mouseDown of the DataGrid, new row will be added when you click on any of the rows, not just the first row.

Answer 2

http://www.switchonthecode.com/tutorials/adding-dynamic-rows-to-flex-datagrid provides code to do it