[flexcoders] DataGrid MultipleSelectio with mouse only

[Dharmendra Chauhan]

I want to provide functionality where in user can select multiple 
rows in dg by holding left mouse key and dragging over the dg.

 

I have also designed a sample app for this but Only issue with 
approach is that It(mOver.target.listData.rowIndex) does not 
consistently  return rowIndex ,sometimes It throws error `Property 
listData not found on mx.controls.listClasses.ListBaseContentHolder 
and there is no default value"  as a result of it ,few row left 
unselected. 

This error occurs only when user tries to select rows with fast 
mouser movement.

  

 

<?xml version="1.0" encoding="utf-8"?>

 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
layout="absolute" creationComplete="init()"

      backgroundColor="#b3b4ae" >

 

      <mx:Script >

            <![CDATA[

                  import mx.charts.HitData;

                  import 
mx.controls.dataGridClasses.DataGridItemRenderer;

                  import mx.events.ListEvent;

                  import flash.utils.describeType;

                  import flash.utils.getDefinitionByName;

                  import mx.controls.Alert;

                  import mx.formatters.DateFormatter;

                  import mx.collections.ArrayCollection;

                  // include "MatsFormatter.as"

             var selectedArr:Array = new Array();

           var arrCol:ArrayCollection     ;           

            function init():void{

            

            

             arrCol = new ArrayCollection([{name:'AA', age:25}, 
{name:'BB', age:15}, 

                                       {name:'CC', age:23},
{name:'DD', age:25}, {name:'EE', age:15}, 

                                       {name:'FF', age:23},
{name:'GG', age:25}, {name:'HH', age:15}, 

                                       {name:'II', age:23}]);

            

            dg.dataProvider = arrCol;

            }

                  

            var isMouseDown:Boolean = false;

                  

            public function mouseDownFunc
(mDn:flash.events.MouseEvent  ):void{

            //Alert.show("mouseDownFunc");

            isMouseDown = true;

            }

 

            public function mouseUpFunc
(mUp:flash.events.MouseEvent  ):void{

             // Alert.show("mouseUpFunc");

               isMouseDown = false;

               // Work Around to select iterleaved unselected row 

             /*   var selectedArr2:Array = new Array();

               var firstRowIndex :int = dg.selectedIndices[0]

               var lastRowIndex :int = dg.selectedIndices
[dg.selectedIndices.length -1 ]

               if(firstRowIndex < lastRowIndex){

                  for(var i:int = firstRowIndex; firstRowIndex<= 
lastRowIndex;firstRowIndex++)

                       selectedArr2.push(firstRowIndex);

               }else{

                  for(var j:int = lastRowIndex; lastRowIndex<= 
firstRowIndex;lastRowIndex++)

                      selectedArr2.push(lastRowIndex);

                }

               dg.selectedIndices = selectedArr2; */

            }

 

            public function mouseOverFunc
(mOver:MouseEvent,dgCol:ListEvent = null ):void{

              var  rend:Object;

              if(isMouseDown){

               try{

               selectedArr = dg.selectedIndices;

               selectedArr.push(mOver.target.listData.rowIndex); 

               dg.selectedIndices = selectedArr;

             

               

              }catch(e:Error){

              //  rend = mOver.relatedObject ; 

               

               }

              }

           }

      /*     public function itemRollOverFunc
(itmRollOver:ListEvent):void{

              if(isMouseDown){

                     try{

                     selectedArr = dg.selectedIndices;

                     selectedArr.push(itmRollOver.rowIndex); 

                     dg.selectedIndices = selectedArr;

                    }catch(e:Error){

                     trace(e.getStackTrace());

                    }

                   }

             } */

 

            ]]>

            

      </mx:Script> 

      

    <mx:Style>

             DataGrid {

           backgroundColor:#b3b4ae; 

           borderColor:#66696B;

           verticalGridLineColor :#808080;

           horizontalGridLineColor :#808080;

           themeColor:#0A246A;

           borderStyle:solid;

           fontSize: 8;

           headerStyleName: "dgHeaderStyles";

          }

        .dgHeaderStyles {

            fontSize: 10;

            textAlign: left;

            backgroundColor: #d4d0c8;

            fontFamily :san Sarif;

    

          }

 

         

     </mx:Style>

<mx:Panel layout="absolute" title="MATS Trade Management Console" 
id="gridPanel" left="5" right="5" top="5" bottom="5" 
themeColor="#B3B4AE">

      <mx:DataGrid  width="50%" height="50%" 
headerColors="[#d4d0c8,#d4d0c8]" horizontalScrollPolicy="auto" 
allowMultipleSelection="true" id="dg"

                   horizontalGridLines="true"    rowHeight="30"

                  selectionColor="#FFFFFF"          top="0" 
bottom="0"  

                   mouseDown="mouseDownFunc(event)"  
mouseUp="mouseUpFunc(event)" mouseOver="mouseOverFunc(event)"

                  

               >

               

            <mx:columns>

                  <mx:DataGridColumn           id="status" 
wordWrap="false"  headerText="Name " dataField="name"/>

                  <mx:DataGridColumn            id="age"  
dataField="age"      headerText="Age"/>

                  

            </mx:columns>

      </mx:DataGrid>

 

</mx:Panel>

 

</mx:Application>