RowStyling Dash AgGrid on selection

Dash Python
1

Is it possible to change the row height of a selected row either in a callback or using a getRowStyle condition. In my case I have a description column with a lot of text that I do not want to display initially until a user selects the row, in which case I would like the row height to increase to display the overflowing, wrapped text. I am partially able to achieve this using the condition below but the selected row is simply displayed transparently on-top of the rows below it and thus cannot be read.

getRowStyle = {
“styleConditions”: [“condition”: “params.node.isSelected()”,
“style”: {“height”:“300px”,
“classes”: “selected-row”},
]
}

2

Hello @kbally,

Yes, this is possible, but it requires redrawing the rows because you are adjusting the already rendered rows:

import dash_ag_grid as dag
from dash import Dash, html, Input, Output
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

columnDefs = [
    {"headerName": "Employee", "field": "employee", "checkboxSelection": True},
    {"headerName": "Number Sick Days", "field": "sickDays"},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Shellie Umland", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
            dashGridOptions={'rowSelection': 'single', "getRowHeight": {"function": "params.node.isSelected() ? 50 : 20"}},
            defaultColDef={'flex': '1', 'autoHeight': True},
            getRowStyle = {
            "styleConditions": [
                {
                    "condition": "params.node.isSelected()",
                    "style": {'color': 'red'} # make other styling changes here, cannot be height

                 }
            ]
            }
        ),
    ],
)

app.clientside_callback(
    """
    function (s) {
        dash_ag_grid.getApi('grid').redrawRows()
        return window.dash_clientside.no_update
    }
    
    """,
    Output('grid', 'id'),
    Input('grid', 'selectedRows'),
    prevent_initial_call=True
)

if __name__ == "__main__":
    app.run(debug=True)
1 Like
3

Thank you so so much!

1 Like