ag-Grid cell containing Bootstrap dropdown menu clips menu

Question

I have an ag-Grid set up to show data with a cell on the right that displays a context menu. This context menu, triggered by a button, uses a Bootstrap dropdown menu. When clicked, the button correctly triggers the display of the menu, but the ag-Grid cell hides the dropdown. I have attempted to force overflow: visible on the parent element as well as the grid cell itself without success. I have even attempted to set a z-index on the parent element and still haven't been able to get it to work. The only slight success I have had is by setting overflow:scroll. I can then see the dropdown if I scroll the contents of the cell. Not exactly user-friendly. Anyone have a suggestion? NOTE: I've already attempted this: CSS: Bootstrap drowpdown hides behind grid cell

Thanks for any suggestions you have!

Answer 1

So simple way from the referenced post: isPopup function

isPopup:function(){
  return true;
}

Update : plnkr sample

Worked plnkr sample

Answer 2

isPopup only works in editable cells.

To use a bootstrap dropdown in a non-editable cell in ag-grid-community version 19:

1. Apply overflow: visible to .ag-cell, or, better, to a cellClass you apply to the cell in the column definition, e.g. .actions-button-cell
2. Set z-indexes so that the focused row appears above unfocused rows.

The CSS:

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

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

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

That allows the dropdown to flow outside the cell and row.

If you want to also have the dropdown flow outside the grid, you can add something like this:

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

See plnkr sample

Answer 3

It happens when the cell have the style overflow hidden. Override that by adding overflow:visible property In angular2 ag-grid you can add cell style to oveflow:visible

cellStyle: { "overflow": 'visible' }

Answer 4

I did it successfully after going through many options. I also had a bootstrap dropdown in one cell and the dropdown for the top rows was coming clipped (appearing under other rows).

Here is the trick to solve it:

1. Make z-index high for the row which is currently in focus. ag-grid applies ag-row-focus class to the row with which you are interacting. In your case, if you are clicking on button to open dropdown, that row gets focus. so just make its z-index high

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

and other rows, which have ag-row-position-absolute, make their z-index 0

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

Sorry, laz guy. I try everything to solve by CSS first.

Answer 5

Adding this is all I needed in Angular and ag-grid 23:

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

Answer 6

My solution to this was to modify the row height upon clicking the field (name: 'actions') by adding the onCellClicked event handler as such:

                   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();

                    }
                }

Hopefully a better solution can be presented to allow the dropdown to display over the grid in the future without having to expand the row.

Answer 7

You can use just a "cellRenderer" to implement a Dropdown in a cell of a ag-grid. It's not necessary a "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>

Define a template '#templateCell' containing a element.

Notes:
1 - "let-row" => each rowData of the Grid (in this case would be this.data[i])
2 - "let-context="params" => it's the context that we assigned to the Grid in order to pass it variables. In this case we set a variable in Context called "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

I found a work around, to show drop down (by triggering context menu on left click on any row)

I used 'cellClicked' event to call the function which displays a context menu

HTML file:

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

TS file:

// 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

Use Following CSS to show the BS dropdown in the AG-Grid table.

.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

If your grid is small, and your drop down has "escaped the cell" with the above "popup = true" callback, you may find that the drop down is now clipped by the grid...

This related problem, can be addressed below. @Yair Cohen put me onto investigating the scss change, and found this:
Ag-Grid SCSS CHANGE

Ag-Grid introduced a scss change (V19 - V20) to .ag-root-wrapper hiding overflow. This can be overridden with:

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

Placed after the ag-grid scss import - your drop down will also not be clipped by the grid.