2 Replies Latest reply on Mar 30, 2007 8:49 AM by Dean Schulze

    Need mutually exclusive CheckBox that render properly

    Dean Schulze

      I have a datagrid with two columns of CheckBboxes. When one check box is checked the other one must uncheck itself it it is checked (mutually exclusive). I Can't use radio buttons because I need to allow both to be unchecked and we also need to generalize this to the case with more than two CheckBoxes where multiple boxes could be checked but some combinations would be mutually exclusive.

      My data model has two booleans to hold the state of each of these two check boxes and I've overridden the set data method in the renderer to clear up the mess created by Flex re-using renderers. My onChange() method for the CheckBox enforces the mutual exclusion in the data model, but resetting the data model does not cause the paired CheckBox to re-render itself properly. If I scroll down and then back after checking a box the paired CheckBox gets rendered properly.

      I've also tried adding selected="{data.distribute}" to the CheckBox attribute list, but it doesn't have any affect.

      Apparently I just need to cause the paired renderer to re-render itself. Is there a way to do this? I've tried keeping a reference to the paired CheckBox in the data model, but this creates a real mess due to Flex reusing the renderers.

      What's the proper way to get mutual exclusion between CheckBoxes and still get them to render properly?

      My code is below.

      Thanks.



      <mx:DataGridColumn
      id="distributeCB"
      rendererIsEditor="true"
      headerText="Distribute"
      width="70"
      itemRenderer="branches.CheckBoxItemRendererDistribute" />

      <mx:DataGridColumn
      id="removeCB"
      rendererIsEditor="true"
      headerText="Retract"
      width="70"
      itemRenderer="branches.CheckBoxItemRendererRemove" />


      CheckBoxItemRendererDistribute.mxml:

      <mx:HBox
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      horizontalAlign="center">

      <mx:Script>
      <![CDATA[

      import branches.CoveragePathNameStatus;


      public const nonDOCMStr:String = "Non-DOCM";

      // set data is needed or rendering won't work properly (checked
      // CheckBoxes will move around in the DataGrid). Apparently
      // the companion get data() method is not needed.
      override public function set data(oData:Object):void {

      // This is needed or all CheckBoxes will be disabled
      super.data = oData;

      if (oData is CoveragePathNameStatus) {
      var cpns:CoveragePathNameStatus = CoveragePathNameStatus(oData);
      cb.selected = cpns.distribute;
      }
      }


      private function onChange(event:Event):void {


      data.distribute=cb.selected;

      if ((cb.selected) && (data.remove))
      data.remove = false;

      }

      ]]>
      </mx:Script>

      <mx:CheckBox
      id="cb"
      change="onChange(event)"
      enabled="{data.status!=nonDOCMStr}" />

      </mx:HBox>


      CheckBoxItemRendererRemove.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      horizontalAlign="center">

      <mx:Script>
      <![CDATA[

      import branches.CoveragePathNameStatus;

      public const notDistributedStr:String = "Not Distributed";

      // This is needed or rendering won't work properly (checked
      // CheckBoxes will move around in the DataGrid). Apparently
      // the companion get data() method is not needed.
      override public function set data(oData:Object):void {

      // This is needed or all CheckBoxes will be disabled
      super.data = oData;

      if (oData is CoveragePathNameStatus) {
      var cpns:CoveragePathNameStatus = CoveragePathNameStatus(oData);
      cb.selected = cpns.remove;
      }
      }


      private function onChange(event:Event):void {

      data.remove=cb.selected;

      if ((cb.selected) && (data.distribute))
      data.distribute = false;

      }

      ]]>
      </mx:Script>

      <mx:CheckBox
      id="cb"
      change="onChange(event)"
      enabled="{data.status!=notDistributedStr}"/>

      </mx:HBox>