Bind Data in Two Datagrids

[JamesFaron]

I have modified a widget to have two floating datagrids. One datagrid (datagrid 1) is a copy of Robert's floating datagrid, related to the source widget in the same manner as the SearchWidget Floating DG is to the SearchWidget. I have a second 'simple' floating datagrid (datagrid 2) composed of records that are related to the records in datagrid1, received from a sql database via a webservice. So, there is a one to many relationship between the datagrids, datagrid 1 having singular records bound to graphic attributes on the map, datagrid 2 having many event records from a database. The data has one field to use as a link field or foreign key: datagrid 1:'STOP_ID' to datagrid2:'STOPID'. The question I have is how to create a bind between the datagrids so that when a user selects a record in datagrid 1, the related records in datagrid 2 will also be selected (i.e. highlighted)? I have combed the internet and I cannot find anything quite like this: there are a lot of examples of binding two datagrids on one datasource, or creating a second datasource on selected values from a first datasource in the same application, but what I am hoping to do is more like a database query, i.e. two distinct datasources linked by the value in one attribute field.

As always, any help or pointers are greatly appreciated.

Jim Faron
Austin Independent School District
Austin, TX

[ReneRubalcava]

If the two datagrids are in the same widget and you have already called the webservice once to pull all the related data in the second widget, you could use a filter function on the source for the second datagrid that would change based on what is selected in the first datagrid.

something likethis pseudocode

[Bindable]
protected var mySource:ArrayCollection;
protected var content:String;
<mx:DataGrid id="dg1" itemClick="datagrid1_itemClickHandler(event)"/>
<mx:DataGrid id="dg2" dataProvider="{mySource}" />

// filter
protected function datagrid1_itemClickHandler(event:ListEvent):void {
 content = event.currentTarget.selectedItem["fieldname'];
 mySource.filterFunction = filterData;
 mySource.refresh();
}

// this should work, may have to play with it
protected function filterData(item:Object):Boolean {
 var target:String = "fieldname";
 var key:String = String(item[target]).toLowerCase();
 return key.indexOf(content) != -1;
}

This way you don't need to send constant requests to a web service.

If I'm understanding you right, this could be one way to go about it.

[JamesFaron]

Rene,
Thanks for the response. I will try to apply your suggestions, although I am not sure that it applies directly to my problem. I get all the results that I need, as I need them (I don't want to limit the results in the second datagrid to just the filtered items based on selection in the first grid) I would like to be able to select a row in datagrid 1 that would result in the related records in datagrid 2 being selected  (I can work out a filter later on as an additional user generated event).

To rephrase the question in hopefully simpler terms: I have two title windows with datagrids that have unique datasources in one widget. Datagrid 1 has a datasource that is composed of graphic attributes that are the result of query. Datagrid 2 has a datasource that is actually the result of a WebService operation (contentHandler(event) with resultFormat = "object" (this is the only way I could get floating datagrid2 to work). The link between the two datasources is the contents of one field(datagrid1 "STOP_ID", datagrid2 "STOPID").

I may be grabbing at straws here, since I am hoping for database functionality in rest api. I am pretty close though, so hopefully I can get it done.

Thanks,
Jim Faron

[ReneRubalcava]

So after your queries are done, you'd have something like this.

DataGrid1
STOPID
1
2
3

DataGrid2
STOPID NAME
1..........Name1
1..........Name2
2..........Name3
2..........Name4
3..........Name5
3..........Name6

Then you click on STOPID 1 and the STOPID == 1 in DataGrid2 would get selected right?

Try something like this.
http://gist.github.com/581418#file_flex_data_grid_query

Set allowMultipleSelection="true" on DataGrid2 and then find the matches in Datagrid2 and make an array of their indices. Then you can set that array to DataGrid2.selectedIndices.

[JamesFaron]

Rene,

Thanks again for the follow up. Your method works in an environment of one application generating and defining the two grids. My problem is that the floating datagrids are separate, generated in one widget by two different functions but each defined in it's own title window. So in my environment, my problem is that I can't access the second grid from the first grid. In other words, I need to be able to access Datagrid 2 from Datagrid1 in the item click event of datagrid1, and I keep getting the null object error 1009. The first grid is created thusly:

private function showGridResults(event:MouseEvent):void
   {
    try
    {
     if(!gridFields){
      showMessage("No Datagrid configured for this layer", false);
      return;
     }
      
     if(!myfloatdg){
      myfloatdg = rbeWidgetFloatDG(PopUpManager.createPopUp(map,rbeWidgetFloatDG,false));
      PopUpManager.centerPopUp(myfloatdg);
     }else{
      PopUpManager.addPopUp(myfloatdg,map,false);
      PopUpManager.centerPopUp(myfloatdg);
     }myfloatdg.ownerWidget = this;
    }

My second data grid is created as follows:

private function showResultsWindow():void
   {
//    resultsWindow.dgData.dataProvider = gridDataProvider;
    resultsWindow = ResultsWindowPub(PopUpManager.createPopUp(map, ResultsWindowPub, false));
    resultsWindow.dgData.dataProvider = busStopData;
    
    resultsWindow.visible = true;
     resultsWindow.inUse = true;
     resultsWindow.move(10, map.height - 295); 
   }
   
   private function filterrecAC(item:Object):Boolean {
                if(String(item.STOP_ID)== "0"){
                 return false;
                } 
                return true;
            }

I've tried to apply your code in the first floating datagrid's item click event. Problem is accessing the data in second datagrid. I can import it into the first data grid

import com.esri.solutions.flexviewer.widgets.ResultsWindowPub

but I keep getting a null object error no matter how many ways I try to access the dataprovider of the second datagrid, although it will appear in FlexBuilder, e.g.

var vRB:ResultsWindowPub = _bWidget as ResultsWindowPub;
dg2Source = vRB.dgData.dataProvider as ArrayCollection;

But I keep getting the null object error 1009 at that point, so that the code that I adapted from your suggestion is never even tested in this environment.