Migrating from 1.x to 2.0

This guide can help you update your apps if you’re a Dash Enterprise customer migrating from Dash AG Grid 1.x to the open-source version of Dash AG Grid, 2.0.

The release of Dash AG Grid as an open-source library with version 2.0 has introduced new features and includes some breaking changes. This guide will walk you through updating apps created using the v1.x series to run with 2.0.

Breaking Changes

Migration Steps

To update your apps using Dash AG Grid v1.x to v2.0:

  1. Update the Dash AG Grid version in your app’s requirements.txt file.
    python dash-ag-grid==2.0.0
  2. If you use Dash Design Kit in your app, update to version 1.8.1.
    Reach out to support for the URL where you can download Dash Design Kit 1.8.1 from, add the downloaded file to the root folder of your app, and add it to your app’s requirements.

Add new DDK

  1. Replace agGridColumn components in your app with a list of column definitions and pass it to columnDefs.

    1.x
    python ... dag.AgGrid( id="ag-grid-children", columnSize="sizeToFit", rowData=rowData, style={"height": "200px"}, children=[ dag.AgGridColumn( id="column1", field="make", sortable=True, ), dag.AgGridColumn(id="column2", field="model"), dag.AgGridColumn( id="column3", field="price", ), ], ), ...

    2.0
    ```python

    columnDefs = [
    {“headerName”: “Make”, “field”: “make”, “sortable”: True},
    {“headerName”: “Model”, “field”: “model”},
    {“headerName”: “Price”, “field”: “price”},
    ]

    dag.AgGrid(
    id=”ag-grid-children-1”,
    columnSize=”sizeToFit”,
    columnDefs=columnDefs,
    rowData=rowData,
    style={“height”: “200px”},
    )…
    ```

  2. Rename the theme property on AgGrid components to className and prepend ag-theme- to any AG Grid-provided theme names.

    Here is an example with the balham theme:

    1.x
    ```python
    dag.AgGrid(
    columnDefs=[
    {
    “headerName”: x,
    “field”: x,
    }
    for x in df.columns
    ],
    rowData=df.to_dict(“records”),
    theme=”balham”,
    columnSize=”sizeToFit”,
    style={“height”: “250px”},
    ),

    ```

    2.0
    ```python
    dag.AgGrid(
    columnDefs=[
    {
    “headerName”: x,
    “field”: x,
    }
    for x in df.columns
    ],
    rowData=df.to_dict(“records”),
    className=”ag-theme-balham”,
    columnSize=”sizeToFit”,
    style={“height”: “250px”},
    ),

    `` If you are using the AG Grid "alpine" theme, this is now the default, so you can delete thethemeproperty, and you don't need to addclassName=”ag-theme-alpine”`.

  3. Allow code execution on any AgGrid that renders raw HTML with Markdown by setting dangerously_allow_code=True on the grid.

    Example grid using HTML:

    ``python rowData = [ { "make": "*Toyota* in italics", "model": "code snippet`”,
    “link”: “Bold link*”,
    “image”: f”{rain} {rain} {rain} {rain} {rain}”
    },
    {
    “make”: “Ford in bold”,
    “model”: “Mondeo”,
    “link”: ‘<a>Link to new tab<a>‘,
    “image”: f”{sun} {sun} {sun} {sun}”
    },
    {
    “make”: “
    Porsche*** in both”,
    “model”: “<b>Boxster<b> in HTML bold”,
    “link”: “Example”,
    “image”: rain,
    },
    ]

    raw_html_example1 = html.Div(
    [
    dcc.Markdown(
    “This grid has both Markdown and raw HTML. By default, raw HTML is not rendered.”
    ),
    dag.AgGrid(
    columnSize=”sizeToFit”,
    columnDefs=columnDefs,
    rowData=rowData,
    ),
    html.Hr(),
    ]
    )
    ```

    Set dangerously_allow_code=True to render the HTML link in 2.0:

    python dag.AgGrid( columnSize="sizeToFit", columnDefs=columnDefs, rowData=rowData, dangerously_allow_code=True, ),

  4. Update cell expressions to indicate they should be executed as code. Add a dict with a function key and the string to be executed as that key’s value.

    1.x

    python columnDefs = [ {"headerName": "Make", "field": "make", "sortable": True}, {"headerName": "Model", "field": "model"}, {"headerName": "Price", "field": "price", "valueFormatter": "Number(value).toFixed(2)"}, ]
    2.0

    python columnDefs = [ {"headerName": "Make", "field": "make", "sortable": True}, {"headerName": "Model", "field": "model"}, {"headerName": "Price", "field": "price", "valueFormatter": {"function": "Number(params.value).toFixed(2)"}}, ]

    Alternatively, you can set dangerously_allow_code=True on the grid, as shown in the previous HTML example.

  5. Move any cellStyle properties on your grids to column definitions, defaultColDef or columnDefs.

    1.x

    python dag.AgGrid( columnDefs=[{"headerName": i, "field": i} for i in df.columns], rowData=df.to_dict("records"), columnSize="sizeToFit", defaultColDef=dict( resizable=True, ), cellStyle={ "styleConditions": [ { "condition": "colDef.headerName == 'State'", "style": {"backgroundColor": "LightPink", "color": "DarkBlue"}, }, ] }, ),

    2.0

    ```python
    defaultColDef = {
    “cellStyle”: {
    “styleConditions”: [
    {
    “condition”: “params.colDef.headerName == ‘State’“,
    “style”: {“backgroundColor”: “LightPink”, “color”: “DarkBlue”},
    },
    ]
    },
    “resizable”: True,
    }

    app.layout = html.Div(
    [
    dag.AgGrid(
    columnDefs=[{“headerName”: i, “field”: i} for i in df.columns],
    rowData=df.to_dict(“records”),
    columnSize=”sizeToFit”,
    defaultColDef=defaultColDef,
    ),
    ]
    )
    ```

  6. Prefix any cellStyle parameters with params.

    Here is an example of styling based on the column definition header name.

    1.x

    python "cellStyle": { "styleConditions": [ { "condition": "colDef.headerName == 'State'", "style": {"backgroundColor": "LightPink", "color": "DarkBlue"}, }, ] },

    2.0

    python "cellStyle": { "styleConditions": [ { "condition": "params.colDef.headerName == 'State'", "style": {"backgroundColor": "LightPink", "color": "DarkBlue"}, }, ] },

  7. Update the names of the following properties:

    • enableResetColumnState to resetColumnState
    • enableExportDataAsCsv to exportDataAsCsv
    • selectionChanged to selectedRows
    • clickData to cellRendererData
  8. Remove the autoSizeAllColumns property anywhere it is used and replace with
    columnSize: "autoSize". If you want to skip headers, set columnSizeOptions: {"skipHeader": True}.

  9. In places in your app that use cellRendererData and you access the row data in a callback, update your callback with a State that gets all rowData and then filter that data as required.

    1.x
    python @app.callback( Output("span-click-data", "children"), Input("ag-grid-menu", "clickData"), ) def show_click_data(clickData): if clickData: return "You selected option {} from the row with make {}, model {}, and price {}.".format( clickData["value"], clickData["data"]["make"], clickData["data"]["model"], clickData["data"]["price"], ) return "No menu item selected."

    2.0
    python @app.callback( Output("span-click-data", "children"), Input("ag-grid-menu", "cellRendererData"), State("ag-grid-menu", "rowData"), ) def show_click_data(cellRendererData, rowData): if cellRendererData: row_index = cellRendererData['rowIndex'] rowData = rowData[row_index] return "You selected option {} from the row with make {}, model {}, and price {}.".format( cellRendererData['value'], rowData["make"], rowData["model"], rowData["price"], ) return "No menu item selected."

  10. Move any valid AG Grid properties on your AgGrid components that are not listed in the reference section at the end of the Dash AG Grid reference page to the property dashGridOptions, which is new in 2.0.

    Example with headerHeight property, now available on dashGridOptions

    1.x

    python dag.AgGrid( columnSize="sizeToFit", columnDefs=columnDefs, rowData=rowData, defaultColDef=dict(resizable=True), headerHeight=70 ),

    2.0
    python dag.AgGrid( columnSize="sizeToFit", columnDefs=columnDefs, rowData=rowData, defaultColDef=dict(resizable=True), dashGridOptions={ "headerHeight": 70, }, ),

  11. To test your app, reinstall your app’s requirements and run the app.

  12. Follow the instructions to deploy to Dash Enterprise.