J'ai installé ag-grid dans angular2 qui fonctionne bien, mais je ne parviens pas à obtenir la valeur de la ligne sélectionnée ... Il n'y a pas d'erreur dans la fenêtre de la console ... Voici comment je initialise la grille ...
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],
})
Et ceci mon code dans la classe pour obtenir la valeur sélectionnée
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);
}
}
Quelqu'un s'il vous plaît dites-moi comment puis-je corriger mon erreur afin d'obtenir les données/valeurs de la ligne sélectionnée dans la fenêtre de la console ...
Sur le gabarit, par exemple:
(rowClicked)='onRowClicked($event)'
(cellClicked)='onCellClicked($event)'
(selectionChanged) = 'onSelectionChanged($event)'
puis sur la classe de composant:
onRowClicked(event: any) { console.log('row', event); }
onCellClicked(event: any) { console.log('cell', event); }
onSelectionChanged(event: any) { console.log("selection", event); }
Utilisez la console Chrome pour vérifier le contenu de l'objet d'événement.
Sur votre code HTML, liez l’événement rowClicked
à votre propre fonction comme suit.
<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>
puis sur votre TS ou dans votre JS, utilisez l’API comme suit
onRowClick(event) {
if (this.selectionMode === 'multiple') {
this.selectedEntity = this.grid.api.getSelectedRows();
} else {
this.selectedEntity = this.grid.api.getSelectedRows()[0];
}
}
Lorsque votre grille comporte une fonctionnalité telle que des sélections multiples, toutes les données sélectionnées ne sont pas transmises avec le paramètre event
. Ce sera toujours la ligne sélectionnée uniquement.
La raison pour laquelle je n’ai pas encouragé l’événement selectionChanged
a été, elle appellera toujours l’événement rowClicked
avant un événement selectionChanged
.
vous pouvez utiliser api.getSelectedRows () qui renvoie un tableau de données de lignes sélectionnées.
public getSelectedRows(){
let rowsSelection = this.gridOptions.api.getSelectedRows();
console.info(rowsSelection);
}
c'est un travail pour moi.
onRowSelected: params => {
const selectedRows = params.api.getSelectedRows();
console.log(selectedRows);
}