How to get the data of selected row in ag grid in angular2?

Question

I have setup ag-grid in angular2 which works fine but i am not able to get the value of selected row...There are no errors in my console window...This is how i am initialising t

Answer 1

On your HTML bind rowClicked event to your own function as follows.

 <ag-grid-angular #grid
      style="width: 100%; height: 500px;" class="ag-theme-balham"
      [rowData]="rowList" [columnDefs]="columnsList" [rowSelection]="selectionMode"
      (rowClicked)="onRowClick($event)"
    >
    </ag-grid-angular>

then on your TS or in your JS use the api as follows

onRowClick(event) {
    if (this.selectionMode === 'multiple') {
      this.selectedEntity = this.grid.api.getSelectedRows();
    } else {
      this.selectedEntity = this.grid.api.getSelectedRows()[0];
    }
}

When your grid has a feature like multiple selections all the selected data won't pass with the event parameter. It will always be the selected row only.

Reason I didn't encourage the selectionChanged event was, It will always call the rowClicked event before selectionChanged event.

Answer 2

On template, e.g.:

(rowClicked)='onRowClicked($event)'
(cellClicked)='onCellClicked($event)'
(selectionChanged) = 'onSelectionChanged($event)'

and then on component class:

onRowClicked(event: any) { console.log('row', event); }
onCellClicked(event: any) { console.log('cell', event); }
onSelectionChanged(event: any) { console.log("selection", event); }

Use Chrome console to check the event object contents.

Answer 3

Firstly, row selection must be enabled by setting gridOptions.rowSelection to either "single" or "mulitple", depending on the selection behavior you'd like to implement.

You can then use the grid API method getSelectedNodes() to return a list of all currently selected rows in ag-Grid. Extracting the data from each node is as simple as mapping over each node and returning its data property.

Here is the code when using a JavaScript framework:

getSelectedRowData() {
    let selectedNodes = this.gridApi.getSelectedNodes();
    let selectedData = selectedNodes.map(node => node.data);
    alert(`Selected Nodes:\n${JSON.stringify(selectedData)}`);
    return selectedData;
}

You can also see this illustrated in the Angular/React/Vue.js examples below:

Angular

React

Vue.js

Vanilla JS
Note: When using Vanilla JS, the gridApi and columnApi can be reached from the gridOptions Object.

Read the full post on our blog or check out our documentation for a great variety of scenarios you can implement with ag-Grid.

Ahmed Gadir | Developer @ ag-Grid

Answer 4

If you are using onSelectionChanged() you can get selected data from the onSelectionChanged function by using api.getSelectedRows().

selectedRow: any;
canceLDateAGGrid() {
    this.dateGridOptions = {
        columnDefs: [{
            headerName: this.Label[0].GEN_ORG_lblName,
            field: 'DependantName',
            width: 200,
            filter: 'agTextColumnFilter'
        }, ],
        showRowSelection: true,
        checkboxSelection: false,
        onSelectionChanged: (event) = > this.onSelectionChanged(event),
    };
}
onSelectionChanged(event) {
    let selectdata = event.api.getSelectedNodes();
    this.selectedRow = event.api.getSelectedRows();
    console.log(this.selectedRow)
}

Answer 5

onRowSelected: params => {
  const selectedRows = params.api.getSelectedRows();
  console.log(selectedRows);
}

Answer 6

you can use api.getSelectedRows() that Returns a array of selected rows data.

 public getSelectedRows(){
        let rowsSelection = this.gridOptions.api.getSelectedRows();
        console.info(rowsSelection);
      }

that's work for me.