5 Replies Latest reply on Jun 30, 2011 3:51 AM by newbie_dev

    Flex Grid :: Hide events are not dispatched

    newbie_dev

      I am using flex 4.1. I have a simple grid with a button in each row. I want to detect when the button is hidden due to vertical scrolling. I have added a handler for hide in the button but the handler is never called.

       

      Following is a simple application with a grid - vertically scrolling the grid doesnt call hideHandler of the button.

       

      <?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" minWidth="955" minHeight="600">
           <fx:Script>
                <![CDATA[
                     import mx.events.FlexEvent;
      
                     protected function button1_hideHandler(event:FlexEvent):void
                     {
                          // TODO Auto-generated method stub
                     }
      
                ]]>
           </fx:Script>
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
           </fx:Declarations>
           <mx:Grid 
                height="300" width="100"
                x="100" y="10"
                verticalScrollPolicy="on">
                <mx:GridRow height="100">
                     <mx:GridItem>
                          <s:Button 
                               height="100" width="100%" 
                               label="first row" hide="button1_hideHandler(event)"/>
                     </mx:GridItem>
                </mx:GridRow>
      
                <mx:GridRow height="100">
                     <mx:GridItem>
                          <s:Button 
                               height="100" width="100%" 
                               label="second row" hide="button1_hideHandler(event)"/>
                     </mx:GridItem>
                </mx:GridRow>
      
                <mx:GridRow height="100">
                     <mx:GridItem>
                          <s:Button 
                               height="100" width="100%" 
                               label="third row" hide="button1_hideHandler(event)"/>
                     </mx:GridItem>
                </mx:GridRow>
      
                <mx:GridRow height="100">
                     <mx:GridItem>
                          <s:Button 
                               height="100" width="100%" 
                               label="fourth row" hide="button1_hideHandler(event)"/>
                     </mx:GridItem>
                </mx:GridRow>
                
                     <mx:GridRow height="100">
                     <mx:GridItem>
                          <s:Button 
                               height="100" width="100%" 
                               label="fifth row" hide="button1_hideHandler(event)"/>
                     </mx:GridItem>
                </mx:GridRow>
           </mx:Grid>
      </s:Application>
      
       
      

       

      Is there something else to be done for the hideHandler to be called?

       

      Things I have tried :

      1. added hideHandlers at all levels - Grid, GridRow, GridItem - none of them were called
      2. set visible=true at all levels - including Button - still no handler called

       

      However, for a datagrid, the hide handler for the item renderer is called when vertically scrolled

      <?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" minWidth="955" minHeight="600"
                        initialize="initApp()">
           
           <mx:DataGrid 
                height="100"
                x="100" y="100"
                dataProvider="{this.dataProvider}">
                <mx:columns>
                     
                     <mx:DataGridColumn headerText="column" editable="false"                                      
                                            itemRenderer="ItemRenderer"                                      
                                            dataField="label"/>
                </mx:columns>
           </mx:DataGrid>
           
           <fx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     [Bindable] public var dataProvider : ArrayCollection;
                     
                     private function initApp():void{
                          this.dataProvider = new ArrayCollection();
                          
                          var newObj1 : Object = new Object();
                          newObj1["label"] = "first row";
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);
                          this.dataProvider.addItem(newObj1);               
                     }
                ]]>
           </fx:Script>
      </s:Application>
      
      
      ItemRenderer :: 
      <?xml version="1.0" encoding="utf-8"?>
      <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                      xmlns:s="library://ns.adobe.com/flex/spark" 
                                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                                      focusEnabled="true" 
                                      hide="mxdatagriditemrenderer1_hideHandler(event)">
           <fx:Script>
                <![CDATA[
                     import mx.events.FlexEvent;
      
                     protected function mxdatagriditemrenderer1_hideHandler(event:FlexEvent):void
                     {
                          // TODO Auto-generated method stub
                     }
      
                ]]>
           </fx:Script>
           <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />
      </s:MXDataGridItemRenderer>
      
       
      

       

       

      Can anyone please tell me why this is so??

      Any pointers would be really helpful.

       

      thanks.