Flex: Scrolling to a particular row of data of a Datagrid

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.