Ag grid numeric fields allow non-numeric edits

Dash Python
1

I am converting from datatable to ag grid. In datatable numeric fields would not allow entering non numeric data. It appears that a numericColumn in ag grid allows non numeric data. This means I have to handle it in a callback which is more work than the way datatable handles it. Is that correct?
Another issue I am having with ag grid that I cannot reproduce as a minimal example is the following:
For some reason, when I am typing in the filter field to filter a column, the filter field loses focus and I have to click back in the filter field to continue typing. I have tried to reproduce with a minimal example but I cannot. I can make my big program not have the issue anymore but I have to lose some functionality to do it.

In the program that I am seeing the issue I have something like this:

app.layout = dbc.Container([dbc.Card(dbc.CardBody([html.Button(id='clear-filter', children='Clear Filter',
                                                               disabled=True),
                                                   dcc.Loading(children=[dbc.Tabs([dbc.Tab(datatable,
                                                                                           label='Product Detail'),
                                                                                   # dbc.Tab(datatable,
                                                                                   #         label='Product Detail2')
                                                                                   ])])])),
                            dcc.Store(id='save-changes-msg-store')], fluid=True)

If I remove the dcc.Loading around the tabs the problem goes away. The loading clears the screen for an instant and shows the loading bars and when the tab is shown again I still see what I had in the filter but the focus is no longer in the filter bar forcing me to click in the filter bar after each character I type to continue typing. It is very annoying.

2

Hi Brent,

For the first issue, you can use a custom number input component like the last example on this page.

Note when Dash AG Grid upgrades to use AG Grid 30.0, (coming soon??) this custom number input will not be necessary as it will be the default for any numeric field. See AG Grid Cell Data Types for more info.

For the second issue, I’ve never seen that before – if you find a way to reproduce the problem, that would be helpful.

1 Like
3

Hello @Brent,

This is one of the reasons I avoid using the loading currently. It is very sensitive, and since you are updating the filterModel with each key stroke, it will spam the loading of the component because the component is adjusting each time.

1 Like
4

@Brent

For the second issue, try using dbc.Spinner instead of dcc.Loading.

The dbc.Spinner has a delay_show prop that might help:

delay_show (number ; default 0 ): When using the spinner as a loading spinner, add a time delay (in ms) to the spinner being shown after the loading_state is set to True.

1 Like
5

Thanks for the help. I got the number input working. I tried dbc.Spinner and it does the same thing as dcc.Loading. Removing Loading and Spinner fixes the problem so it definitely has something to do with Loading. I would like for the user to get some kind of visual that it is loading. If I get time, I will start with my big program and keep paring it down until I get a minimal example of the bad behavior. I have already spent several hours trying to get a minimal example displaying the bad behavior. If anyone is interested, I could do a teams or zoom meeting and run my big program to show the behavior.

6

Are you using the Infinite row model? Would adding a loading spinner to the rows work instead?

ag-grid-infinite-spinner

7

You could also just use the loadingOverlay in the Grid if you arent using infinite scroll, just dont pass any rowData and populate it in a callback.

8

No, I am not using the infinite row model. I have the loading spinner because I actually have 7 tabs each displaying a grid of data that I retrieve from database tables. The only time the loading spinner would display is when initially opening the page and retrieving all of the data.

By the way. Since I asked 2 questions, I am not sure what I should do to mark the solution. Should I just mark your answer for the numeric as the solution and open a new question if I am able to get a min example?

9

Hi @Brent

Yes, it would be helpful to open a new topic for the second issue - even if you don’t have a minimal example yet. It will make it easier to find, and maybe someone else will have a solution :slightly_smiling_face:

10

@Brent

Just thought of another thing to try for the second issue: Include an “apply” button to the filter:

When the Apply button is used, the filter is only applied once the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if using server-side filtering (thus preventing unnecessary calls to the server). Pressing Enter is equivalent to pressing the Apply button.

See an example here:

1 Like