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

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 the grid...

import {Component} from 'angular2/core';


@Component({
selector: 'aggride',
template: `

<div class="tr-card" >
<ag-grid-ng2  #agGrid of mgrid   class="ag-fresh"   rowHeight="40px"    
               [columnDefs]="columnDefs" 
                [rowData] = "rowData"
     enableCellExpressions="true"  
 enableSorting="true"  
  unSortIcon="true"
rowSelection="single"
(getSelectedRows) = "getSelectedRows()"
(onSelectionChanged) = "onSelectionChanged()"
>
</ag-grid-ng2>
</div>
`,
directives: [(<any>window).ag.grid.AgGridNg2],
})

And this my code inside the class to get the selected value

export class AgGride {
gridOptions = {
    columnDefs: 'columnDefs',
    rowData: 'rowData',
    rowSelection: 'single',
    getSelectedRows: 'getSelectedRows',
    onSelectionChanged: 'onSelectionChanged'
};

columnDefs = [
    { headerName: "Make", field: "make", editable: true },
    { headerName: "Model", field: "model", editable: true },
    { headerName: "Color", field: "Color", editable: true }
];

rowData = [
    { make: "Toyota", model: "Celica", Color: "Red"},
    { make: "Ford", model: "Mondeo", Color: "Blue"},
    { make: "Tata", model: "X100", Color: "Blue"},
    { make: "Volvo", model: "X5", Color: "White"},      
];

mgrid: any;
onSelectionChanged() {
    var selectedRows = this.mgrid.ag.this.gridOptions.getSelectedRows();
    console.log(selectedRows);


}
}

Somebody please tell me how can i correct my mistake so that i will get the data/value of selected row in my console window...

Answer 1

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 2

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 3

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

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

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.

Answer 6

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)}`);
}

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