How to capture clicking in empty area of advanceddatagrid

[bon_t]

Hello,

Let's say there are 10 physical rows displayed for the advanceddatagrid, but there is data only in 3 of those rows.

How do I capture the user clicking on the other 7 empty rows?

A colleague said that he recalled seeing a datagrid where you can click on an empty row to add a new row. I Googled this but it seems that you have to add a dummy row with something like "Click to add row" to do this. In essence, someone wrote:
"Usually when appending records to a datagrid you do it through the dataprovider, if you have an editable grid you would add a new blank record to the provider then go to that index location in the datagrid for editing."

I'm not trying to add a new row, but I just want to detect that the user has clicked in the empty area of the advanceddatagrid.

Thanks!
Bon :-D

[Inigoesdr]

Originally Posted by bon_t

HA colleague said that he recalled seeing a datagrid where you can click on an empty row to add a new row. I Googled this but it seems that you have to add a dummy row with something like "Click to add row" to do this.

Yep, that is a common practice. Here is how you can detect a click inside of the ADG that is not on a row:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="356" height="276">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.controls.Alert;
			
			[Bindable] 
			private var stateArray:ArrayList = new ArrayList(
															[{label:"AL", data:"Montgomery"},
															{label:"AK", data:"Juneau"},
															{label:"AR", data:"Little Rock"}]);
				
			protected function adg1_clickHandler(event:MouseEvent):void
			{
				if(getQualifiedClassName(event.target) == 'mx.controls.listClasses::AdvancedListBaseContentHolder')
				{
					Alert.show('Click!');
				}
			}
		
		]]>
	</fx:Script>
	
	<mx:AdvancedDataGrid id="adg1" x="10" y="10" 
						 width="339" height="254" 
						 dataProvider="{stateArray}" 
						 click="adg1_clickHandler(event)">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="label" headerText="ID"/>
			<mx:AdvancedDataGridColumn dataField="data" headerText="Name"/>
		</mx:columns>		
	</mx:AdvancedDataGrid>
	
</s:Application>

I only tested this in Flex 4.5.1 and it likely won't work in older versions. There is probably a better way to do this too, but I didn't see one immediately apparent and I've never tried to do this before; I've always gone the route of adding a dummy row.

[bon_t]

Hi Inigoesdr,

Your clickHandler did the trick! And I'm using Flex 4.

Thanks so much!
Bon :-D