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

    click events of two datagrids interfere

    flex345345346 Level 1

      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

       

      mxml:

       

       

      <s:Panel>

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

      <mx:columns>

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

      </mx:columns>

      </mx:DataGrid>

       

      <mx:DataGrid id="dataGrid2">

      <mx:columns>

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

      <mx:DataGridColumn headerText="Action">

      <mx:itemRenderer>

      <fx:Component>

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

      </fx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

      </mx:columns>

      </mx:DataGrid>

      </s:Panel>

       

       

      actionscript:

       

       

      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;

      product.setMainPicture(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.