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