To use a bootstrap dropdown in a non-editable cell in ag-grid-community version 19: 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 Set z-indexes so that the focused row appears above unfocused rows. The CSS:
Full Answer
How to display overflow content in dropdown menu in AG-grid?
Create a component with a dropdown menu and render it in a cell using cellRendererFramework. Regardless of cell styling dropdown menu will be hidden behind other rows. Setting the sell to a class which includes overflow:visible should allow the overflowed content to be visible (Not hidden behind other rows). ag-Grid version: 18.1.2
How to render a dropdown menu in a cell?
Create a component with a dropdown menu and render it in a cell using cellRendererFramework. Regardless of cell styling dropdown menu will be hidden behind other rows.
How do I edit cells in a dropdown list in grid?
In order to edit cells using a dropdown list, you can use the built-in editor of the Grid component for Angular, React and Vue. You can apply a dropdown editor to all cells that belong to a specific column, by changing the editor type and providing a list of options.
How to add dropdown button to header of grid column?
Right now, the header of grid column will display a button on the right side, but it is not yet functional. You need to apply a list of options to the dropdown button using the settings property. This property accepts an object that contains the list.
kopach commented on Jun 10, 2019
Hi. With current implementation of ag-grid I’ve found only possibility to show tooltip on mouse hover and possibility to show context menu on right mouse click. But it's still not clear how to show context menu or dropdown menu on button click in cell (as per example in description of this ticket) with native ag-grid API.
smurugavels commented on Dec 31, 2019
I started with a ICellRendererAngularComp to display an inline dropdown but understood, ag-grid has dropdown item display issue. So while googling for a resolution from community, I came across these dropdown issues. This may not be all but wanted to let this team know about them.
smurugavels commented on Apr 13, 2020
A html select worked in my case. Also we were using PrimeNg's dropdown component. It had an appendTo property that can attach the overlay panel element (which is the pull down layer of a PrimeNg's drop down) to html's body. This could be of help to someone.
Using Value Handlers
Value Handlers can be used to map keys contained within the row data to their corresponding display values. This approach involves more coding but allows for different data formats and offers more flexibility managing the data.
Using the 'refData' Property
Here we present the same example but this time using the refData ColDef property. This approach requires less coding and is more straightforward, but might not be flexible enough for scenarios involving more complex reference data formats.
How to Add a DropDown Button to Grid Column
What is displayed in column header is determined by the content of the header template. You can place any custom HTML elements or Angular components inside the template. In this case, the header template will consist of a column title and a DropDownButton component.
How to Handle Events from the DropDown List
Now when dropdown button is clicked, a list of column names from the grid is displayed. However, it is not yet fully functional. Whenever some item from the dropdown list is clicked, you need to specify an action that will take place. For this purpose, you can add a handler for the itemClick event set in component HTML specification.
Showing DropDown Button on Hover
If required, you can make the dropdown button to appear only when column is hovered or selected. This is possible by modifying the CSS classes of the dropdown button using CSS classes of column header in hovered or selected state as CSS selector. Here is an example:
Conclusion
Using the column header template of IntegralUI Grid component for Angular, you can add any custom HTML elements or Angular components to appear in header space.
