12 Replies Latest reply on May 9, 2011 7:41 AM by bucpatr1

    how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer

    nikos101 Level 2

      how would I listen to the child components changes in the parent? I don't want to listen to the  <s:change> events fired  in each of  the three components

       

      <s:MXAdvancedDataGridItemRenderer>

       

       

      listent ot change events here ->


          <s:DropDownList x="0" width="120" dataProvider="{dataA}" id="ddl" labelField="name"  >
         <s:change> /not in here
          </s:DropDownList>

       

          <mx:DateField id="midYearReviewDate" toolTip="Mid year review date" selectedDate="@{data.midYearReviewDate}" x="125" y="0">
             
          </mx:DateField>
          <mx:DateField id="endYearReviewDate"  toolTip="End year review date" selectedDate="@{data.endYearReviewDate}" x="222">
             
          </mx:DateField>
         
      </s:MXAdvancedDataGridItemRenderer>

        • 1. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
          bucpatr1 Level 2

          Not quite sure what you're looking for. Is the problem that you want the same event to fire when any of the date fields change or do you just not want the change dispatching code in the renderer at all?

          • 2. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
            nikos101 Level 2

            if any of the fields change I want to have one and the same handler in the item render, not 3, 1 in each child be it dropdown or datefield. I would have though change events would bubble

            • 3. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
              bucpatr1 Level 2

              Can you post a code snippet showing how you add the event listener for the changes in the parent?

              • 4. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                nikos101 Level 2

                maybe somethign like this?

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:MXAdvancedDataGridItemRenderer 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="324"
                                                  focusEnabled="true">
                    <s:preinitialize>
                        <![CDATA[
                        addEventListener(FlexEvent.DATA_CHANGE, handleDataChange);
                        ]]>
                    </s:preinitialize>

                 

                    <fx:Script>
                        <![CDATA[
                            import mx.collections.ArrayCollection;
                            import mx.events.FlexEvent;
                           
                            [Bindable]
                            public var dataA:ArrayCollection;
                           
                           
                            public var lineManager:String;
                           
                           
                    
                               
                           
                           
                        ]]>
                    </fx:Script>
                   
                   
                    <s:DropDownList x="0" width="120" dataProvider="{dataA}" id="ddl" labelField="name"  >
                        <s:change>
                            <![CDATA[
                            data.lineManager = ddl.selectedItem.lineManager
                            ]]>
                        </s:change>
                       
                    </s:DropDownList>

                 

                    <mx:DateField id="midYearReviewDate" toolTip="Mid year review date" selectedDate="@{data.midYearReviewDate}" x="125" y="0">
                       
                    </mx:DateField>
                    <mx:DateField id="endYearReviewDate"  toolTip="End year review date" selectedDate="@{data.endYearReviewDate}" x="222">
                       
                    </mx:DateField>
                   
                </s:MXAdvancedDataGridItemRenderer>

                • 5. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                  bucpatr1 Level 2

                  Take a look at the docs here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/events/FlexEvent.htm l#DATA_CHANGE . By default, bubbles is set to false for DATA_CHANGE.

                   

                  In any case, adding event listeners inside an item render like that is usually a bad idea. Flex will recycle a single item renderer instance to display multiple lines in your datagrid. What you want to do instead is add an event listener in the parent that will respond to a custom event you dispatch from inside your renderer.

                   

                  So in your parent you would have:

                   

                  public function init():void{ addEventListener( 'myEvent', myHandlerFunction,true)};

                   

                  and then inside the renderer:

                   

                  <s:DropDownList x="0" width="120" dataProvider="{dataA}" id="ddl" labelField="name" change="{dispatchEvent(new Event('myEvent',true,false))}"/>

                  <mx:DateField id="midYearReviewDate" toolTip="Mid year review date"  selectedDate="@{data.midYearReviewDate}" x="125" y="0"

                  change="{dispatchEvent(new Event('myEvent',true,false))}"/>

                  <mx:DateField id="endYearReviewDate"  toolTip="End year review date" selectedDate="@{data.endYearReviewDate}" x="222"

                  change="{dispatchEvent(new Event('myEvent',true,false))}"/>

                  • 6. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                    nikos101 Level 2

                    dont you even advocate something like this:

                     

                        <s:DropDownList x="0" width="120" dataProvider="{dataA}" id="ddl" labelField="name"  >
                            <s:change>
                                <![CDATA[
                                data.lineManagerSAMAccountName = ddl.selectedItem.lineManagerSAMAccountName;
                                data.isModifiedClientSide = true;
                                ]]>
                            </s:change>
                           
                        </s:DropDownList>

                     

                    seems a waste to have to go down the custom event route. The DropDownList should be able to mod the data at least like this?

                    • 7. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                      bucpatr1 Level 2

                      If you wanted functionality like that then what you are really looking for is and item editor not an item renderer.

                       

                      Also,(just a personal observation) usually if the functionality that results from the change event (in this case

                      data.lineManagerSAMAccountName = ddl.selectedItem.lineManagerSAMAccountName;

                      data.isModifiedClientSide = true;) is too complicated to do inline( ie.

                       

                      change="{data.lineManagerSAMAccountName = ddl.selectedItem.lineManagerSAMAccountName;data.isModifiedClientSide = true;}"

                       

                      ) its better to move it into a function that you can call from the mxml than to stuff it into a CDATA statement like that. Either way works, but functions are a lot easier to maintain than a bunch to CDATA statements.

                      1 person found this helpful
                      • 8. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                        nikos101 Level 2

                        I cant dont see the point of item editors as most of the stuff they do can be done with itemrenderers

                        • 9. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                          bucpatr1 Level 2

                          The idea of an item editor is to transmit the changes to make inside your item renderer component back out to the actual dataprovider for the list. So instead of having to pass data around with events you simply define an value for the 'editorDataField' property of the column in your datagrid and any changes made to that property will be bound to the actual dataprovider collection.

                          1 person found this helpful
                          • 10. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                            nikos101 Level 2

                            I see, the confusing thing for me is that this will do exactly that, change the model without having to use itemEditor because of selected="@{data.addGroupPerformanceReview}"

                            itemEditor seems redundant

                             

                             

                            <mx:AdvancedDataGridColumn headerText="Comments view" dataField="commentsView" textAlign="right" editable="false">
                                                <mx:itemRenderer>
                                                   
                                                    <fx:Component>       
                                                       
                                                        <s:MXAdvancedDataGridItemRenderer>   
                                                            <fx:Script>
                                                                <![CDATA[
                                                                    import views.skins.cbForDatagrid;
                                                                ]]>
                                                            </fx:Script>
                                                           
                                                            <s:CheckBox skinClass="views.skins.cbForDatagrid" height="100%" width="100%" id="cb"  selected="@{data.addGroupPerformanceReview}" fontWeight="bold" color="#3333ff" >
                                                                <s:click>
                                                                    <![CDATA[
                                                                    this.data.isModifiedClientSide = 1;
                                                                    ]]>
                                                                </s:click>
                                                               
                                                            </s:CheckBox>                                       
                                                           
                                                        </s:MXAdvancedDataGridItemRenderer>                                       
                                                    </fx:Component>               
                                                </mx:itemRenderer>
                                            </mx:AdvancedDataGridColumn>

                            • 11. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                              nikos101 Level 2

                              in

                               


                              public class AdvancedDataGridColumn extends CSSStyleDeclaration implements IIMESupport

                               

                               

                               

                               


                                  /**
                                   *  @private
                                   */
                                  public function set itemRenderer(value:IFactory):void
                                  {
                                      _itemRenderer = value;

                               

                                      // this is expensive... but unless set after init (not recommended), ok.
                                      if (owner)
                                      {
                                          owner.invalidateList();
                                          owner.columnRendererChanged(this);
                                      }

                               

                                      dispatchEvent(new Event("itemRendererChanged"));
                                  }

                               

                               

                              vs

                               

                               


                                  [Inspectable(category="General")]

                               

                                  /**
                                   *  A class factory for the instances of the item editor to use for the
                                   *  column, when it is editable.
                                   *
                                   *  <p>The default value is the mx.controls.TextInput control.</p>
                                   *
                                   *  @see mx.controls.TextInput
                                   * 
                                   *  @langversion 3.0
                                   *  @playerversion Flash 9
                                   *  @playerversion AIR 1.1
                                   *  @productversion Flex 3
                                   */
                                  public var itemEditor:IFactory = defaultItemEditorFactory;

                              • 12. Re: how would I listen to the child components changes in the parent MXAdvancedDataGridItemRenderer
                                bucpatr1 Level 2

                                Actually, I'm not sure about using the two-way binding. It looks like in the Saprk datagrid in 4.5 you use two way binding instead of an editor but I'm not sure for the halo ADG. My suggestion would be to test your component with enough items in the dataprovider to require scrolling and see if everything behaves correctly when item renderers are recycled.