web-dev-qa-db-fra.com

Comment obtenir les données de la ligne sélectionnée dans ag grid dans angular2?

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

angulartypescriptag-grid
6
Raja Reddy

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.

17
zovio

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.

1
Anuradha Mudalige

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.

1
Anouar Mokhtari
onRowSelected: params => {
  const selectedRows = params.api.getSelectedRows();
  console.log(selectedRows);
}
0
Dmytro Krekota