1 Reply Latest reply on Jun 25, 2007 5:04 AM by chris.huston.t10

    Connect two dataGrids

    bahlsonal
      Hi, i'm having a little trouble and googled everywhere but nothing has helped me so far. So I'm turning to the pros to help me sort this one out. Please help, thanks a ton.

      I want to link two dataGrids such that the data in the second grid should be based on the selectedItem in the first grid.
      I have names of ppl in the 1st grid, and i want their respected ages to show in the 2nd grid

      I have two arrayCollections specified, one for each data grid
      for ex.
      <script>
      private function showAges()
      {
      //what to enter here to link the data of the two grids?
      ages.dataProvider.name = names.selectedItem.name; //????? THIS DOESN'T SEEM TO WORK
      }
      </script>

      <arrayCollection id="d1">
      <source>
      <object name="john">
      <object name="lisa">
      </source>
      </arrayCollection>

      <arrayCollection id="d2">
      <source>
      <object name="john" age="42"/>
      <object name="lisa" age="34"/>
      </source>
      </arrayCollection>

      <dataGrid id="names" dataProvider={d1} change="showAges()">
      <mx:DataGridColumn headerText="Names" dataField="name" />
      </dataGrid>

      <dataGrid id="ages" dataProvider={d2}>
      <mx:DataGridColumn headerText="Age" dataField="age" />
      </dataGrid>
        • 1. Connect two dataGrids
          chris.huston.t10 Level 3
          I'm not sure if I follow what you are tryiing to accomplish, but here are some thoughts.

          1. Your two arrayCollections hold redundant data so it seems from your example data that you only need your d2 collection. You can then specify which field to display in your two dataGrids only using one arrayCollection. Here is the code for that:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
          <![CDATA[
          private function showAges():void {
          ages.dataProvider = names.selectedItem;
          }
          ]]>
          </mx:Script>
          <mx:ArrayCollection id="d2">
          <mx:source>
          <mx:Object name="john" age="42"/>
          <mx:Object name="lisa" age="34"/>
          </mx:source>
          </mx:ArrayCollection>
          <mx:DataGrid x="55" y="70" dataProvider="{d2}" id="names" change="showAges()">
          <mx:columns>
          <mx:DataGridColumn headerText="Names" dataField="name"/>
          </mx:columns>
          </mx:DataGrid>
          <mx:DataGrid x="165" y="70" id="ages">
          <mx:columns>
          <mx:DataGridColumn headerText="Age" dataField="age"/>
          </mx:columns>
          </mx:DataGrid>
          </mx:Application>

          2. If you have two arrayCollections with independent data then you could link them by setting the ages dataProvider to the index of the selected names dataGrid, but this seems to be a less than ideal data structure.

          ages.dataProvider = d2.getItemAt(names.selectedIndex);

          3. Since you are only showing one row in the ages dataGrid, do you really need a dataGrid to display this data? Couldn't you use a label or textField to show the age of the selected name?

          Hope some of this is helpful.

          Vygo