Dash AG Grid Custom Datepicker component Does not stop edit correctly

Dash Python
1

I want to implement a Datepicker just like the one listed here.

But my problem with this one is I always have to click another cell or press enter/tab to confirm the input.(Stopping the edit)
How can i adjust this so that just clicking any other element or just clicking outside the table stops the “edit mode”.

Do you have any ideas how I could accomplish this?

2

Hello @Splashy,

Welcome to the community!

You are looking for the stopEditingWhenCellsLoseFocus or something that you need to pass true.

3

image

Thank you i think this might be it.
But now im getting this error^^

4

If possible, could you please provide a full MRE so that we can run it and see what is happening.

5

I ran into this last week as well. If you set this in the dashGridOptions = {“stopEditingWhenCellsLoseFocus”: True,} you get a weirder behavior where it fails to lose focus or commit the change, then scrolls the window to the top, at least in my current app. I chased the issue for a while without finding a solution and ended up instructing users that after setting a date, click into another cell and press enter so as to ensure everything is committed to the rowData.

6

To recreate, the following is the relevant code:

columnDefs = [#other columns
{
“headerName”: “Accumulation Date”,
“field”: “ACCUMULATION_DATE”,
“cellEditor”: {“function”: “DatePicker”},
‘filter’: False,
#‘sortable’: True,
“editable”: True,
“cellEditorPopup”: True,
“singleClickEdit”: True,
#‘cellEditorPopupPosition’: ‘under’,
}
#other columns]

The datePicker custom code is lifted off of the example as it is.

Requirements:
dash-design-kit==1.8.1
dash==2.10.2
dash-bootstrap-components==1.0.3
dash-core-components==2.0.0
dash-daq==0.5.0
dash-html-components==2.0.0
dash-enterprise-auth==0.0.6
dash-table==5.0.0
dash-ag-grid==2.1.0

I more or less settled on hoping AGGrid 30 would be implemented with native date picker support prior to me releasing this app, and if not, I planned to try to contribute towards that work.

7

Copy code from the link shared on the post and set the stopEditingWhenCellsLoseFocus to true.
Then just try to enter a new date.

8

Nice to see im not the only one having problems. I have basically 0 experience with JS so i thought maybe its just me.
yeah did the same i just have a Tooltip saying they need to click any other cell and a Modal with a list of all detected dates so they can see if anything is missing.
I guess i will wait too. But this has been a problem for a long time i think. I tried it first 6 Months ago.

9

Hello @JM_MotDev,

Welcome to the community!

Please upgrade your AG Grid to 2.3 and try again.

I use a DatePicker, mantine, in my app and havent noticed an issue with this…

Now, I will say that the jquery datepicker was just an example of something that you can accomplish with custom components.

@Splashy,

I just ran this example without an issue… (the datepicker gets hung when switching windows but cell editing doesnt exist anymore when switching back)

"""
Custom Date Picker Example
from https://www.ag-grid.com/react-data-grid/cell-editors/#datepicker-cell-editing-example
"""

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd

app = Dash(
    __name__,
    external_scripts=[
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
    ],
    external_stylesheets=[
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
    ],
)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "date", "cellEditor": {"function": "DatePicker"}},
    {"field": "athlete"},
    {"field": "country"},
]

defaultColDef = {"flex": 1, "minWidth": 150, "editable": True}

app.layout = html.Div(
    [
        dcc.Markdown("Custom Date Picker Cell Editor Example"),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
dashGridOptions = {"stopEditingWhenCellsLoseFocus": True,}
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=True)
10

I’ll give that a shot! It would have been smart of me to check I was one the latest release of it, wouldn’t it :man_facepalming:

Thanks and I’ll update back when I get a chance to try it out over the next few days.

1 Like
11

I have AG Grid 2.3.0 but this does not work for me.
Could you give a list of your package versions?
Maybe something else is different. Btw im using python 3.9 but that shouldn’t change anything.

12

I did update to dash-ag-grid==2.3.0 and still experiencing the same behavior. Best way to describe it is that I have a aggrid towards the bottom of the page. Click in a datepicker field and the date picker comes up. Select a date and the page scrolls back to the top as if focus is being sent to another item. No date is submitted to the field and the date picker is still visible.

If I ever get that portion fixed, I’ll update back here.

13

Does it have any console errors?