如何缩小 ag Grid detailGridOptions 中的空间

Question

在我的 agGrid 下拉列表中有大量空间由 detailGridOptions 呈现。应用程序中 99% 的下拉菜单中只有一行。其他 1% 可能有 2 行。如何缩小下拉菜单中的空间。 agGrid angular9

less-我已经能够使用下面的代码缩小行所在的表格的高度，直到“ag-root-wrapper-body”和下面

    #AllLeaseView {
        input[type='radio'] {
            display: none;
        }
    
        .sales-summary-chart {
            svg.ngx-charts {
                margin-left: -35px;
                margin-top: 35px;
            }
        }
    
        .kt-portlet__head-toolbar .btn-group .btn {
            cursor: pointer;
        }
    }
    .k-grid tbody td {
        white-space: nowrap;
        line-height: 18px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        vertical-align: top;
    }
    
    .k-grid th.k-header,
    .k-grid-header {
        font-size: 14px;
        font-weight: 900;
        padding: 10px 24px;
    }
    
    .rag-red {
        background-color: #e74c3c;
        color: black;
    }
    .rag-green {
        background-color: #00bc8c;
    }
    .rag-amber {
        background-color: #f39c12;
        color: black;
    }
    
    .ag-header-cell-text {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
     }
     .ag-root-wrapper-body.ag-layout-normal{
        max-height: 100px !important;
     }
    
     .ag-details-row, .ag-row-position-absolute, .ag-full-width-row {
         max-height: 150px !important;
     }

html-这里没什么好说的

    <ag-grid-angular domLayout='autoHeight' class="ag-theme-balham-dark"
                                    [rowData]="leases" [columnDefs]="columnDefs" [frameworkComponents]="frameworkComponents"
                                    [gridOptions]="gridOptions" [animateRows]="true" [detailCellRendererParams]="detailCellRendererParams"
                                    [overlayLoadingTemplate]="overlayLoadingTemplate" [masterDetail]="true"   (firstDataRendered)="onFirstDataRendered($event)"
                                    [sideBar]="sideBar" (gridReady)="onGridReady($event)">
                                </ag-grid-angular>

    this.detailCellRendererParams = {
            detailGridOptions: {
                columnDefs: [
                    {
                        field: 'tenantType',
                        headerName: ' Tenant Type',
                        cellRenderer(params) {
                            const tenantType = params.data.tenantType;
                            if (tenantType) {
                                return tenantType;
                            } else {
                                return;
                            }
                        },
                    },
                    { field: 'leaseTenantImprovements', headerName: 'TI (PSF)' },
                    { field: 'leaseFreeRentMonths', headerName: 'Free Rent Months' },
                    {
                        field: 'rentCommencementDate',
                        headerName: 'Commencement Date',
                        cellRenderer(params) {
                            return params.data.rentCommencementDate.format('MM/DD/YY');
                        },
                    },
                    { field: 'lessor' },
                    { field: 'guarantor' },
                    { field: 'renewalOptions' },
                    { field: 'purchaseOptions' },
                    { field: 'terminationClause' },
                    {
                        field: 'verifications',
                        headerName: ' Verification Date',
                        cellRenderer(params) {
                            return params.data.verifications[0].verificationDate.format('MM/DD/YY');
                        },
                    },
                    {
                        field: 'verifications',
                        headerName: 'Verified By',
                        cellRenderer(params) {
                            const verifiedByUserDto = _.find(this.users, {
                                id: params.data.verifications[0].verifiedByUserId,
                            });
                            if (verifiedByUserDto) {
                                return verifiedByUserDto.name;
                            } else {
                                return;
                            }
                        },
                    },
                ],......

Answer 1

您不应该为此需要任何花哨的 css 处理。 Ag-grid doc 有一个很好的例子来涵盖相同的内容。基本上，您只想根据行数将特定高度分配给详细信息网格。解决这个问题的两种方法 -

1. 在主gridOptions中使用detailRowHeight

   masterGridOptions.detailRowHeight = 200;

2. 实现getRowHeight

在 HTML 中添加getRowHeight

[getRowHeight]="getRowHeight"

定义 getRowHeight 这样的东西 -

this.getRowHeight = function(params) {
  if (params.node && params.node.detail) { // this ensures it only applies to detail grid
    var offset = 80;
    var allDetailRowHeight =
      params.data.detailGrid.length *
      params.api.getSizesForCurrentTheme().rowHeight; //replace detailGrid with your detail grid rowdata property
    var gridSizes = params.api.getSizesForCurrentTheme();
    return allDetailRowHeight + gridSizes.headerHeight + offset;
  }
};

从文档中查看example