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

Question

我设置了一个 ag-Grid 来显示数据，右侧的单元格显示上下文菜单。这个由按钮触发的上下文菜单使用 Bootstrap 下拉菜单。单击时，按钮会正确触发菜单的显示，但 ag-Grid 单元格会隐藏下拉菜单。我试图强制溢出：在父元素以及网格单元格本身上可见但没有成功。我什至尝试在父元素上设置一个 z-index，但仍然无法让它工作。我唯一的小成功是设置 overflow:scroll。如果我滚动单元格的内容，我就可以看到下拉列表。不完全用户友好。有人有建议吗？注意：我已经尝试过这个：CSS: Bootstrap drowpdown hides behind grid cell

感谢您的任何建议！

Answer 1

我的解决方案是通过添加 onCellClicked 事件处理程序来修改单击字段（名称：'actions'）时的行高：

                   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 2

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

cellStyle: { "overflow": 'visible' }

Answer 3

引用 post 的简单方法：isPopup 函数

isPopup:function(){
  return true;
}

Update : plnkr sample

工作plnkr sample

Answer 4

isPopup 仅适用于可编辑的单元格。

要在 ag-grid-community 版本 19 的不可编辑单元格中使用 bootstrap 下拉菜单：

将overflow: visible应用到.ag-cell，或者，更好的是，应用到您应用的cellClass 到列定义中的单元格，例如.actions-button-cell
设置 z-index，使聚焦行显示在未聚焦行之上。

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 5

经过很多选择，我成功地做到了。我还在一个单元格中有一个 bootstrap 下拉菜单，顶行的下拉菜单被剪掉了（出现在其他行下面）。

这里是解决它的技巧：

使当前处于焦点的行的 z-index 高。 ag-grid 将 ag-row-focus class 应用到您正在与之交互的行。在您的情况下，如果您单击按钮打开下拉菜单，该行将获得焦点。所以只需将其 z-index 调高

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

和其他具有 ag-row-position-absolute 的行，使它们的 z-index 为 0

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

对不起，懒惰的家伙。我先尝试CSS解决所有问题。

Answer 6

您可以只使用 "cellRenderer" 在 ag-grid 的单元格中实现下拉菜单。没必要 "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" => 网格的每一行数据（在本例中为 this.data[i]）
2 - "let-context="params" => 这是我们分配给网格的上下文，以便将变量传递给它。在这种情况下，我们在上下文中设置了一个名为 "availableStatus":
[= 的变量13=]

 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 7

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

我使用 '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 8

添加这个就是我在 Angular 和 ag-grid 23:

中所需要的

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

Answer 9

使用以下 CSS 在 AG-Grid table 中显示 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 导入之后 - 您的下拉菜单也不会被网格裁剪。

Answer 11

我使用的是 25.3.0 版本，我必须使用下面的 CSS 才能使 bootstrap 下拉菜单正确显示。

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

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

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

ag-Grid cell containing Bootstrap dropdown menu clips menu

twitter-bootstrap

ag-grid