<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute" 
  backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #666666]"
  width="500" height="320" creationComplete="init()" viewSourceURL="srcview/index.html">
  
  <mx:Script>
      <![CDATA[
          import mx.events.ListEvent;
          import mx.collections.ArrayCollection;
          
          private var _currentSelection: String = "";

            private function init(): void
            {
                // set the filter function on the grid data
                myData.filterFunction = filterData;
            }
            
            private function filterData(item: Object): Boolean
            {
                // check if the current item's region is the same as the current list selection.
                if(item.region == _currentSelection)
                {
                    return true;
                }
                
                // if the current selection is the not the same as the item's region, we should not show it.
                return false;
            }
            
            // save the list selection. and refresh the grid data. this will trigger the filter function on every item in the data provider
            private function updateGridData(event: ListEvent): void
            {
                // we can save the list selection here. we can also skip this and in the filer function, check each item with the selectedItem in the list
                // it is just easier to save the list selection here.
                _currentSelection = event.itemRenderer.data.region;
                
                // refresh the grid data. this will trigger the filter function.
                myData.refresh();
            }        

      ]]>
  </mx:Script>
  
  <mx:Style>
      .gridStyle {
          selectionColor: #B5C9E6;
          verticalGridLineColor: #ffffff;
          horizontalGridLineColor: #f3f3f3;
          horizontalGridLines: true;
          verticalGridLines: false;
          rollOverColor: #CECECE;
      }
  </mx:Style>
  
  <!-- dataprovider for the grid -->
    <mx:ArrayCollection id="myData">
        <mx:source>
        <mx:Object name="Axel" region="San Francisco" category="Engineer"/>
        <mx:Object name="Jason" region="Austin" category="Engineer"/>
        <mx:Object name="Jake" region="Chicago" category="Engineer"/>
        <mx:Object name="Ryan" region="Austin" category="Owner"/>
        <mx:Object name="Jason" region="Chicago" category="Owner"/>
        <mx:Object name="Jake" region="Dallas" category="Owner"/>
        <mx:Object name="Ryan" region="New York" category="Owner"/>
        <mx:Object name="Jason" region="Austin" category="Manager"/>
        <mx:Object name="Jake" region="Houston" category="Manager"/>
        <mx:Object name="Ryan" region="Atlanta" category="Product Manager"/>
        <mx:Object name="Jason" region="Austin" category="Product Manager"/>
        <mx:Object name="Jake" region="Atlanta" category="Product Manager"/>
        <mx:Object name="Ryan" region="Houston" category="Technician"/>
        </mx:source>
    </mx:ArrayCollection>
    
  <!-- dataprovider for the list -->    
    <mx:ArrayCollection id="listData">
        <mx:source>
        <mx:Object region="Atlanta"/>
        <mx:Object region="Austin"/>
        <mx:Object region="Chicago"/>
        <mx:Object region="Dallas"/>
        <mx:Object region="Houston"/>
        <mx:Object region="New York"/>
        <mx:Object region="San Francisco"/>
        </mx:source>
    </mx:ArrayCollection>
  
  <!-- Three components here, the list on the left, the divider and the grid to the right -->
    <mx:HBox width="100%" height="100%" horizontalGap="0" paddingLeft="10" paddingBottom="10" paddingRight="10" paddingTop="10">
    
        <mx:List id="leftList" width="120" height="100%" paddingLeft="10"
            dataProvider="{listData}" labelField="region" itemClick="updateGridData(event)"/>
      
      <local:AdvancedCircleGradientBorder height="100%" width="35"
          horizontalCenter="0" verticalCenter="0" target="{leftList}" targetWidth="120" />
    
    <mx:DataGrid id="dg" dataProvider="{myData}" width="100%" height="100%" styleName="gridStyle" >
        <mx:columns>
        <mx:DataGridColumn headerText="Name" dataField="name" />
        <mx:DataGridColumn headerText="Region" dataField="region"/>
        <mx:DataGridColumn headerText="Category" dataField="category"/>
        </mx:columns>
    </mx:DataGrid>
              
    </mx:HBox>
 
</mx:Application>