Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to capture clicking in empty area of advanceddatagrid

    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

  • #2
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,638
    Thanks
    2
    Thanked 404 Times in 396 Posts
    Quote Originally Posted by bon_t View Post
    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:
    Code:
    <?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.

  • Users who have thanked Inigoesdr for this post:

    bon_t (10-20-2011)

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Inigoesdr,

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

    Thanks so much!
    Bon :-D


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •