Dash Ag Grid Migration Isue

Dash Python
1

I was trying to follow the Migration Documents for Upgrading Ag Grid 31.3 to 32.3 and it seems like with the depreciations there is an issue with pinned columns and checkboxes

import dash

from dash import html

import dash_ag_grid as dag

import dash_mantine_components as dmc

app = dash.Dash(_name_)

# Sample data

data = [

{"Name": "Alice", "Age": 30, "City": "New York"},

{"Name": "Bob", "Age": 25, "City": "London"},

{"Name": "Charlie", "Age": 35, "City": "Paris"},

{"Name": "Alice1", "Age": 30, "City": "New York"},

{"Name": "Bob1", "Age": 25, "City": "London"},

{"Name": "Charlie1", "Age": 35, "City": "Paris"},

{"Name": "Alice2", "Age": 30, "City": "New York"},

{"Name": "Bob2", "Age": 25, "City": "London"},

{"Name": "Charlie2", "Age": 35, "City": "Paris"},

]

column_defs_v31_3 = [

{

    "headerName": "Name",

    "field": "Name",

    "filter": True,

    "checkboxSelection": True,

    "headerCheckboxSelection": True,

    "pinned": "left",

    "lockPinned": True,

    "cellClass": "lock-pinned",

    "headerCheckboxSelectionFilteredOnly": True,

    "filterParams": {

        "maxNumConditions": 10,

        "closeOnApply": True,

        "buttons": \["reset"\],

    },

},

{

    "headerName": "City",

    "field": "City",

    "filter": "agTextColumnFilter",

    "filterParams": {

        "maxNumConditions": 10,

        "closeOnApply": True,

        "buttons": \["reset"\],

    },

},

{"headerName": "Age", "field": "Age"},

]

column_defs_v32_3 = [

{

    "headerName": "Name",

    "field": "Name",

    "filter": True,

    "pinned": "left",

    "lockPinned": True,

    "cellClass": "lock-pinned",

    "filterParams": {

        "maxNumConditions": 10,

        "closeOnApply": True,

        "buttons": \["reset"\],

    },

},

{

    "headerName": "City",

    "field": "City",

    "filter": "agTextColumnFilter",

    "filterParams": {

        "maxNumConditions": 10,

        "closeOnApply": True,

        "buttons": \["reset"\],

    },

},

{"headerName": "Age", "field": "Age"},

]

dashGrd_options_31_3 = {

"rowSelection": "multiple",

"suppressRowClickSelection": False,

"pagination": True,

"paginationPageSizeSelector": False,

"suppressPaginationPanel": True,

"animateRows": False,

"suppressRowClickSelection": False,

"overlayNoRowsTemplate": '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow; ">Select a repository</span>',

}

dashGrd_options_32_3 = {

"rowSelection": {

    "mode": "multiRow",

    "enableClickSelection": False,

    "checkboxes": True,

    "headerCheckbox": True,

    "selectAll": "filtered",

},

"pagination": True,

"paginationPageSizeSelector": False,

"suppressPaginationPanel": True,

"animateRows": False,

"suppressRowClickSelection": False,

"overlayNoRowsTemplate": '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow; ">Select a repository</span>',

}

app.layout = dmc.MantineProvider(

forceColorScheme="dark",

children=html.Div(

    \[

        dmc.Title("Simple Dash AG Grid Table", order=2, m=20),

        dag.AgGrid(

            id="my-table",

            rowData=data,

            columnDefs=column_defs_v32_3,

            dashGridOptions=dashGrd_options_32_3,

            dangerously_allow_code=True,

            defaultColDef={

                "resizable": True,

                "sortable": True,

                "editable": False,

                "wrapHeaderText": True,

                "autoHeaderHeight": True,

                "wrapText": True,

                "cellStyle": {

                    "wordBreak": "normal",

                    "lineHeight": "unset",

                },

            },

        ),

    \]

),

)

if _name_ == “_main_”:

app.run(debug=True)

If I am using the prior options dashGrd_options_31_3 and column_defs_v31_3 - this is the expected output

image
image536×441 10.5 KB

But I switch to the latest version definition

image
image539×432 10 KB

Am I missing some changes? It seems like the pinned column is creating the trouble - if I comment out the pinned property and lockpinned from column definition - the behavior is almost same - except the pinned column

2

hi @sssaha1989 ,

hmm, I haven’t fully figured out the exact cause of this issue yet, but you may consider trying the approach I just found manually adding a checkbox column as the first column with headerCheckboxSelection=True and disabling the automatic selection column.

just like:

column_defs_v32_3 = [
    {
        "headerName": "",
        "checkboxSelection": True,
        "headerCheckboxSelection": True,
        "pinned": "left",
        "lockPinned": True,
        "width": 40,
        "mode": "multiRow",
    },
    {
        "headerName": "Name",
        "field": "Name",
        "filter": True,
        "pinned": "left",
        "lockPinned": True,
        "filterParams": {
            "maxNumConditions": 10,
            "closeOnApply": True,
            #    "buttons": \["reset"\],
        },

...


dashGrd_options_32_3 = {
    "rowSelection": {
        "mode": "multiRow",
        "checkboxes": False,
        "headerCheckbox": False,
    },
    "pagination": True,
    "paginationPageSizeSelector": False,
    "suppressPaginationPanel": True,
    "animateRows": False,
    "suppressRowClickSelection": False,
    "overlayNoRowsTemplate": '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow; ">Select a repository</span>',
}

br

3

That parameter is going to be deprecated (Migration guides | Dash for Python Documentation | Plotly) according to the migration guide. I can always force my version to 32.3.0 and do no further upgrade and then my existing code will work. So I have a solution that will work for me - but I was hoping to let people know about the bug. I can post this as an issue in DASH AG GRID github.

4

@sssaha1989

in dashGridOptions add this:

"selectionColumnDef": {
        "pinned": 'left'
      }

More info in this issue:

1 Like