16 Replies Latest reply on Jul 6, 2009 9:38 AM by nikos101

    How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn

    nikos101 Level 2

      HI there

       

       

      I have a column that contains a checkbox

       

                      <mx:AdvancedDataGridColumn width="30" headerText="" showDataTips="true" editable="false" dataField="Delete">

       

       

       

                                      <mx:itemRenderer>
                                          <mx:Component>
                                              <mx:HBox width="100%" verticalAlign="middle" paddingBottom="0" paddingTop="0" horizontalAlign="center" height="100%">
                                                  <mx:CheckBox>
                                                      <mx:click>
                                                          <![CDATA[
                                                          ]]>
                                                      </mx:click>
                                                  </mx:CheckBox>

       

                                              </mx:HBox>
                                          </mx:Component>
                                      </mx:itemRenderer>

       

                                  </mx:AdvancedDataGridColumn>

       

      How do I tell wether or not each checkbox is selected?

       

       

      many many thanks

        • 1. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
          *Prashant Shelke* Level 4

          On select/ deselect of checkBox in dataGrid you can make changes(+ / -) to one integer variable outside. if dataGrid.dataProvider.length == counter then you can get that all checkboxes are selected.

          1 person found this helpful
          • 2. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
            nikos101 Level 2

            Thanks but there must be a more elegant solution to this, I just can't figure out to access all the selected state of all the comboboxes in one pass, I've hunted in the bebugger view but can't find anything in the ADG object runtime properties.

             

             

            I mean the selected states value must be stored somewhere in the datagrid?

            • 3. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
              nikos101 Level 2

              Looks  like not many people know the answers to this one

              • 4. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                leybniz Level 4

                I mean the selected states value must be stored somewhere in the datagrid?

                Actually nope, datagrid have no Idea what is the state of the model, since you can assign *any* item renderer class, you have to maintain your model manually. You cannot relay on datagrid internal guts since it follows itemRenderer pattern - few visual renderers responsible for displaying all rows. The only source you can trust is dataProvider or your grid-external data collection.

                 

                General scenario for your usecase would be to store checkboxes states inside dataProvider items as some property say 'checked/selected'
                and enum items to find out current checkboxes state.

                • 6. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                  nikos101 Level 2

                  In trying to do what you reccomended I've put a break point onthe line that says:

                   

                  var t:int = 2;

                   

                  However when I run the debug the breakpoint jumps down to the line that says:

                   

                      </mx:AdvancedDataGridColumn>

                   

                  I don't have any compile errors or runtime ones and I tried restarting Flex Builder 3

                   

                  Any ideas what is going wrong?

                   

                   

                   

                   

                              <mx:AdvancedDataGridColumn width="30" headerText="" showDataTips="true" editable="false" dataField="Delete">

                   

                                                  <mx:itemRenderer>
                                                      <mx:Component>
                                                          <mx:HBox width="100%" verticalAlign="middle" paddingBottom="0" paddingTop="0" horizontalAlign="center" height="100%">
                                                              <mx:CheckBox>
                                                                  <mx:click>
                                                                      <![CDATA[
                                                                      var t:int = 2;
                                                                      ]]>
                                                                  </mx:click>
                                                              </mx:CheckBox>

                   

                                                          </mx:HBox>
                                                      </mx:Component>
                                                  </mx:itemRenderer>

                   

                                              </mx:AdvancedDataGridColumn>

                  • 7. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                    leybniz Level 4

                    One thing I can tell you, Flex Builder some times goes crazy, when it comes to debug mxml's. My guess it's falling to debug inside inline <mx:Component> due to that fact that it's actually EXTERNAL component, so the line numbers don't match and behave that strange..

                     

                    There is a better way to define custom item renderer via class reference, this way you'll be able to debug your renderer component.

                     

                    <mx:AdvancedDataGridColumn  itemRenderer="yourItemRendererClass" .. />

                     

                    and have yourItemRendererClass.mxml having mx:Component internals in it.

                    1 person found this helpful
                    • 8. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                      leybniz Level 4

                      5 cents more on mx:Component:

                      for me it's a bad habbit to use this tag at all, the reasons are

                      • it's cumbersome when at one hand you have it inline and on other hand you can't access anything outside mxComponent tag
                      • It prevents code re-usage, lot's of same looking code all around your app, it's a nightmare
                      • As a bonus you see for yourself how it can be debugged
                      • 9. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                        nikos101 Level 2

                        Thanks again,

                         

                        one weird thing is that in this code, the debugger works fine:

                         

                                <mx:AdvancedDataGridColumn dataField="isValid" headerText="Validated?" textAlign="center" wordWrap="true" width="100">
                                                    <mx:itemRenderer>
                                                        <mx:Component>
                                                            <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
                                                              <mx:Script><![CDATA[
                                                                 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                                                 {
                                                                     if(data != null && data.children ==null){
                                                                      super.updateDisplayList(unscaledWidth,unscaledHeight);
                                                                      var g:Graphics = graphics;
                                                                      g.clear();
                                                                      g.beginFill( data.isValid  ? 0x00FF00 : 0xFF0000 );
                                                                      g.drawRect(0,0,unscaledWidth,unscaledHeight);
                                                                      g.endFill();
                                                                  }
                                                                 }
                                                               ]]></mx:Script>
                                                            </mx:Label>
                                                        </mx:Component>
                                                    </mx:itemRenderer>
                                                    </mx:AdvancedDataGridColumn>

                        • 11. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                          nikos101 Level 2

                          yeah lol

                           

                          ok

                           

                          I've got this here but it won't let me tick the checkboxes?

                           

                          Any ideas mate?

                           

                          package
                          {
                          import flash.display.DisplayObject;
                          import flash.events.KeyboardEvent;
                          import flash.events.MouseEvent;
                          import flash.text.TextField;
                          import mx.controls.CheckBox;
                          import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
                          import mx.controls.listClasses.ListBase;

                           

                          /**
                          *  The Renderer.
                          */
                          public class CheckBoxRenderer extends CheckBox
                          {

                           

                              public function CheckBoxRenderer()
                              {
                                  focusEnabled = false;
                              }

                           

                              override public function set data(value:Object):void
                              {
                                  super.data = value;
                                  invalidateProperties();
                              }
                             
                              override protected function commitProperties():void
                              {
                                  super.commitProperties();
                                  if (owner is ListBase)
                                      selected = ListBase(owner).isItemSelected(data);
                              }

                           

                              /* eat keyboard events, the underlying list will handle them */
                              override protected function keyDownHandler(event:KeyboardEvent):void
                              {
                              }

                           

                              /* eat keyboard events, the underlying list will handle them */
                              override protected function keyUpHandler(event:KeyboardEvent):void
                              {
                              }

                           

                              /* eat mouse events, the underlying list will handle them */
                              override protected function clickHandler(event:MouseEvent):void
                              {
                              }

                           

                              /* center the checkbox if we're in a datagrid */
                              override protected function updateDisplayList(w:Number, h:Number):void
                              {
                                  super.updateDisplayList(w, h);

                           

                                  if (listData is AdvancedDataGridListData)
                                  {
                                      var n:int = numChildren;
                                      for (var i:int = 0; i < n; i++)
                                      {
                                          var c:DisplayObject = getChildAt(i);
                                          if (!(c is TextField))
                                          {
                                              c.x = (w - c.width) / 2;
                                              c.y = 0;
                                          }
                                      }
                                  }
                              }

                           

                          }

                           

                          }

                          • 12. Re: How do I tell wether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                            leybniz Level 4

                            have you tried to comment out this one:

                            /* eat mouse events, the underlying list will handle them */
                                override protected function clickHandler(event:MouseEvent):void
                                {
                                }

                            • 13. Re: How do I tell whether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                              nikos101 Level 2

                              Opps thats the one, I wish I could give you more stars in this post

                               

                              I would like to add my own custom code in here but still allow ticks, is the original source for clickHandler online somewhere so I don't have  download all the source

                               

                                   /* eat mouse events, the underlying list will handle them */
                                  override protected function clickHandler(event:MouseEvent):void
                                  {
                                      if(!data.isSelected){
                                          data.isSelected = true;
                                      }
                                  }

                              • 14. Re: How do I tell whether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                                leybniz Level 4

                                override protected function clickHandler(event:MouseEvent):void
                                    {

                                        super.clickHandler(event);

                                 

                                         if(!data.isSelected){
                                            data.isSelected = true;
                                        }
                                    }

                                 

                                next time start a new thread, since this batch of questions is over

                                • 16. Re: How do I tell whether or not each checkbox is selected  in a <mx:AdvancedDataGridColumn
                                  nikos101 Level 2

                                  lol in my code handler in flex it is really messy to get those isSelected values, because I use those fancy groupoing values. It works though


                                    for each(var o:Object in deals.dataProvider.source.source.list.source  LOL

                                   

                                   

                                      private function confirmDeleteDealHandler(object:Object):void
                                              {
                                                  if (object.detail == Alert.YES)
                                                  {
                                                      var toBeDeleted:Array;
                                                      for each(var o:Object in deals.dataProvider.source.source.list.source){
                                                          if(o.isSelected)
                                                          toBeDeleted.push(o.dealID)
                                                      }
                                                      if(toBeDeleted.length > 0){
                                                          myService.deleteTrades(toBeDeleted);
                                                      }
                                                  }
                                                     
                                                     
                                                 
                                                  else
                                                  {
                                                      Alert.show("Action Aborted");
                                                  }
                                              }