Select ui grid 2 row when ui grid 1 row is selected(vice versa)

Question

I have two grids with same data. My aim is to when a row is selected in one grid, corresponding row in another grid also gets selected. Plunker: http://plnkr.co/edit/BBfMxvsv0OUsjiqblBJQ?p=preview

I'm getting selected grid like this:

 onRegisterApi: function(gridApi) {
    console.log('Loaded Grid API 1');
    $scope.gridApi1 = gridApi;
    $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();
    }

Thanks in advance

Answer 1

update your onRegisterApi for first grid to something like this:

 onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;
      $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.selectedRow = row.entity;
        $scope.gridApi2.selection.selectRow($scope.selectedRow);
      });
    }

I am binding rowSelectionChanged event one first grid, so, when user select a row its fired.. I store the selected row in $scope.selectedRow

The second grid is selected by calling the API : selectRow. Note that you will have to pass the row entity for getting the proper selection:

$scope.gridApi2.selection.selectRow($scope.selectedRow); <-- selectedRow is row entity

finally, you get something like this:

$scope.gridOptions1 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi2.selection.selectRow(row.entity);
      });
    }
  };


  $scope.gridOptions2 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 2');
      $scope.gridApi2 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi1.selection.selectRow(row.entity);
      });
    }
  };