Home/ Questions/Q 4679
Answered
Ghulam Nabi
Asked: 2023-02-09T08:09:33+00:00

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

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…

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

1 Answer

  1. Best Answer

    It seems that the issue is with accessing the gridOptions property. To access the grid options, you can use the ag-grid-ng2 component reference in your component’s template.

    Here’s an updated version of the code:

    export class AgGride {
  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"},      
  ];

  @ViewChild("agGrid") agGrid: any;

  onSelectionChanged() {
    var selectedRows = this.agGrid.api.getSelectedRows();
    console.log(selectedRows);
  }
}

    Here, the @ViewChild decorator is used to get a reference to the ag-grid-ng2 component. Then, you can access the grid API using this.agGrid.api and get the selected rows using this.agGrid.api.getSelectedRows().

    • 0

Leave an answer

You must login to add an answer.

Need An Account,