Sep 09, 2005 - KeyDown handler on editable DataGrid
KeyDown handler on editable DataGrid

From the MM Flex forum, a question:
I am trying to generate an event based on editing a cell in DG. I can generate the event with cellEdit once a leave the cell but I would like to generate the event as I type so I can generate a list (intellisense) as one is typing. It works in TextInput but I can not get it to work in editable Datagrid. I tried keyDown but that event only generates an event in non-editable DG. Any ideas?

Haluk

And the solution from bdeen:
Their is a movieclip called cellEditor on the DataGrid. the issue with it is that everytime a cell gains focus, it creates a new cellEditor, everytime the cell loses focus it deletes the celleditor. So you need to use the datagrid's cellFocusIn and cellFocusOut

cellFocusIn="grid.cellEditor.addEventListener('keyDown', this.YOUR_FUNC_HERE);"
cellFocusOut="grid.cellEditor.removeEventListener('keyDown',this.YOUR_FUNC_HERE);"

Sample Application:

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"  xmlns="../*" initialize="doInit()"  backgroundColor="#FFFFFF"  >
<mx:Script><![CDATA[
 //keyDown handler
 function editorKeyDown(event)
 {
    alert(event.ascii);
 }
 
 //just creates the sample data
 function doInit()
 { var v=0;
   grid.dataProvider = new Array();
   var object = new Object();
   object.optionName = "1";
   object.description="ABC";
   var object2 = new Object();
   object2.optionName = "1";
   object2.description="X,YZ";
   grid.dataProvider.addItem(object);
   grid.dataProvider.addItem(object2);
  
   object = new Object();
   object.optionName="2";
   object.description="ABC";
   grid.dataProvider.addItem(object);
 }
]]></mx:Script>
<mx:Panel title="Bob" width="100%" height="100%">
      <mx:DataGrid id="grid" editable="true" width="100%" height="100%" sortableColumns="false" hGridLines="false" vGridLines="false"
   cellFocusIn="grid.cellEditor.addEventListener('keyDown', this.editorKeyDown);"
   cellFocusOut="grid.cellEditor.removeEventListener('keyDown',this.editorKeyDown);"
   >
        <mx:columns>
          <mx:Array>
            <mx:DataGridColumn width="300" headerText="Option" columnName="optionName"   />
            <mx:DataGridColumn width="300" headerText="Option Description" columnName="description"  />
          </mx:Array>
        </mx:columns>
      </mx:DataGrid>
    </mx:Panel>
</mx:Application>