RE: [flexcoders] get rowIndex in datagird's mouseOver Function

[Alex Harui]

mouseEventToItemRenderer

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf 
Of Dharmendra Chauhan
Sent: Saturday, January 10, 2009 10:34 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] get rowIndex in datagird's mouseOver Function


My requiremnt is to get rowIndex in mouseover Function in DataGird so
that I can use that index to select perticuler row of
datagrid.ItemRollover Function does not get called when I hold left
mouse key and drag it over dg.
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
mouse movement.

Here is my sample app code :-

<?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>