Eclipse приложение RCP - дизайн мультиокна для нескольких мониторов

// grid.component.html

<div style="text-align:center">
  ag-grid Example
</div>
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>


// employee.ts

export interface Employee {
    name: string;
    age: number;
    country: string;
    year: number;
    date: number;
    month: string;
    ssn: number;
    address: string;
    zipCode: number;
    occupation: string;
    employer: string;
    employerAddress: string;
    mobNum: number;
}


// grid-component.ts

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { Employee } from './models/employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() {}

  ngOnInit() {
    this.setGridOptions();
  }

  setGridOptions() {
    this.gridOptions = {
      suppressColumnVirtualisation: true
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
    this.autoSizeAll();
    this.gridOptions.api.refreshCells();
  }

  getColumnDefinitions(): Array<any> {
    return [
      {
        field: 'name',
        headerName: 'Name'
      },
      {
        field: 'age',
        headerName: 'Age'
      },
      {
        field: 'country',
        headerName: 'Country'
      },
      {
        headerName: 'Birth Day',
        children: [
          {
            headerName: 'Year',
            field: 'year'
          },
          {
            headerName: 'Month',
            field: 'month'
          },
          {
            headerName: 'Date',
            field: 'date'
          }
        ]
      },
      {
        field: 'ssn',
        headerName: 'Social Security Number'
      },
      {
        field: 'address',
        headerName: 'Address'
      },
      {
        field: 'zipCode',
        headerName: 'Zip Code'
      },
      {
        headerName: 'Occupation Details',
        children: [
          {
            field: 'occupation',
            headerName: 'Occupation'
          },
          {
            field: 'employer',
            headerName: 'Employer'
          },
          {
            field: 'employerAddress',
            headerName: 'Employer Address'
          },
        ]
      },
      {
        field: 'mobNum',
        headerName: 'Mobile Number'
      }
    ];
  }

  getData(): Employee[] {
    return [
      {
        name: 'Mary Smith',
        age: 25,
        country: 'Australia',
        year: 1990,
        date: 14,
        month: 'March',
        ssn: 1234542792102229,
        address: '31 Rainbow Rd, Towers Hill, QLD 4820 31 Rainbow Rd, Towers Hill, QLD 4820',
        zipCode: 11350,
        occupation: 'Engineer',
        employer: 'MicroSoft',
        employerAddress: '245 Rainbow Rd, Microsoft, Towers Hill, QLD 4820',
        mobNum: 7156662910
      },
      {
        name: 'Jeff Martin',
        age: 30,
        country: 'UK',
        year: 1987,
        date: 24,
        month: 'December',
        ssn: 1234542792102229,
        address: '31 Rainbow Rd, Towers Hill, QLD 4820',
        zipCode: 11350,
        occupation: 'UI/UX Designer',
        employer: 'Facebook India',
        employerAddress: '17 Rainbow Rd, Towers Hill, QLD 4820',
        mobNum: 7158462910
      }
    ];
  }

  autoSizeAll() {
    const allColumnIds = [];
    this.gridOptions.columnApi.getAllColumns().forEach((column: any) => {
      allColumnIds.push(column.colId);
    });

    this.gridOptions.columnApi.autoSizeColumns(allColumnIds);
  }

}

Вот что я сделал:

1. В html - привязка gridOptions и событие onGridReady

2. В компоненте

   • Инициализация параметры сетки и установите suppressColumnVirtualisation = true.
   • Когда сетка готова, задайте данные для сетки, установив определения столбцов, а затем данные строк.
   • Получите идентификаторы столбцов всех столбцов в сетке и установите их в сетке api autoSizeColumns.

autoSizeColumns () просматривает только ячейки, уже отрисованные на экране. Поэтому ширина столбца устанавливается в зависимости от того, что он видит. Это происходит из-за виртуализации столбцов. Таким образом, столбцы, не видимые на экране, не будут автоматически иметь размер.

Это поведение можно обойти, просто установив suppressColumnVirtualisation = true

Обратите внимание, что сетка использует эту виртуализацию столбцов для повышения производительности сетки при большом количестве столбцов быть оказанным.