How to select/deselect rows of the datagrid

[malavika]

Hi Every one,
I'm a new bee to Flex, I have requirement where
i need to select/deselect all the rows of a datagrid,i.e.i have two
check boxes(select and deselect)on click of select checkbox all the
rows of the datagrid have to be selected and vice-versa.I'm adding
checkboxes to datagrid using ItemRenderer.
Could any guide me to resolve this problem,


Thanks in Advance,
Malavika Sharama

[Vinod M Jacob]

Try this

private function selectAll():void
{
var a:Array = [], i:Number;
var num:Number = myDataProvider.length;
for (i=0;i<num;i++) a[i] = i;
myDataGrid.selectedIndices = a;

[malavika]

Hi,
the function which you provided is selecting all the rows,actually my
requirement is to check all the rows on click of a button.....i.e. i'm
providing one check box for each row,so every check box should be
selected = true;

Thanks & Regards,
Malavika.

[Ashish]

Hi,

You can just modify Vinod's code, as well you will have to add an
additional boolean field say isRowSelected to the data provider of
your data grid and bind the itemrender's (in your case its checkBox)
selected value to that field.
So your AS code should look like

private function selectAll():void
{
var a:Array = [], i:Number;
var num:Number = myDataProvider.length;
for (i=0;i<num;i++)
{
a[i] = i;

myDataGrid.dataProvider[0]=true;

//Remember your isRowSelected field is first in dp
}
myDataGrid.selectedIndices = a;

}

And in dataGrid you should bind the itemrender's selected value to
{data.isRowSelected}\

This should work,

-Ashish Yeole
Persistent Systems Ltd.

[Ankesh]

Hi Malavika,

 Try this.

<mx:DataGridColumn headerText="Select">

                <mx:headerRenderer>

              <mx:Component>

              <mx:Canvas width="100%" height="100%">

              <mx:Script>

              <![CDATA[

             

              private function processSelection():void {

              if ( headerCheckBox.selected ) {

              owner.dispatchEvent(new Event("selectAll"));

              } else {

              owner.dispatchEvent(new Event("deselectAll"));

              }

              }

             

              private function init():void {

      owner.addEventListener("selectAll",select);

      owner.addEventListener("deselectAll",deselect);

      }

     

      private function select(event:Event):void {

      headerCheckBox.selected = true;

      }

     

      private function deselect(event:Event):void {

      headerCheckBox.selected = false;

      }

             

              ]]>

              </mx:Script>

              <mx:CheckBox click="processSelection()" id="headerCheckBox" creationComplete="init()"/>

             

              </mx:Canvas>

              </mx:Component>

              </mx:headerRenderer>

          <mx:itemRenderer>

          

      <mx:Component>

      <mx:Canvas width="100%" height="100%">

      <mx:Script>

      <![CDATA[

     

      private function init():void {

      owner.addEventListener("selectAll",select);

      owner.addEventListener("deselectAll",deselect);

      }

     

      private function select(event:Event):void {

      check.selected = true;

      }

     

      private function deselect(event:Event):void {

      check.selected = false;

      }

     

      ]]>

      </mx:Script>

      <mx:CheckBox id="check" creationComplete="init()"/>

      </mx:Canvas>

      </mx:Component>

          </mx:itemRenderer>

              </mx:DataGridColumn>

Thanks & Regards,

Ankesh.

--
Thanks & Regards.
Your's Ankesh.
SAP Labs India Pvt Ltd.
Mobile: 9945325525

[Ashish]

Hi,

You can just modify Vinod's code, as well you will have to add an
additional boolean field say isRowSelected to the data provider of
your data grid and bind the itemrender's (in your case its checkBox)
selected value to that field.
So your AS code should look like

private function selectAll():void
{
var a:Array = [], i:Number;
var num:Number = myDataProvider.length;
for (i=0;i<num;i++)
{
a[i] = i;

myDataGrid.dataProvider[0]=true;

//Remember your isRowSelected field is first in dp
}
myDataGrid.selectedIndices = a;

}

And in dataGrid you should bind the itemrender's selected value to
{data.isRowSelected}\

This should work,

-Ashish Yeole
Persistent Systems Ltd.


On Apr 21, 3:46 pm, malavika <malavikasharm...@gmail.com> wrote:

[malavika]

Hi Ashish,
the code which you provided me is helping me out to
select the rows,but i could not select all the checkBoxes, I'm
writing out my code out there just check it out,and let me know the
mistake that i have done,

<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
import mx.controls.Alert;

public function onSelect():void{
var a:Array = [],i:Number
var num:Number = arr.length;
for(i=0;i<num;i++){
a[i] = i;
dg.dataProvider[0] = true;
}

dg.selectedIndices = a;

}

]]>
</mx:Script>
<mx:ArrayCollection id="dataGridProvider" >
<mx:source>
<mx:Array id="arr">
<mx:Object Test1="User1" Test2="Sample1"
Test3="Samp1"/>
<mx:Object Test1="User2" Test2="Sample2"
Test3="Samp2"/>
<mx:Object Test1="User3" Test2="Sample3"
Test3="Samp3"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:VBox width="100%" height="100%">
<mx:VBox >
<mx:DataGrid dataProvider="{dataGridProvider}" id="dg"
>
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:VBox >

<mx:CheckBox id="chkValue" label="Follow-Up All" >

</
mx:CheckBox>
</mx:VBox>

</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn dataField="Test1"
headerText="Test1"
width="90" />
<mx:DataGridColumn dataField="Test2"
headerText="Test2"
width="90" />
<mx:DataGridColumn headerText="Test3"
dataField="Test3" width="90"/

</mx:columns>
</mx:DataGrid>
<mx:HBox>
<mx:Button label="Select" id="chkSelect"
click="onSelect();"/>
<mx:Button label="Deselect" />
</mx:HBox>
</mx:VBox>
</mx:VBox>

Thanks & Regards,
Malavika

[easwara]

Hi,
Here is the updated code, which fulfills the requirement.
*****************************************************************
The code to be noted is:
<mx:CheckBox label="{data.name}" selected="{data.isRowSelected}"/>
and
myDataProvider[i].isRowSelected = flgSelect;
*****************************************************************
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:CheckBox id="myCheckBox" x="203" y="45" label="Check to Select
All" change="handleCheckBoxSelection();" color="#800000"/>

<mx:DataGrid id="myDataGrid" dataProvider="{myDataProvider}" x="200"
y="71">

<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>

<mx:VBox paddingLeft="5">
<mx:CheckBox label="{data.name}"
selected="{data.isRowSelected}"/>

</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn dataField="name"/>
<mx:DataGridColumn dataField="age"/>
<mx:DataGridColumn dataField="comment"/>
</mx:columns>
</mx:DataGrid>

<mx:Script>
<![CDATA[

import mx.controls.Alert;
private var myDataProvider:Array = new Array({isRowSelected: false,
name:'Name1', age:10, comment:'Comment1'}, {isRowSelected: false,
name:'Name2', age:20, comment:'Comment2'}, {isRowSelected: false,
name:'Name3', age:30, comment:'Comment3'}, {isRowSelected: false,
name:'Name4', age:40, comment:'Comment4'});

private function handleCheckBoxSelection():void
{
if(myCheckBox.selected)
{
myCheckBox.label = "Uncheck to De-select All";
selectOrDeselect(true);
}
else
{
myCheckBox.label = "Check to Select All";
selectOrDeselect(false);
}
}

private function selectOrDeselect(flgSelect:Boolean)
{
var selIndicesArr:Array = [];
var dataProvLen:int = myDataProvider.length;
for(var i:int = 0; i < dataProvLen; i++)
{
selIndicesArr[i] = i;
myDataProvider[i].isRowSelected = flgSelect;
}

if(flgSelect)
{
myDataGrid.selectedIndices = selIndicesArr;
}
else
{
myDataGrid.selectedIndices = [];
}
}

]]>
</mx:Script>

</mx:Application>


Regards,
Easwara M

On Apr 22, 12:13 pm, malavika <malavikasharm...@gmail.com> wrote:
> Hi Ashish,
> the code which you provided me is helping me out to

> select the rows,but i could not select all thecheckBoxes, I'm

> <mx:DataGriddataProvider="{dataGridProvider}" id="dg"

> > And indataGridyou should bind the itemrender's selected value to

> > {data.isRowSelected}\
>
> > This should work,
>
> > -Ashish Yeole
> > Persistent Systems Ltd.
>
> > On Apr 21, 3:46 pm, malavika <malavikasharm...@gmail.com> wrote:
>
> > > Hi,
> > > the function which you provided is selecting all the rows,actually my
> > > requirement is to check all the rows on click of a button.....i.e. i'm
> > > providing one check box for each row,so every check box should be
> > > selected = true;
>
> > > Thanks & Regards,
> > > Malavika.
>
> > > On Apr 21, 3:35 am, Vinod M Jacob <flex4...@gmail.com> wrote:
>
> > > > Try this
>
> > > > private function selectAll():void
> > > > {
> > > > var a:Array = [], i:Number;
> > > > var num:Number = myDataProvider.length;
> > > > for (i=0;i<num;i++) a[i] = i;
> > > > myDataGrid.selectedIndices = a;
>
> > > > }
>
> > > > On Apr 21, 2:31 pm, malavika <malavikasharm...@gmail.com> wrote:
>
> > > > > Hi Every one,
> > > > > I'm a new bee to Flex, I have requirement where

> > > > > i need to select/deselect all the rows of adatagrid,i.e.i have two

> > > > > check boxes(select and deselect)on click of select checkbox all the

> > > > > rows of thedatagridhave to be selected and vice-versa.I'm adding
> > > > >checkboxestodatagridusing ItemRenderer.

[Ashish]

HI Malvika,

what easwara has suggested is absolutely correct. Sorry I should have
given you the code snipet
but i had given something like this which says the same

"And in dataGrid you should bind the itemrender's selected value to
{data.isRowSelected}"

here the checkbox is your item renderer and you just needed to bind
its selected property with data.isRowSelected.

Thanks easwara :)

-Ashish Yeole
Persistent Systems Ltd.

[malavika]

Thanks alot Easwara and Ashish,your suggesstions helping me alot.
Easwara the code which you have given worked fine. Actually my
requirement is ... i have some rows on my DataGrid(say....10rows),i
need to take the records that are checked(say....2,4,7),and need to
populate the checked rows on another DataGrid. I was able to do this
by using the default property(selectedItems) of DataGrid.but, how come
i do that using checkBox.

Thanks & Regards,

Malavika.

[easwara]

Hi Malavika,
On click of the check box, update the flag in the data provider.
Then while moving data from the source to destination data grid, get
the data corresponding to all the selected check boxes.
Following is the code which does the same. You can modify this by
including data binding for the data provider of the grids.

I hope this is what you need.

**********************************************************************************************

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:CheckBox id="chkBoxSelectAll" x="54" y="39" label="Check to
Select All" color="#800000"
change="handleCheckBoxSelection();"/>

<mx:DataGrid id="mySourceDataGrid"
dataProvider="{mySourceDataProvider}" x="54" y="65" width="365">

<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingLeft="5">
<mx:CheckBox
label="{data.name}" selected="{data.isRowSelected}"

click="outerDocument.updateSelectedRowFlag(event);"/>

</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name"/>
<mx:DataGridColumn dataField="age"/>
<mx:DataGridColumn dataField="comment"/>
</mx:columns>
</mx:DataGrid>

<mx:Button id="btnMoveSelectedRows" x="421" y="126" height="28"
width="154"
label="Move Selected Rows &gt;&gt;" click="moveSelectedRows()"/>

<mx:DataGrid id="myDestinationDataGrid" x="579" y="65" width="365"
dataProvider="{myDestinationDataProvider}">

<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingLeft="5">
<mx:CheckBox

label="{data.name}" selected="{data.isRowSelected}" enabled="false"/>

</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name"/>
<mx:DataGridColumn dataField="age"/>
<mx:DataGridColumn dataField="comment"/>
</mx:columns>
</mx:DataGrid>

<mx:Script>
<![CDATA[

import mx.controls.Alert;

private var mySourceDataProvider:Array = new

Array({isRowSelected: false, name:'Name1', age:10,
comment:'Comment1'}, {isRowSelected: false, name:'Name2', age:20,
comment:'Comment2'}, {isRowSelected: false, name:'Name3', age:30,
comment:'Comment3'}, {isRowSelected: false, name:'Name4', age:40,
comment:'Comment4'});

private var myDestinationDataProvider:Array = [];

private function handleCheckBoxSelection():void
{
if(chkBoxSelectAll.selected)
{
chkBoxSelectAll.label = "Uncheck to De-
select All";
selectOrDeselect(true);
}
else
{
chkBoxSelectAll.label = "Check to Select
All";
selectOrDeselect(false);
}
}

private function selectOrDeselect(flgSelect:Boolean):void
{
var selIndicesArr:Array = [];
var dataProvLen:int = mySourceDataProvider.length;

for(var i:int = 0; i < dataProvLen; i++)
{

selIndicesArr.push(i);
mySourceDataProvider[i].isRowSelected =
flgSelect;
}

if(flgSelect)
{
mySourceDataGrid.selectedIndices =
selIndicesArr;
}
else
{
mySourceDataGrid.selectedIndices = [];
}
}

public function
updateSelectedRowFlag(event:MouseEvent):void
{
var currSource:CheckBox = CheckBox(event.currentTarget);
var selIndex:int;
if(currSource.selected)
{
selIndex = mySourceDataGrid.selectedIndex;
mySourceDataProvider[selIndex].isRowSelected = true;
}
else
{
selIndex = mySourceDataGrid.selectedIndex;
mySourceDataProvider[selIndex].isRowSelected = false;
}
}

private function moveSelectedRows():void
{
var selIndicesArr:Array = [];
var dataProvLen:int = mySourceDataProvider.length;

for(var i:int = 0; i < dataProvLen; i++)
{

if(mySourceDataProvider[i].isRowSelected)
{
selIndicesArr.push(i);
}
}

mySourceDataGrid.selectedIndices = selIndicesArr;

myDestinationDataProvider =[];
var noOfRowsSelected:int =
mySourceDataGrid.selectedIndices.length;
for(var j:int = 0; j < noOfRowsSelected; j++)
{
var selIndex:int = mySourceDataGrid.selectedIndices[j];
myDestinationDataProvider.push(mySourceDataProvider[selIndex]);
}
myDestinationDataGrid.dataProvider = myDestinationDataProvider;
}

]]>
</mx:Script>

</mx:Application>
**********************************************************************************************

Regards,
Easwara M

> ...
>
> read more »

[malavika]

Hi Easwara,
The code which you provided exactly matched my requirement,I
could Complete out my task.
Thank Q very much.

Thanks & Regards,
Malavika.

> ...
>
> read more »