Dash AG-Grid : infinite scroll with a date filter BUG?

Dash Python
,
1

There seems to be a problem with date filters when in rowModelType="infinite" mode.

(as a follow up of the BigData Question)
@jinnyzor brought on a fine solution to handle filtering and sorting on very large tables on the server side by setting rowModelType="infinite".
The link with the solution (second code block) covers filtering of numbers and text columns, but not date filtering.
Trying to implement serverside date filtering, I bumped on an, I presume, unsolvable issue.

"""
Simple column filters - number filter and text filter
"""

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

app = Dash(__name__)


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

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
    {'field':'date',
        "headerName": "LLS_Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
    },
]

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


app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(
            id="grid",
            rowModelType="infinite",
            columnDefs=columnDefs, 
            defaultColDef=defaultColDef
            ),
    ],
    style={"margin": 20},
)


@app.callback(
    Output("grid", "getRowsResponse"),
    Input("grid", "getRowsRequest"),
    #Input('tempFilter', 'value')
)
def serverside_date_filter(request):

    if request:
        print('TODO : PROCESS DATETIME FILTER on SERVER-SIDE...')
        pprint.pprint(request)
        return {"rowData": df.copy().to_dict("records")}



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

When rowModelType=“infinite”`, the agDateColumnFilter returns errors on the client:

Cannot read properties of undefined (reading ‘date’)

Did anyone encounter something similar?

Note that the serverside date filtering itself is not implementied yet.
The code works fine (except filtering) when commenting out the date filtering part in the col defs:

        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
2

Probably completely unrelated, but I have observed anomalous behaviours with dates when cached on the server:

3

Is there any chance of this to be resolved in the near future?

Are there any viable workarounds?

4

Hello @popo,

The issue is with your valueGetter, you need to use something like this if you expect there to be empty values.

"valueGetter": {"function": "params.data.date ? d3.timeParse('%d/%m/%Y')(params.data.date) | null"},
 "valueFormatter": {"function": "params.value"},
5

For future readers here is how I was able to solve the problem.

When using rowModelType="infinite" I could not use valueGetter without getting the following error even though every row had a value in the date column and the date column existed.

Cannot read properties of undefined

It seems like Ag Grid looks at the column defs and runs the valueGetter function before the data is loaded into the table. Here is what worked for me.

dashAgGridComponentFunctions.js

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.DateParse = function (params) {
    if(params.data) return d3.timeParse('%Y-%m-%d')(params.data.date)
};

Then update the columnDefs for the date column

'valueGetter': {'function': "DateParse(params)"},
'valueFormatter': {'function': "d3.timeFormat('%b. %d, %Y')(params.value)"}

You will also need to add the following to external_scrips

"https://d3js.org/d3.v4.min.js"
2 Likes