agSelectEditParams vertical scroll bar

Dash Python
1

Hi team,
Hope you had a great weekend.

I am using “agSelectCellEditor” in my ag-grid, as follows:

column_defs = [{'headerName': 'Fund', 
                    'field': 'PortfolioCode',
                    'cellEditor': 'agSelectCellEditor',
                    'editable': {"function": "params.node.rowPinned === 'top'"}, 
                    'singleClickEdit' : True,
                    'cellEditorParams': {
                        'values': fund_dd,
                        'allowTyping': True,
                        'filterList': True,
                        'highlightMatch': True,
                        'valueListMaxHeight': 120
                    }}, 
                   {'headerName': 'Benchmark', 
                    'field': 'EagleBenchmarkId',
                    'cellEditor': 'agSelectCellEditor', 
                    'singleClickEdit' : True,
                    'editable': True,
                    'cellEditorParams': {
                        'values': benchmark_dd,
                        'allowTyping': True,
                        'filterList': True,
                        'highlightMatch': True,
                        'valueListMaxHeight': 120
                    }}]   
    
    license_key = os.getenv('AG_GRID_ENTERPRISE')
    return dag.AgGrid(
        id="fund-modal-grid",
        enableEnterpriseModules=True,
        licenseKey=license_key,
        rowData=existing_fund_benchmark,
        columnDefs=column_defs,
        columnSize="sizeToFit",
        getRowStyle= { 
            "styleConditions": [
                    {
                        "condition": "params.node.rowPinned === 'top'",
                        "style": { 'font-weight': 'bold', 'font-style': 'italic' } ,
                    }
            ],
            "defaultStyle": {'color': 'black'},
        },
        dashGridOptions= {
            "pinnedTopRowData": [{}],
            "defaultColDef": {
                "flex": 1,
                "valueFormatter": {"function": "isEmptyPinnedCell(params) ? createPinnedCellPlaceholder(params): undefined"}
            },
        })

The issue is when I expand the drop down, I can scroll the vertical scrollbar using my mouse, but I cannot drag the scrollbar. As soon as I click on the scrollbar to drag it, all the drop down goes away.

Any thoughts appreciated.

Thanks,

2

Hi @231530353

Since you are using AG Grid Enterprise, try using the Rich Select Cell Editor instead

But for others using the community version, it is possible to drag the scroll bar. You can check it by running this example:

(You can also see it in the AG Grid docs JavaScript Grid: Select Cell Editor | AG Grid)

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

items = [f"Product Number  {i}" for i in range(15)]


app.layout = html.Div(
    [
        dag.AgGrid(
            rowData=[{"items": i} for i in items],
            columnDefs=[
                {
                    "field": "items",
                    "cellEditor": "agSelectCellEditor",
                    "cellEditorParams": {"values": items},
                    "cellEditorPopup": True,
                    "editable": True,
                }
            ],
            style={"height": 200},
    
        )
    ],
)


if __name__ == "__main__":
    app.run(debug=True)
2 Likes
3

Thanks @AnnMarieW for your reply. The reason I used agSelect instead of agRichSelect is, agSelect dropdown automatically overflows over the cell while the agRichSelect dropdown is contained in the cell. I am not a UI person, and having a hard time getting it worked.

image
image774×226 7.07 KB

Appreciated it very much If you have any thoughts here

4

Hello @231530353,

This is why you need to include the "cellEditorPopup": True, in the columnDef, this will allow it to pop up outside of the grid’s cell.

1 Like
5

thank you so much :slight_smile: