Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 328
Raja Reddy Avatar asked Feb 09 '16 12:02

Raja Reddy


People also ask

How do you get the data of a selected cell in Ag grid?

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.

How do you get the data of a selected row from a grid in Extjs?

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.

How do you programmatically select rows in Ag grid?

To select rows programmatically, use the node. setSelected(params) method. setSelected.

How do I select grid rows?

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)


4 Answers

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)
}
like image 151
poovarasi sekar Avatar answered Oct 19 '22 00:10

poovarasi sekar


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.

like image 32
Anouar Mokhtari Avatar answered Oct 18 '22 23:10

Anouar Mokhtari


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.

like image 30
zovio Avatar answered Oct 18 '22 23:10

zovio


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.

like image 3
ymssa___ Avatar answered Oct 18 '22 22:10

ymssa___