1 Reply Latest reply on Sep 24, 2010 11:46 AM by BennyB23

    Mouse focus in custom DataGrid ItemRenderer

    BennyB23

      I have a custom MXDataGridItemRenderer with a custom nested Spark CheckBox component that I'm trying to use within an MXDataGrid component. The renderer works fine, as does the nested checkbox, however I'm unable to decouple the mouse events for the checkbox from the DataGrid row. I intend to use the DataGrid as a playlist for the VideoPlayer component with an FX Model-based DataProvider and the purpose of the checkbox is to allow the user to automatically play the next selected checkbox item in the list; similar to the checkboxes in iTunes. Placing an instance of the checkbox on top of DataGrid achieves the desired decoupling, but this is obviously an impractical solution, which I include only to illustrate what I'm trying to do. Any recommendations would be greatly appreciated.

       

      Thanks,

      ~Benny

        • 1. Re: Mouse focus in custom DataGrid ItemRenderer
          BennyB23 Level 1

          I came up with a logical solution for achieving the desired effect, which I'll share in hopes that it may be of use to others. It sort of seems like a no-brainer after the fact, but I didn't think of it right away so here it is in a stripped down form:

           

          <!-- DG-Scroller_[(-->

          <s:Scroller

               id="dgScroller" width="306" height="125"

               >

               <!-- ScrollerGroup_[(-->

               <s:Group

                    id="scrollerGroup"

                    clipAndEnableScrolling="true"

                    width="306" height="125"

                    >

               <!-- DataGrid1_[(-->

               <mx:DataGrid

                    id="dataGrid1" dataProvider="{vidItems}"

                    width="26" left="0" top="0"

                    headerHeight="30" rowHeight="25"

                    verticalScrollPolicy="off"

                    >

                    <mx:columns>

                         <mx:DataGridColumn

                              <!--- ( ... ) -->

                              />

                         </mx:columns>

                    </mx:DataGrid>

               <!--- DataGrid1_)]-->

               <!-- DataGrid2_[(-->

               <mx:DataGrid

                    id="dataGrid2" dataProvider="{vidItems}"

                    width="280" left="26" top="0"

                    headerHeight="30" rowHeight="25"

                    verticalScrollPolicy="off"

                    >

                    <mx:columns>

                         <mx:DataGridColumn

                              <!--- ( ... ) -->

                              />

                    </mx:columns>

               </mx:DataGrid>

               <!--- DataGrid2_)]-->

               </s:Group>

               <!--- ScrollerGroup_)]-->

          </s:Scroller>

          <!--- DG-Scroller_)]-->