2 Replies Latest reply on Aug 23, 2011 6:48 AM by flex345345346

    click events of two datagrids interfere


      I have two datagrids on a panel. The first datagrid contains a list of items (products) and the second datagrid's dataProvider depends on the selected item of the first datagrid (picture list of the selected product).


      That means, when I click on a row in datagrid 1, the data of datagrid 2 changes.


      Datagrid2 contains a column with radioButtons.


      Now my problems:


      1. If I click on a radioButton in datagrid 2, the highlighted row in datagrid 1 is deselected

      2. If I click in the same row in datagrid 1 several times, radiobuttons in datagrid 2 select and deselect seemingly randomly






      <mx:DataGrid id="dataGrid1" dataProvider="{productList}" itemClick="populateDatagrid2DataProvider(event)">


      <mx:DataGridColumn headerText="Name" dataField="name" />




      <mx:DataGrid id="dataGrid2">


      <mx:DataGridColumn headerText="Name" dataField="name"/>

      <mx:DataGridColumn headerText="Action">



      <s:RadioButton click="outerDocument.setMainPicture();" selected="{outerDocument.isMainPicture(data)}"/>












      public function populateDatagrid2DataProvider(event:ListEvent):void


      var product:Product = dataGrid1.selectedItem as Product;

      dataGrid2.dataProvider = product.getPictureList();



      public function isMainPicture(object:Object):Boolean


      var picture:Picture = object as Picture;

      var product:Product = dataGrid1.selectedItem as Product;


      if (product.getMainPicture().getPictureNumber() == picture.getPictureNumber()) {

      return true;



      return false;





      public function setMainPicture():void {

      var product:Product = dataGrid1.selectedItem as Product;

      var picture:Picture = dataGrid2.selectedItem as Picture;



        • 1. Re: click events of two datagrids interfere
          flex345345346 Level 1

          I implemented a binding, so datagrid2 is binded to the selected item in datagrid 2. It partly solved the problem of the randomly selected and deselected radiobuttons.


          <mx:DataGrid id="dataGrid2" dataProvider="{(dataGrid1.selectedItem as Product).getPictureList()}">


          Still, if I select a radioButton in datagrid2, the row in datagrid1 gets deselected. Accordingely, the dataprovider of datagrid2 gets empty.

          • 2. Re: click events of two datagrids interfere
            flex345345346 Level 1

            I solved the problem. I thought, the click events would cause the problem, but the problem layd in the handling of click events. I ended up removing and changing items in the datagrid1, so the basis for the binding for datagrid2 disappeared.


            I stopped doing that by removing some of the event handling code, added an itemUpdated() to the pictureList in the product and now the two datagrids work smoothly together.