1 Reply Latest reply on Aug 18, 2009 3:28 PM by babo_ya

    How to bind an itemRenderer to a datagrid

    SiHoop Level 1

      I have a datagrid that uses an itemRenderer. The itemRenderer contains a checkbox. I want the selected checkbox in the datagrid to stay in the correct row when the datagrid is sorted, but when I sort a column the checkbox moves to the wrong row. How do I bind the checkBox to the datagrid? I tried playing around with the following 2 lines of code in the itemRenderer, but without success:

       

      //super.data = value;

      //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

       

      Thanks for looking.

       

       

      Here is my main file:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
         
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  [Bindable]               
                  private var initDG:ArrayCollection = new ArrayCollection([
                      {Artist:'aaa', Album:'1', Price:3},
                      {Artist:'ccc', Album:'2', Price:2},
                      {Artist:'bbb', Album:'3', Price:1},
                      {Artist:'ddd', Album:'2', Price:4}
                  ]);
              ]]>
          </mx:Script>

       

          <mx:DataGrid id="myGrid" dataProvider="{initDG}"       > 
              <mx:columns>
                  <mx:DataGridColumn dataField="Artist"/>
                  <mx:DataGridColumn dataField="Album"/>
                  <mx:DataGridColumn dataField="Price"/>
                  <mx:DataGridColumn itemRenderer="RendererDGImage"/>
              </mx:columns>      
          </mx:DataGrid> 
      </mx:Application>

       

      Here is my itemRenderer:RendererDGImage.mxml

       

      <?xml version="1.0"?>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                  private var myVal:Boolean=false;          
                  public function checkSelected():void {     
                      myVal= ! myVal
                  }
                 
                  override public function set data(value:Object):void {   

       

                         //super.data = value;
                          if (myVal){
                              trace("true")
                            myCheckBox.selected=true;
                          } else {
                              trace("false")
                              myCheckBox.selected=false;
                          }
                      // Dispatch the dataChange event.
                      //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
                  }  
              ]]>
          </mx:Script>
            <mx:CheckBox id="myCheckBox" enabled="true"  click="checkSelected();"/>
      </mx:HBox>

        • 1. Re: How to bind an itemRenderer to a datagrid
          babo_ya Level 3

          I would create an object let's say.. Album.. that has four properties.. and create instances of this object based on the length of the arrayCollection..

           

          and..

           

           

          [Bindable]

          public var album:Album;

           

           

          public function checkSelected():void {    
                          album.Buy = myCheckBox.selected.

                      }

           

          change this too..

           

          <mx:CheckBox id="myCheckBox" enabled="album.Buy"  click="checkSelected();"/>

           

          and finally..

           

          override public function set data(value:Object):void {  

           

                             album = (value as Album);
                      } 

           

           

          hope this helps,

           

          BaBo,