11 Replies Latest reply on Oct 20, 2010 1:55 PM by BennyB23

    DataGrid mouseOver/itemRollover Question

    BennyB23 Level 1

      How do I set up event handling for an itemRollover in a DataGrid? I understand how to work with the selectedItem to handle events and set properties, but I don't know how to refer to the object that's responding to the mouseOver, or itemRollover, which is showing the over or hovered state for row. Some advice would be greatly appreciated.

       

      Thanks~B

        • 1. Re: DataGrid mouseOver/itemRollover Question
          rtalton Level 4

          Within the event object, you access the itemRenderer, and all its data. See ListEvent in the help docs.

          1 person found this helpful
          • 2. Re: DataGrid mouseOver/itemRollover Question
            BennyB23 Level 1

            Thanks for responding. I just looked over the documentation for the listEvent and there aren't any examples (that I can find) that demonstrate the syntax for referencing the itemRenderer within the event handler function. If you, or anybody else out there, could post a simple example of what the code for that would look like I'd greatly appreciate it.

             

            Thanks~B

            • 3. Re: DataGrid mouseOver/itemRollover Question
              rtalton Level 4

              You can use event.itemRenderer.data to get hold of the data object. Within the object will be your data which is being rendered on the screen.

              The easiest way to see this for yourself is to place a line break within your handler, go into debug, and click on a row. At the line break, look at the variables window for the event object, and drill down into it to see its properties. You will see everything you can then access in your code.

              1 person found this helpful
              • 4. Re: DataGrid mouseOver/itemRollover Question
                BennyB23 Level 1

                Thanks, that was a helpful reminder about using debug mode to drill down and examine the available properties and so forth. I tried exhausting a handful of ideas, but I'm still having trouble accessing the information I'm trying display in my event handler function. The following code is a stripped down version of what I'm currently working with:

                 

                 

                 

                <fx:Declarations>

                <fx:Model id="videoModel" source="data/videos.xml"/>

                <s:ArrayList id="videoList" source="{videoModel.item}"/>

                </fx:Declarations>

                 

                 

                <fx:Script>

                <![CDATA[

                //a value object class specifying the properties for each item represented in the ArrayList...

                import com.bennyb23.VideoItem;

                //a utility class that transfers the properties of the value object to the ArrayList...

                 

                import com.bennyb23.DataUtils;

                 

                 

                import mx.events.FlexEvent;

                import mx.events.ListEvent;

                 

                 

                //object for handling the selectedItem...

                [Bindable]

                protected var currentVideo:VideoItem;

                //object for handling the itemRollover...

                [Bindable]

                protected var hoveredVideo:VideoItem;

                 

                 

                protected function application1_creationCompleteHandler(event:FlexEvent):void

                {

                     DataUtils.transformVideoItems(videoList);

                }

                 

                protected function videoDG_changeHandler(event:ListEvent):void

                {

                if (mediaPlayer.playing)

                {

                     mediaPlayer.stop();

                }

                     currentVideo = event.target.selectedItem as VideoItem;

                     mediaPlayer.source = currentVideo.source;

                     mediaPlayer.autoPlay = true;

                     mediaPlayer.play();

                     tempText.text = currentVideo.description;

                }

                protected function videoDG_itemRollOverHandler(event:ListEvent):void

                {

                     //HERES WHERE I NEED HELP...

                }

                 

                ]]>

                </fx:Script>

                 

                <s:VideoPlayer

                    id="mediaPlayer"

                />     

                <mx:DataGrid    

                      id="videoDG" dataProvider="{videoList}"

                     change="videoDG_changeHandler(event)"

                     click="videoDG_clickHandler(event)"

                     itemRollOver="videoDG_itemRollOverHandler(event)"

                />

                <s:Label

                     id="tempText"

                />

                 

                I'm okay with using the selectedItem property to handle events, but I don't know how to create an equivalent for a rollover.

                Any advice would be greatly appreciated.

                 

                Thanks~B

                • 5. Re: DataGrid mouseOver/itemRollover Question
                  rtalton Level 4

                  Were you able to see the itemrenderer & data inside the event object, or is it not there?

                  • 6. Re: DataGrid mouseOver/itemRollover Question
                    BennyB23 Level 1

                    Yeah, I was able to see it, I just don't know how to refer to it within the function. When I tried referencing the properties in the event handler I would get an access of a null object through static type class error, or a similar one referring to the ContextualClassFactory, stating that there's no default. If I remember correctly, working in flash professional, I might have done something like; xmlList[hoveredVideo].description, but I don't know how do carry out a similar action in Flex.

                     

                    ~B

                    • 7. Re: DataGrid mouseOver/itemRollover Question
                      rtalton Level 4

                      Within the event handler, you should be able to drill down to the data using similar dot notation, like:

                      event.itemRenderer.data.mySpecialDescriptionProperty

                      ...or something similar. Look at the debug window to get the exact path to "mySpecialDescriptionProperty". Once you have the path, simply assign it to a variable and do what you wish with it.

                      • 8. Re: DataGrid mouseOver/itemRollover Question
                        BennyB23 Level 1

                        Quick question while I work on this: In the debug variables view there are multiple sets of objects. The value objects I transfer, or re-cast for the ArrayList appear to be showing up as properties with a green circle next to them, however there are references to these items higher up, which have a seemingly arbitrary numeric prefix and a red square next to them. The later of the two, with the red square are the static initial values, which are no longer referenced and will be picked up by the garbage (or trash?) collector, when and if it's run. Correct?

                        • 9. Re: DataGrid mouseOver/itemRollover Question
                          rtalton Level 4

                          The red squares are Private properties; the green circles are Public. Go for the public props.

                          • 10. Re: DataGrid mouseOver/itemRollover Question
                            BennyB23 Level 1

                            Cool, thanks...

                            • 11. Re: DataGrid mouseOver/itemRollover Question
                              BennyB23 Level 1

                              Very cool, many thanks and much respect for the help =]

                               

                              The solution, for anyone potentially referencing this post, ended up looking like this:

                               

                              protected function dgTest_itemRollOverHandler(event:ListEvent):void

                              {

                                   hoveredVideo = videoList.source[event.rowIndex]as VideoItem;

                                   testLabel.text = hoveredVideo.description;

                              }

                               

                              Note: "description" is a public property of the VideoItem value object, imported in the code listed above.

                               

                              ~B...//))