web-dev-qa-db-ja.com

プログラムで行を選択するag-grid + angular 2

Ag-gridのデフォルトで最初の行を選択しようとしています。 ag-gridドキュメントに従って、NodeSelection Api（ https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0を使用してこれを行うことができるはずです ）。しかし、ノードオブジェクトにまったく到達できません。 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>

「onGridReady」メソッドでノード選択APIを呼び出していますが、エラーメッセージ「cunt call setSelected on undefined」でエラーが発生します。

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

見つかった解決策、問題は「onGridReady」関数がObservableから行データが入力される前に呼び出されることでした。そのため、selectステートメントで選択できる行は実際にはありませんでした。

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 。

3つのag-gridを備えたプランカーが追加されました。最初のグリッドには事前定義された行データ値があり、2番目のグリッドにはレイテンシが非常に少ないオブザーバブルから行データが入力されていますが、3番目のグリッドにはレイテンシが高いオブザーバブルから行データ値が読み込まれています。最初と2番目の「onGridReady」関数が呼び出され、最初の行が選択されますが、3番目のグリッドの場合、行を選択するには、「rowDataChanged」イベントに行選択ステートメントを指定する必要があります。

7
Vins

gridOptions.apiオブジェクトにnode属性がありません。あなたはこのようなことをもっとしたいと思うでしょう：

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

これは、データ内の各ノードをチェックして、rowIndexが0かどうかを確認します。0の場合、ノードオブジェクトを使用して選択された属性を設定します

9
Jarod Moser

OnGridReadyでは、このコードを使用して、デフォルトで最初の行を選択できます。

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

gridOptions.api.setFocusedCell（0、[column name]）を使用してみてください。ここで、列名は表示可能な列にすることができます

0
BlindSniper