Flex : How to pre-select an Item in DataGrid

Tagged Under : DataGrid, Flex

If you want to pre-select an item in a Datagrid when it loads for the first time, this is how you can do it. The idea is really simple, just set the selectedIndex property of the Datagrid to the index you want and then scroll the DataGrid to the selectedIndex. Took me a while to figure it out. However, turns out the you need to call validateNow() before you call the scrollToindex() on DataGrid.

Sample code posted below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="doInit();" creationComplete="setSelectedItem()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

// this holds the grid data
[Bindable]
private var myData:ArrayCollection = new ArrayCollection();
// change this name here to change the selected item on load
[Bindable]
private var initialFName:String = "Joe9";

private function doInit():void
{
myData.addItem({fname:"Joe",lname:"Bloggs"});
myData.addItem({fname:"Joe1",lname:"Bloggs"});
myData.addItem({fname:"Joe2",lname:"Bloggs"});
myData.addItem({fname:"Joe3",lname:"Bloggs"});
myData.addItem({fname:"Joe4",lname:"Bloggs"});
myData.addItem({fname:"Joe5",lname:"Bloggs"});
myData.addItem({fname:"Joe6",lname:"Bloggs"});
myData.addItem({fname:"Joe7",lname:"Bloggs"});
myData.addItem({fname:"Joe8",lname:"Bloggs"});
myData.addItem({fname:"Joe9",lname:"Bloggs"});
}

private function setSelectedItem():void
{
var gData:Object = dGrid.dataProvider;
for(var i:Number=0; i < gData.length; i++)
{
var thisObj:Object = gData.getItemAt(i);
if(thisObj.fname == initialFName)
{
dGrid.selectedIndex = i;
//sometimes scrollToIndex doesnt work if validateNow() not done
dGrid.validateNow();
dGrid.scrollToIndex(i);
}
}
}
]]>
</mx:Script>

<mx:DataGrid id="dGrid"  dataProvider="{myData}"  visible="true">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="FirstName" />
<mx:DataGridColumn dataField="lname" headerText="LastName" />
</mx:columns>
</mx:DataGrid>

</mx:Application>

| Posted by Anuj Gakhar in Flex

Comments:

9 Responses to “Flex : How to pre-select an Item in DataGrid”

paravoice on 31 Jan 2008 at 3:51 am #

Hi
I try, but it doesn’t work.
Do you have any other ways?
If you have another one, please send me a mail, thanks so much.
Anuj Gakhar on 31 Jan 2008 at 7:28 am #

@paravoice, that works for me. Can you tell me exactly if you are getting any error or what?
paravoice on 31 Jan 2008 at 7:57 am #

Maybe we have a diffrent situation.
I use a Tree , not a DataGrid .
Now I use a stupid method to expend the tree until the item which I want to select is visible , then select the item.
My english is not good, so I hope you can understand.
Anuj Gakhar on 31 Jan 2008 at 8:09 am #

OK, I havent tried this on Tree control but theoretically, it should work the same. I will try to put together an example today if I get some time.
Anuj Gakhar on 4 Feb 2008 at 11:29 am #

@paravoice, do you have a code snippet you can show so I can see what you are trying and why its not working.
paravoice on 11 Feb 2008 at 2:45 am #

Sorry, last week I was on vocation.
It’s the most important festival in China.
Here is a code snippet, the node that the label property’s value is ‘Product Management’ should be selected, but it’s not true.

Thank you for your help.
paravoice on 11 Feb 2008 at 2:52 am #

Oh, it seems the code cannot be pasted.
I have sent the code to you by mail.
JabbyPanda on 22 Feb 2008 at 10:38 am #

The call of “validateNow” before executing “scrollToIndex” is only needed if dataProvider of the List derived component was dynamically changed at the run-time
Mike on 28 Apr 2008 at 10:18 pm #

It doesn’t seem to work for me neither. When I run this, none of the rows are selected. Could you maybe take a look at my code?

Anuj @ ColdFusion, Flex and some more….