以编程方式选择行ag-grid + angular 2 [英] Programmatically select a row ag-grid + angular 2

问题描述

尝试在ag-grid中默认选择第一行。根据农业网格文档，我应该能够使用NodeSelection Api（ https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0 ）。但是我根本无法到达节点对象。
HTML文件

Trying to select first row by default in ag-grid. As per ag-grid documents, I should be able to do this using NodeSelection Api(https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0). But I am not able to get to node object at all. HTML file

<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，但错误消息为 cant call setSelected

I am calling node selection api in "onGridReady" method but errors out with error message "cant call setSelected on undefined".

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    this.gridOptions.api.node.setSelected(true);
  }

推荐答案

找到解决方案，问题出在在从Observables填充行数据之前，将很好地调用 onGridReady函数。因此，实际上没有选择语句可以选择的行。

Found solution, problem was with "onGridReady" function being called well before row data being populated from Observables. So there were actually no rows that select statement could 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 。

添加了带有三个agrid的插栓。第一个网格具有预定义的行数据值，第二个网格具有从Observables填充的行数据，但是延迟非常短，第三个网格具有从具有更高延迟的可观察的对象填充的行数据值。如果第一个和第二个 onGridReady函数被调用而第一行被选择，但是在第三个网格的情况下，我们必须在 rowDataChanged事件上提供选择行语句以供选择的行。

Added plunker with three ag-grid. First grid has predefined rowdata values, second grid has rowdata is being populated from Observables but with very less latency, third grid has row data values being populated from observables with higher latency. In case of first and second "onGridReady" function gets called and first row get selected, but in case of third grid we have to provide select row statement on to "rowDataChanged" event for row to be selected.

这篇关于以编程方式选择行ag-grid + angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！