Use spacebar to check/uncheck a checkbox in a datagrid.

Question

I have a DataGrid that has checkbox in the first column. The user wants to be able to check/uncheck the checkbox when he selects a row, by mouse or up and down keys, and hits the spacebar. Currently the spacebar functions if the last thing that the use has clicked on is the Checkbox. If the user clicks in the cell where the checkbox in located(not the checkbox itself), the spacebar won't do anything.
<mx:TabNavigator>
     <mx:VBox>
          <ms:datagrid id="lgGrid" dataProvider="{this.lData}">
               <mx:columns>
                    <mx:Array>
                         <mx:DataGridColumn dataField="vis" id="dfID" sortable="false">
                              <mx:itemRenderer>
                                   <mx:Component>
                                        <mx:CheckBox click="data.vis = !data.vis"  paddingLeft="4"/>
                                   </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                          <mx:DataGridColumn dataField="name"/>
                    </mx:Array>
               </mx:columns>
          </ms:datagrid
   </mx:VBox>
</mx:TabNavigator>

Answer 1

Your TableModel has to indicate that the column is editable. Your TableModel also has to implement setValueAt() so that when the user changes the value, it updates the data.
The table will know to use it's own boolean renderer/editor for that column because it knows what to do when a column returns a Boolean.