web-dev-qa-db-fra.com

Sélectionnez par programme une grille de lignes + +angular 2

Essayer de sélectionner la première ligne par défaut dans ag-grid. Selon les documents ag-grid, je devrais être capable de le faire en utilisant NodeSelection Api ( https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab= ). Mais je ne suis pas du tout en mesure d'accéder à l'objet nœud. Fichier HTML

<div class="pulldown panel panel-default">
          <div class="panel-heading">{{rulesSummaryTitle}}</div>
          <ag-grid-angular #agGrid   class="ag-fresh ag-bootstrap"
                           [gridOptions]="gridOptions"
                           [rowData]="rowData"
                           [columnDefs]="columnDefs"
                           [enableSorting]="true"
                           rowSelection="single"
                           [pagination]="true"
                           [suppressCellSelection]="true"
                           (gridReady)="onGridReady($event)"
                           (rowSelected)="onRowSelect($event)">
          </ag-grid-angular>
      </div>

J'appelle l'api de sélection de noeud dans la méthode "onGridReady" mais des erreurs avec le message d'erreur "cant call setSelected on undefined".

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    this.gridOptions.api.node.setSelected(true);
  }
angularag-grid
7
Astraea

Solution trouvée, le problème résidait dans le fait que la fonction "onGridReady" était appelée bien avant que les données de ligne soient remplies à partir d'Observables. Il n'y avait donc en fait aucune ligne que l'instruction select pouvait sélectionner.

import { Component } from '@angular/core';
import {Observable} from "rxjs/Observable";
export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [rowData]="rowData"
                 (gridReady)="onReady($event)"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [rowData]="rowData2"
                 (gridReady)="onReady($event)"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [gridOptions]="gridOptions"
                 [rowData]="rowData3"
                 (gridReady)="onReady($event)"
                 (rowDataChanged)="onRowDataChanged()"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
    `
})
export class AppComponent {
    columnDefs;
    rowData;
    rowData2;
    rowData3;

    constructor() {
      this.gridOptions = {
      rowData: this.rowData3
    };
      console.log("in here");
      console.log("in here");
      console.log("in here");
        this.columnDefs = [
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}
        ];

        this.rowData = [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ]

        let val = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];


    let res : Observable<any> = Observable.create(observer => {
      setTimeout(()=>{
        observer.next(val);
      },1);
    });
    res.subscribe(
      resposne => {
        this.rowData2 = resposne;
      });

      let res1 : Observable<any> = Observable.create(observer => {
      setTimeout(()=>{
        observer.next(val);
      },2000);
    });
    res1.subscribe(
      resposne => {
        this.rowData3 = resposne;
      });


    }
       /**
   * Select the first row as default...
   */
  public onRowDataChanged(): void {
    this.gridOptions.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
  }


    private onReady(params) {
        params.api.sizeColumnsToFit();
       params.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
    }
}

https://plnkr.co/edit/PSKnSjAo6omDAo5bjm1J .

Plunker ajouté avec trois ag-grid. La première grille a des valeurs de données de ligne prédéfinies, la seconde grille a des données de ligne est remplie à partir d'Observables mais avec une latence très inférieure, la troisième grille a des valeurs de données de ligne remplies à partir d'observables avec une latence plus élevée. En cas de première et deuxième fonction "onGridReady" est appelée et la première ligne est sélectionnée, mais dans le cas de la troisième grille, nous devons fournir l'instruction de sélection de ligne sur l'événement "rowDataChanged" pour que la ligne soit sélectionnée.

7
Vins

Il n'y a pas d'attribut node sur le gridOptions.api objet. Vous voudrez faire quelque chose de plus comme ceci:

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    gridOptions.api.forEachNode(node=> node.rowIndex ? 0 : node.setSelected(true))
  }

Cela vérifiera chaque nœud dans les données et verra si le rowIndex est 0, quand il l'est, il utilise l'objet nœud pour définir l'attribut sélectionné

9
Jarod Moser

Sur onGridReady, vous pouvez utiliser ce code pour sélectionner la première ligne par défaut.

let  rowIndex = 0;
this.GridOptions.api.paginationGoToFirstPage(); // If pagination is implemented
this.GridOptions.api.selectIndex(rowIndex, false, false);
this.GridOptions.api.setFocusedCell(0, "FirstName");
2
bensonissac

essayez d'utiliser gridOptions.api.setFocusedCell (0, [nom de la colonne]) où le nom de la colonne peut être ne colonne visible

0
BlindSniper