如何缩小agGrid detailGridOptions中的空间

Question

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

较少-我已经能够使用下面的代码朝“ 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>

ts

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有一个简洁的例子可以说明这一点。基本上，您只想基于行数将特定高度指定给详细信息网格。

在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