Question

AgGrid的sizeColumnsToFit（）无法与agColumnsToolPanel配合使用

从最后隐藏几列并折叠面板，包括在安装列时工具面板的宽度。

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-enterprise";

@Component({
  selector: "my-app",
  template: `<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [enableSorting]="true"
    [sideBar]="sideBar"
    [enableFilter]="true"
    (gridReady)="onGridReady($event)"
     (firstDataRendered)="onGridReallyready($event)"
     (columnVisible)="onGridReallyready($event)"
    ></ag-grid-angular>

`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private sideBar;

  constructor(private http: HttpClient) {
      this.sideBar ={
            toolPanels: [
                {
                    id: 'columns',
                    labelDefault: 'Columns',
                    labelKey: 'columns',
                    iconKey: 'columns',
                    toolPanel: 'agColumnsToolPanel',
                    toolPanelParams: {
                        suppressRowGroups: true,
                        suppressValues: true,
                        suppressPivots: true,
                        suppressPivotMode: true,
                        suppressSideButtons: true,
                        suppressColumnFilter: false,
                        suppressColumnSelectAll: false,
                        suppressColumnExpandAll: true

                    }
                }

            ]
        };
   this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
            },

      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];
    }
 sizeToFit() {
    this.gridApi.sizeColumnsToFit();
  }

  autoSizeAll() {
    var allColumnIds = [];
    this.gridColumnApi.getAllColumns().forEach(function(column) {
      allColumnIds.push(column.colId);
    });
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;



    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
         // this.gridApi.sizeColumnsToFit();
      });
  }

  onGridReallyready(params){
      this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
      this.gridApi.sizeColumnsToFit();
     }
}

柱塞：https://plnkr.co/edit/hziQkclZJCAdvyOjmeu9?p=preview

Answer 1

更新：添加事件订阅者以在hide \ show上处理fit

columnVisible一列或一组列被隐藏/显示。

(columnVisible)="onColumnVisibilityChanged($event)"
...
onColumnVisibilityChanged(params){
  params.api.sizeColumnsToFit();
}

一件事：

一旦您单击“显示” \隐藏右侧工具栏中的任何列，然后将隐藏工具栏本身-不会使用工具栏的位置   到fit列。

但是，如果您要通过columnMenu显示\ hide-隐藏所有空格。

要解决此问题，您可以在params.api.setSideBarVisible(false);之前致电params.api.sizeColumnsToFit();

AgGrid的sizeColumnsToFit（）无法与agColumnsToolPanel

1 个答案: