2 Replies Latest reply on Oct 20, 2011 7:41 AM by bon_t

    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

        • 1. Re: How to capture clicking in empty area of advanceddatagrid
          Flex harUI Adobe Employee

          There should be a mouseEventToItemRenderer method that will return null if the event.target is not an itemRenderer.

          1 person found this helpful
          • 2. Re: How to capture clicking in empty area of advanceddatagrid
            bon_t Level 1

            Hi again,

             

            Someone provided me with this code and it works.  I just want to post it here to help others out.

             

            <?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>