CODEWITHSUNDEEP
angularjsangular-ui-gridui-grid
Naishav Mehta
Naishav Mehta

Reputation: 316

UI grid unable to get selected rows in case of 2 grids(same grid repeated twice)

I have created two ui grids on the same html(both are same). I'm trying to get selected row on click of submit button. I'm able to get selected row for second grid but not able to get it for the first grid.

I'm getting selected rows like this:

 onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
    }

Plunker: http://plnkr.co/edit/SgYh9QzjCQDOKMMXATlF?p=info

Is there any way to get selected row of both the grids?

Thanks in advance.

Upvotes: 0

Views: 781

Answers (1)

Brian
Brian

Reputation: 5049

That is because the API registers when the grid loads in the DOM. Since you have two grids with the same scope, when the second loads, it's API becomes what is defined by $scope.gridApi. Therefore anything you do with that API is interacting with the second grid instance.

The solution here would be to separate the grids out, maybe $scope.gridOptions1, $scope.gridOptions2. For anything that must occur on both, you can call each API independently within the function.

This is what I would do: http://plnkr.co/edit/nLLR63L4H4NqLoZsGpkS?p=preview

For your submit function, assuming you want a single array with the results, I've updated the function such that it provides one result:

  $scope.submitData = function() {

    var selectedRows1 = $scope.gridApi1.selection.getSelectedRows(),
        selectedRows2 = $scope.gridApi2.selection.getSelectedRows(),
        selectedRows = selectedRows1.concat(selectedRows2);

    console.warn(selectedRows);
    alert(selectedRows.length)
    if (selectedRows.length === 0)
      alert('Please select an item from grid');
    else
      alert(JSON.stringify(selectedRows));

  }

Upvotes: 1

Related Questions