Dash Ag Grid first row TranslateY massive

Dash Python
1

Hi,

I’ve attached two screenshots of a part of my dash app, the top row of my Dash Ag Grid goes missing and when i use inspect i find it at the bottom of the page with a massive Transform: translateY.

Does anyone know why this is happening?
Usually triggered by filtering on a col a few times.

Screenshot(1)
Screenshot(1)2000×394 58 KB

Screenshot (2)
Screenshot (2)1920×1071 187 KB

2

I have the same problem. It seems this only happens when an filter is applied. The first row in my set should actually be filtered out but the row-index says 23 when I have 30 result out of 48 rows.

3

Hello @Jack126,

Welcome to the community!

Could please provide an example app where you can reproduce this happening?

4

Our apps run on a local server so can’t show the app but below is the part of the code that we use for making the grid.
But I just found a solution (sort of). It seems the getRowId=“params.data.State” was causing the problem. I turned this off and the problem is gone. My colleague was facing the same problem and this also worked for him. I’m not using this rowId at the moment but we will in the future.

We added the column ‘akkoord’ with a checkbox so the user can mark the rows. Once a selection is made the user should be able to submit the selection and we will write back to our database. These lines will then be filtered out at the next database call. To achieve this we probably would need the rowId and we could get the same problem again.



df= sq.Query().get_df()

# Select columns and options for table
def create_ag_grid_layout(data = df, id :str = 'grid_layout'):
    # function to create a date object from a date string "YYYY-MM-DD"
    date_obj = "d3.timeParse('%Y-%m-%d')(params.data.Leverdatum)"
    date_obj2 = "d3.timeParse('%Y-%m-%d')(params.data.Productiedatum)"
    
    columnDefs = [
    { 'field': 'Jaar','filter':'agNumberColumnFilter','filter':True, 'defaultOption':'equals','floatingFilter': True, "width":'130rem'},
    { 'field': 'Week','filter':True,'floatingFilter': True, 'filter':'agNumberColumnFilter', "width":'130rem'},
    
    { 'field': 'Leverdatum', "valueGetter": {"function": date_obj},
                             "valueFormatter": {"function": f"d3.timeFormat('%d-%m-%Y')({date_obj})"}}, # formatteer de datum naar dd-mm-yyyy. In de callbacks worden deze omgezet
    { 'field': 'Debiteur',  "filter": "agTextColumnFilter",'floatingFilter': True},
    { 'field': 'OrderNr', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'ArtikelNr', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'Artikelnaam', "filter": "agTextColumnFilter",'floatingFilter': True},
    { 'field': 'Aantal', 'filter':'agNumberColumnFilter',"width": "130%",'floatingFilter': True},
    { 'field': 'RegAantal', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'VrdPartij', 'headerName': 'PartijNr' , 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'Productiedatum', "valueGetter": {"function": date_obj2},
                                 "valueFormatter": {"function": f"d3.timeFormat('%d-%m-%Y')({date_obj2})"},
                                 'filter':'agDateColumnFilter','floatingFilter': True},
    { 'field': 'VrdInkoopArtikel', 'filter':True, 'floatingFilter': True},
    { 'field': 'Bandbreedte','filter':True,'floatingFilter': True},
    { 'field': 'Leeftijd', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'VerschilInWeken', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field': 'BinnenOfBuiten', 'filter':True,'floatingFilter': True},
    { 'field': 'WknKoelCel', 'filter':'agNumberColumnFilter','floatingFilter': True},
    { 'field':'Akkoord', "checkboxSelection": True}
                ]   
    grid_layout = html.Div([
        dag.AgGrid(
            id = id,
            rowData = data.to_dict("records"),
            columnDefs = columnDefs,
            defaultColDef={"resizable": True, "sortable": True,'filter':True},
            columnSize="sizeToFit", #autoSize    sizeToFit    responsiveSizeToFit 
            filterModel = {'BinnenOfBuiten' : {'filterType':'text', 'type':'Equals', 'filter':'Buiten'}
                           'RegAantal': {'filterType':'agNumberColumnFilter', 'type':'Equals', 'filter': 0},
                           }, 
            #getRowId="params.data.State",           
            dashGridOptions = {"domLayout" : "autoHeight", "pagination":True, "paginationPageSize" : 20, "animateRows":True },
            
        ),
        ])
    return grid_layout
5

Ah, yes.

If you have something as the rowId that is not unique, you will run into all sorts of issues with the grid behaving funny.

It order to avoid, you need to make sure that you are only using unique ids. If a single column is not unique, then you can merge different columns to make it so.

eg:

getRowId="`${params.data.State}-${params.data.City}-${params.data.Zip}-${params.data.Address}`"
1 Like