agSelectCellEditor scrollbar problem

[Mar7872x]

Hello ,

I have a problem with agSelectCellEditor, when I want to use/drag the vertical scroll bar the list closes.

Dash 2.18.2

Dash_ag_grid 31.3.0

columnDefs = {'field': 'nuz',"headerName":"NUZ","cellDataType": "text","cellEditor":"agSelectCellEditor","cellEditorParams":{"values":[]} }

I tried to implement this solution but it didn’t help :

agSelectEditParams vertical scroll bar

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, …

columnDefs= {'field': 'nuz',"headerName":"NUZ","cellDataType": "text","cellEditor":"agSelectCellEditor","cellEditorParams":{"values":[]},"cellEditorPopup":True }

[jinnyzor]

Hello @Mar7872x,

Have you tried running this on 31.3.1?

[Mar7872x]

No , not yet.

But this is aswell weird. The simple sample works fine on Dash_ag_grid 31.3.0. !
I tested this outside of my main code . When I drag the scroll bar, the list does not close.

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)

In my main code still dont working. What do you think? what could be the reason ?

My columnDefs in NUZ column :

{'field': 'nuz',"headerName":"NUZ","cellDataType": "text","cellEditor":"agSelectCellEditor","cellEditorParams":{"values":[],"valueListMaxHeight": 150},"cellEditorPopup":True}

[jinnyzor]

Is it inside a modal or anything like that?

[Mar7872x]

Yes, dash agrid is in inside modal body. You need full example ?

[jinnyzor]

Yes please.

It is always helpful for troubleshooting.

More than likely, you’ll need to use popupParent function to get everything associated properly.

[Mar7872x]

Body Modal , this wille be enough ? or you need full modal ?

dbc.ModalBody([

        html.Div([
                dag.AgGrid(
                id="tabela-details",
                rowData=[],  
                columnDefs=columns2,  
                #columnSize="sizeToFit",
                defaultColDef={"editable": False},
                dashGridOptions={"rowSelection": "single","accentedSort": True},
                getRowId="params.data.idx"
                
                )
            ],
            id="modal-body",style={"marginTop":"20px"}),

[Mar7872x]

@Mar7872x

defaultColDef

I also have this in the callback Output(“tabela-details”,“defaultColDef”) . I’m returning here directly {“editable”: True}. - I dynamically control the ability to edit the table.I use a button for this - Maybe that matters…

[Mar7872x]

@jinnyzor

popupParent

These are new things for me, you will have to help me how proper to implement them

[jinnyzor]

It’s helpful to provide a full MRE:

How to write a Minimal Reproducible Example (MRE)

Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on </> (Preformatted text), as shown on the image: [pre-for…

[jinnyzor]

Tooltips | Dash for Python Documentation | Plotly

This works in a similar way.

[Mar7872x]

Sorry , but I still don’t understand where to look for the solution. - Do we need to build a custom dropdown in js. based on popupParent?

… and my second thought is… “cellEditorPopup”:True not working proper inside modals ?

[jinnyzor]

By default, the popupParent will be the body of the DOM tree.

You need to replace this in the event that it isnt there, by using a function explained in the linked document.

No - you do not need to create a custom component.

[Mar7872x]

Thx a lot for your advice and time !