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...
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.
getSelection()[0]; var row = grid. store. indexOf(selectedRecord); you have to get the selected record of your grid and from that, you can search this record from your store and get its index.
To select rows programmatically, use the node. setSelected(params) method. setSelected.
Selecting Row If you need any particular item in that row you can easily select it using the cells property. In the Gridview, double-Click on the SelectedIndexChanged Event and write the following code: protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
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)
}
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With