2 Replies Latest reply on May 19, 2009 12:44 PM by flexenginer

    DataGrid selection indicate by CheckBoxes

    flexenginer

      My custom DataGrid class:

      package ua.org.enginer.controls {
           
           import flash.events.KeyboardEvent;
           
           import mx.collections.ArrayCollection;
           import mx.controls.DataGrid;
           import mx.controls.dataGridClasses.DataGridColumn;
           import mx.core.ClassFactory;
           import mx.events.ListEvent;
           
           import ua.org.enginer.controls.renderers.DataGridSelectionIndicator;
           
           
           /**
            * [a] key for select all (like [Ctrl+a])
            * 
            * Indicate selection by CheckBoxes
            */ 
           public class CheckSelectionDataGrid extends DataGrid {
      
                public function CheckSelectionDataGrid() {
                     super();
                     addEventListener(KeyboardEvent.KEY_DOWN, onKetDown)
                     
                     function onKetDown(event:KeyboardEvent):void {
                          //if (event.ctrlKey && event.keyCode == 65) {
                          // My lovely IE do not pass [Ctrl+A]... so simply [a]
                          if (event.keyCode == 65) {
                               selectedItems = ArrayCollection(collection).source
                               dispatchEvent(new ListEvent(ListEvent.ITEM_CLICK))
                          }
                     }
                }
                
                // add DataGridColumn with checkBoxes
                override public function set columns(value:Array):void {
                     var selectionIndicators:DataGridColumn = new DataGridColumn()
                     selectionIndicators.itemRenderer = new ClassFactory(DataGridSelectionIndicator)
                     selectionIndicators.width = 20
                     selectionIndicators.sortable = false
                     selectionIndicators.resizable = false
                     
                     value.push(selectionIndicators)
                     super.columns = value
                }
                
                override public function set selectedItems(items:Array):void {
                     super.selectedItems = items
                     // for checkBoxes indication
                     dispatchEvent(new ListEvent(ListEvent.CHANGE))
                }
                
                override public function set selectedIndices(indices:Array):void {
                     super.selectedIndices = indices
                     // for checkBoxes indication
                     dispatchEvent(new ListEvent(ListEvent.CHANGE))
                }
      
           }
      }
      

      DataGridSelectionIndicator:

      package ua.org.enginer.controls.renderers {
           
           import flash.events.Event;
           
           import mx.controls.CheckBox;
           import mx.controls.DataGrid;
           import mx.controls.listClasses.BaseListData;
           import mx.events.ListEvent;
      
           public class DataGridSelectionIndicator extends CheckBox {
      
                public function DataGridSelectionIndicator() {
                     super();
                     addEventListener(Event.CHANGE, onChange)
                     setStyle("paddingLeft", 3)
                }
                
                
                private function onChange(event:Event):void {
                     var grid:DataGrid = DataGrid(listData.owner)
                     var myIndex:int = grid.itemRendererToIndex(this)
      
                     if (selected) {
                          if (grid.selectedIndices.indexOf(myIndex)>=0) return;
                          var tmp:Array = grid.selectedIndices
                          tmp.push(grid.itemRendererToIndex(this))
                          grid.selectedIndices = tmp
                     }
                     else grid.selectedIndices = grid.selectedIndices.filter(function (...args):Boolean {
                          if (args[0] == myIndex) return false;
                          return true
                     })
                }
                
                private function onItemClick(event:ListEvent):void {
                     var grid:DataGrid = DataGrid(listData.owner)
                     var myIndex:int = grid.itemRendererToIndex(this)
                     selected = grid.selectedIndices.indexOf(myIndex)>=0
                }
                
                override public function set listData(value:BaseListData):void {
                     super.listData = value
                     
                     var grid:DataGrid = DataGrid(value.owner)
                     
                     grid.addEventListener(ListEvent.ITEM_CLICK, onItemClick)
                     //grid.addEventListener(ListEvent.CHANGE, onItemClick)
                     selected = false
                }
                
                override public function set data(value:Object):void {
                     // prevent default behavior
                }
           }
      }
      

      In attachments swf of:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
           xmlns:controls="ua.org.enginer.controls.*">
           <controls:CheckSelectionDataGrid allowMultipleSelection="true">
                <controls:dataProvider>
                     <mx:Array>
                          <mx:Object label="1"/>
                          <mx:Object label="2"/>
                          <mx:Object label="3"/>
                          <mx:Object label="4"/>
                          <mx:Object label="5"/>
                     </mx:Array>
                </controls:dataProvider>
           </controls:CheckSelectionDataGrid>
      </mx:Application>
      

       

      So if click on the last checkBox you will see unexpected behavior...