I was looking for a much more easier way of scrolling to a particular row of data that belongs to the dataGrid. And I managed to find this.
Source Code for the main application - 'SimpleDataGridScrolling.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Declarations>
<fx:XMLList id="records">
<record>
<id>01</id>
<name>Eric</name>
<address>3987 Mauris Rd.</address>
</record>
<record>
<id>02</id>
<name>Bradley</name>
<address>692-535 Id Street</address>
</record>
<record>
<id>03</id>
<name>Flynn</name>
<address>191-491 Ullamcorper Road</address>
</record>
<record>
<id>04</id>
<name>Akeem</name>
<address>400-2992 Donec Rd.</address>
</record>
<record>
<id>05</id>
<name>Shad</name>
<address>P.O. Box 490, 9377 Lorem, Avenue</address>
</record>
<record>
<id>06</id>
<name>Brady</name>
<address>P.O. Box 203, 418 Amet Street</address>
</record>
<record>
<id>07</id>
<name>Igor</name>
<address>5584 Ultrices Av.</address>
</record>
<record>
<id>08</id>
<name>Herman</name>
<address>Ap #316-3329 Fermentum Avenue</address>
</record>
<record>
<id>09</id>
<name>Martin</name>
<address>932-8151 Arcu. Road</address>
</record>
<record>
<id>10</id>
<name>Micah</name>
<address>P.O. Box 244, 8472 Lacus. Ave</address>
</record>
<record>
<id>11</id>
<name>Isaiah</name>
<address>3798 Risus. Avenue</address>
</record>
<record>
<id>12</id>
<name>Amos</name>
<address>Ap #377-2082 Mollis. Road</address>
</record>
<record>
<id>13</id>
<name>Dominic</name>
<address>P.O. Box 801, 2289 Malesuada Rd.</address>
</record>
<record>
<id>14</id>
<name>Ethan</name>
<address>Ap #509-2519 Non, Avenue</address>
</record>
<record>
<id>15</id>
<name>Julian</name>
<address>9373 Ut Avenue</address>
</record>
<record>
<id>16</id>
<name>Yoshio</name>
<address>120-7486 Ornare, Av.</address>
</record>
<record>
<id>17</id>
<name>Harlan</name>
<address>Ap #821-3336 Velit. Av.</address>
</record>
<record>
<id>18</id>
<name>Rigel</name>
<address>Ap #689-7263 Consectetuer Rd.</address>
</record>
<record>
<id>19</id>
<name>Holmes</name>
<address>Ap #790-6923 Tincidunt St.</address>
</record>
<record>
<id>20</id>
<name>Aidan</name>
<address>948-115 Imperdiet Street</address>
</record>
<record>
<id>21</id>
<name>Colin</name>
<address>P.O. Box 454, 9501 Lectus Avenue</address>
</record>
<record>
<id>22</id>
<name>Palmer</name>
<address>Ap #402-1566 Varius Road</address>
</record>
<record>
<id>23</id>
<name>Sylvester</name>
<address>852-8076 Enim. St.</address>
</record>
<record>
<id>24</id>
<name>Cole</name>
<address>876-4551 Ornare Ave</address>
</record>
<record>
<id>25</id>
<name>Yardley</name>
<address>P.O. Box 256, 4107 Tempor Rd.</address>
</record>
<record>
<id>26</id>
<name>Coby</name>
<address>P.O. Box 467, 7273 Nulla Street</address>
</record>
<record>
<id>27</id>
<name>Beau</name>
<address>743-8871 Sem Rd.</address>
</record>
<record>
<id>28</id>
<name>Kermit</name>
<address>Ap #183-8772 Magna. St.</address>
</record>
<record>
<id>29</id>
<name>Josiah</name>
<address>P.O. Box 645, 453 Ornare, St.</address>
</record>
<record>
<id>30</id>
<name>Elijah</name>
<address>537 Turpis Avenue</address>
</record>
</fx:XMLList>
<s:XMLListCollection id="tempXmlCollection"
source="{records}"/>
<s:XMLListCollection id="tempXmlCollection1"
source="{records.id}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.List;
import spark.events.IndexChangeEvent;
/**
* Upon changing the selection of the drop down menu,
* we would need to loop through the data of the
* datagrid and find the one that matches the
* selection from the drop down menu and we would
* select the row and scroll to that row.
*/
protected function changeHandler(event:IndexChangeEvent):void
{
var tempData:Object = ddId.selectedItem;
var tempDP:XMLListCollection =
gridData.dataProvider as XMLListCollection;
for(var i:int = 0; i < tempDP.length; i ++)
{
if(tempDP.getItemAt(i).id == tempData)
{
gridData.selectedIndex = i;
//This works in Flex 4 Spark Components.
gridData.grid.verticalScrollPosition =
gridData.grid.getCellY(i, 0);
//This works in Flex 3 Components but not
//for Spark Components.
//gridData.scrollToIndex(i);
break;
}
}
}
]]>
</fx:Script>
<s:VGroup verticalAlign="middle"
horizontalAlign="center"
width="100%"
height="100%">
<s:HGroup verticalAlign="middle"
horizontalAlign="center" >
<s:Label text="Select a ID:"/>
<s:DropDownList id="ddId"
dataProvider="{tempXmlCollection1}"
change="changeHandler(event)"/>
</s:HGroup>
<s:DataGrid id="gridData"
height="200"
width="500"
resizableColumns="true"
dataProvider="{tempXmlCollection}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="id"
minWidth="50"
headerText="ID"/>
<s:GridColumn dataField="name"
minWidth="150"
headerText="Name"/>
<s:GridColumn dataField="address"
minWidth="280"
headerText="Address"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:Application>
* Click
here for the demo shown in this post.
^ Click
here for the source files for the demo.