Changing dataprovider of a datagrid on change event of another datagrid

I have two datagrids: - Division - Members Both have single columns. Selecting one item from Divsions datagrid should display members of that Division in the Members datagrid. But following code has some problem and Members of a particular division do not show up when respective Divsion is clicked.

Following are some snippets of the related code. Hope someone can spot an error in it.

private var divs_array:Array = ['Division A','Division B'];
[Bindable] private var divisions:ArrayCollection = new ArrayCollection(divs_array);

private var memA_array:Array = ['Jo Koy','Stephan Lynch', 'Charlie Murphy', 'Michael'];
[Bindable] private var mems_of_A :ArrayCollection = new ArrayCollection(memA_array);

private var mem开发者_运维问答B:Array = ['Ali','Ikram'];
[Bindable] private var mems_of_B:ArrayCollection = new ArrayCollection(memB_array);         

private function divDataGridChange():void{
  if (divDataGrid.selectedIndex==0)
    memDataGrid.dataProvider=mems_of_A;
  else (divDataGrid.selectedIndex==1)
    memDataGrid.dataProvider=mems_of_B;
}

private function getCombinedUserNameLabel(item:Object, col:DataGridColumn):String
{
    return item.firstName + " " + item.lastName;
}

<mx:DataGrid id="divDataGrid" dataProvider="{divisions}" width="150" height="265" change="{divDataGridChange()}" selectedIndex="0">
  <mx:columns>
    <mx:DataGridColumn width="150" headerText="Select a Division" />
  </mx:columns>
</mx:DataGrid>
<mx:DataGrid id="memDataGrid" dataProvider="{mems_of_A}" change="{monDataGridChange()}" selectedIndex="0">
  <mx:columns>
    <mx:DataGridColumn width="150" headerText="Select a User" labelFunction="{getCombinedUserNameLabel}" />
  </mx:columns>
</mx:DataGrid>

Take care to your conditionals statements.

private function divDataGridChange():void{
  if (divDataGrid.selectedIndex==0)
    memDataGrid.dataProvider=mems_of_A;
  else (divDataGrid.selectedIndex==1)
    memDataGrid.dataProvider=mems_of_B;
}

should be

private function divDataGridChange():void{
  if (divDataGrid.selectedIndex==0)
    memDataGrid.dataProvider=mems_of_A;
  else if (divDataGrid.selectedIndex==1)
    memDataGrid.dataProvider=mems_of_B;
}

http://livedocs.adobe.com/flex/3/html/help.html?content=03_Language_and_Syntax_15.html

Add this line to the method divDataGridChange() : memDataGrid.invalidateDisplayList();

Updated method :

private function divDataGridChange():void{
            if (divDataGrid.selectedIndex==0)
                memDataGrid.dataProvider=mems_of_A;
            else if (divDataGrid.selectedIndex==1)
                memDataGrid.dataProvider=mems_of_B;

            memDataGrid.invalidateDisplayList();
        }

Also replace the event from "change" to "itemclick".The divisions datagrid tag will be

<mx:DataGrid id="divDataGrid" dataProvider="{divisions}" width="150" height="265" itemClick="{divDataGridChange()}" selectedIndex="0" >