Question

我设置了一个ag网格，以显示数据，并在右侧显示一个上下文菜单的单元格。该上下文菜单由按钮触发，使用“引导程序”下拉菜单。单击后，该按钮会正确触发菜单的显示，但ag-Grid单元格会隐藏下拉菜单。我试图强制溢出：在父元素以及网格单元本身上可见，但未成功。我什至尝试在父元素上设置z-index，但仍然无法使其正常工作。我仅有的一点成功是通过设置overflow：scroll。如果滚动单元格的内容，则可以看到下拉列表。并非完全用户友好。有人有建议吗？注意：我已经尝试过：CSS: Bootstrap drowpdown hides behind grid cell

感谢您提出任何建议！

Answer 1

isPopup仅在可编辑单元格中起作用。

要在ag-grid-community版本19中的不可编辑单元格中使用引导程序下拉列表，请执行以下操作：

将overflow: visible应用于.ag-cell，或者更好地应用于您申请的cellClass 到列定义中的单元格，例如.actions-button-cell
设置z索引，使关注的行显示在未关注的行上方。

CSS：

.actions-button-cell { 
  overflow:visible; 
}

.ag-row {
    z-index: 0;
}

.ag-row.ag-row-focus {
    z-index: 1;
}

这允许下拉列表流到单元格和行的外部。

如果您还希望下拉列表流在网格外部，则可以添加以下内容：

.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper {
    overflow: visible !important;
}

请参见plnkr sample

Answer 2

添加这是我在 Angular 和 ag-grid 23 中所需要的：

  .ag-cell-value,
  .ag-cell {
    overflow: visible;
  }

Answer 3

对此，我的解决方案是通过添加如下所示的onCellClicked事件处理程序来在单击字段（名称：“操作”）时修改行高：

                   onCellClicked: function(params) {
                    if(params.column.colId == 'actions'){
                        var row = gridOptions.api.getDisplayedRowAtIndex(params.rowIndex);
                        if(row.rowHeight != 200) {
                            row.setRowHeight(200);
                        } else {
                            gridOptions.api.resetRowHeights();
                        }
                        gridOptions.api.onRowHeightChanged();

                    }
                }

希望可以提供一个更好的解决方案，以使将来可以在网格上显示下拉列表，而不必扩展行。

Answer 4

当单元格隐藏样式溢出时发生。通过添加overflow:visible属性来覆盖在angular2 ag-grid中，您可以将单元格样式添加到oveflow:visible

cellStyle: { "overflow": 'visible' }

Answer 5

引用的帖子中这么简单的方法：isPopup函数

isPopup:function(){
  return true;
}

更新：plnkr示例

工作过plnkr sample

Answer 6

经过很多选择，我成功地做到了。我还在一个单元格中有一个Bootstrap下拉菜单，最上面几行的下拉列表都被裁剪了（出现在其他行的下面）。

这是解决问题的诀窍：

使当前焦点所在的行的z-index高。 ag-grid将ag-row-focus类应用于您要与之交互的行。就您而言，如果您单击按钮以打开下拉菜单，则该行将成为焦点。所以只要使其z-index高

.ag-row.ag-row-level-0.ag-row-position-absolute.ag-row-focus {z-index: 999;}

和其他带有ag-row-position-absolute的行的z索引为0

.ag-row.ag-row-no-focus.ag-row-level-0.ag-row-position-absolute {
z-index: 0;
}

对不起，伙计。我首先尝试通过CSS解决所有问题。

Answer 7

您可以仅使用“ cellRenderer”在ag-grid的单元格中实现Dropdown。不需要“ cellEditor”

'component-name'.ts

@Component({
  selector: 'app-project-status-management',
  templateUrl: './project-status-management.component.html',
  styleUrls: ['./project-status-management.component.scss']
})
export class ProjectStatusManagementComponent implements OnInit {

  // Template of the Grid
  @ViewChild('agGrid', { static: false }) agGrid: AgGridAngular;

  // Template to the Select (Dropdown)
  @ViewChild('templateCell', { static: true }) templateCell: TemplateRef<any>;

  columnDefs: any;
  frameworkComponents: any;
  gridContext: any;
  data: any[];

  // Values shown on Dropdown
  availableStatus: WorkflowStatus[] = [
    {
      workflowStatusId: 1,
      name: 'InDesign',
      description: 'In Design'
    },
    {
      workflowStatusId: 3,
      name: 'SourceReviewed',
      description: 'Source Reviewed'
    },
    {
      workflowStatusId: 5,
      name: 'Translated',
      description: 'Translated'
    },
  ];

  ngOnInit() {
    this.setUpGrid();

    // Set the context of the ag-grid
    this.gridContext = {
      availableStatus: this.availableStatus,
    };
  }


  setUpGrid() {
    // setup columns
    this.columnDefs = [
    {
        colId: 'projectStatus',
        headerName: 'Status',
        field: 'workflowStatus.workflowStatusId',
        cellRenderer: 'GridActionButtonCell',
        cellRendererParams: {
          ngTemplate: this.stringStatusCell
        },
        width: 170,
    }];

    this.frameworkComponents = {
      GridActionButtonCell: GridActionButtonComponent,
    };
  } 
}

'component-name'.html

<div>
   ...
  <ag-grid-angular #agGrid 
    [rowData]="data"
    [columnDefs]="columnDefs" [context]="gridContext"      
    [suppressRowClickSelection]="true"
    ...
    [frameworkComponents]="frameworkComponents">
  </ag-grid-angular>
  ...
</div>


<ng-template #templateCell let-row let-context="params">
  <div class="d-flex flex-row" style="height: 100%;">
    <select [(ngModel)]="row.workflowStatus.workflowStatusId">
      <option *ngFor="let status of context.context.availableStatus" [ngValue]="status.workflowStatusId">{{status.description}}</option>
    </select> 
  </div>
</ng-template>

定义包含元素的模板'#templateCell'。

注意：
1-“ let-row” =>网格的每个rowData（在这种情况下为this.data [i]）
2-“ let-context =” params“ =>这是我们分配给Grid以便传递变量的上下文。在这种情况下，我们在Context中设置一个名为” availableStatus“的变量：

 availableStatus: WorkflowStatus[] = [
    {
      workflowStatusId: 1,
      name: 'InDesign',
      description: 'In Design'
    },
    {
      workflowStatusId: 3,
      name: 'SourceReviewed',
      description: 'Source Reviewed'
    },
    {
      workflowStatusId: 5,
      name: 'Translated',
      description: 'Translated'
    },
  ];

 ngOnInit() {
    ....

    this.gridContext = {
      availableStatus: this.availableStatus,
    };
  }

Answer 8

我找到了解决方法，可以显示下拉列表（通过在任意行上单击鼠标左键触发上下文菜单）

我使用了“ cellClicked”事件来调用显示上下文菜单的函数

HTML文件：

<ag-grid-angular 
  class="ag-theme-material fill-vertical"
  [gridOptions]="gridOptions"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
  (gridReady)="onGridReady($event)"
  (cellClicked)="onCellClicked($event)">

TS文件：

// this.getContextMenuItems returns an array of items for drop down
this.gridOptions.getContextMenuItems = this.getContextMenuItems;
// on click on any drop down row, this can be accessed from context object in params
this.gridOptions.context = { parentComponent: this }

// this function returns the rows of the drop down
getContextMenuItems(params) {

    if (!params.value) {
      return []
    } else if( prams.value) {
      return [
    {
      name: params.value.masterdesignname,
      action: () => { params.context.parentComponent.goToDetailPage(params.value.masterdesignid)   }
    }
  ]
    } else {
      return [
        'copy',
        'export'
      ]
    }
  }


  // this function is called when a row in ag-grid if left clicked (by the cellClicked event)
  onCellClicked(params) {

      const { rowIndex, node, column, event, value } = params;

      const cell = params.api.rowRenderer.rowCompsByIndex[rowIndex].getRenderedCellForColumn(column);

      cell.beans.contextMenuFactory.showMenu(node, column, value, event);

  }

Answer 9

使用以下 CSS 在 AG-Grid 表格中显示 BS 下拉列表。

.ag-row.ag-row-level-0.ag-row-position-absolute.ag-row-focus {z-index: 999;}
.ag-row.ag-row-level-0.ag-row-position-absolute .ag-cell-focus {overflow: visible;}

Answer 10

如果您的网格很小，并且您的下拉菜单已经通过上面的“popup = true”回调“脱离了单元格”，您可能会发现下拉菜单现在被网格剪裁了...

这个相关的问题，可以在下面解决。 @Yair Cohen 让我调查 scss 的变化，发现了这个：
Ag-Grid SCSS CHANGE

Ag-Grid 对 .ag-root-wrapper 隐藏溢出引入了 scss 更改（V19 - V20）。这可以被覆盖：

.ag-root-wrapper { overflow: visible; }

放置在 ag-grid scss 导入之后 - 您的下拉列表也不会被网格剪裁。

包含Bootstrap下拉菜单剪辑菜单的ag-Grid单元

10 个答案: