Dash AG Grid - Conditionaly apply css style to custom html cellRenderer

Dash Python
1

Hi!

I have Conditional Row Classes with my grid

rowClassRules = {
    'closed-incident-row': 'params.data.is_closed == true && params.data.is_incident == true',
    'closed-event-row': 'params.data.is_closed == true && params.data.is_incident == false',
    'incident-row': 'params.data.is_closed == false && params.data.is_incident == true',
}

So my grid looks like this

grid
grid1254×186 18.8 KB

Row classes work well. No questions to them.

In my grid I have a column with custom cellRenderer for rendering html link (the column ‘Описание’ or Description on the screenshot).

{
    'field': 'description',
    'headerName': 'Описание',
    'flex': 1,
    'cellRenderer': 'EventLink',
    'wrapText': True,
}

dashAgGridComponentFunctions.js

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.EventLink = function (props) {
    let class_;

    if (props.data.is_incident === true || props.data.is_closed === true) {
        class_ = 'black-font';
    } else {
        class_ = 'white-font'
    }

    return React.createElement(
        'a',
        {
            href: 'http://localhost:8050/event/' + props.data._id,
            className: class_,
            target: '_blank'
        },
        props.data.description
    );
};

CSS styles

.closed-incident-row {
    background-color: var(--mantine-color-red-5) !important;
    background-image: linear-gradient(to right, var(--mantine-color-red-5), var(--mantine-color-red-5), var(--mantine-color-green-5) 70%) !important;
    color: black !important;
}

.closed-event-row {
    background-color: var(--mantine-color-green-5) !important;
    color: black !important;
}

.incident-row {
    background-color: var(--mantine-color-red-5) !important;
    color: black !important;
}

.black-font {
    color: black;
    text-decoration: none;
}

.white-font {
    color: whitesmoke;
    text-decoration: none;
}

As you can see I want to make black font color in description column if any Conditional Row Class is applied.
The problem is when I update is_closed or is_incident columns via Transaction Update, only conditional row classes are applied but not the style in my EventLink function. I have to fully refresh the grid to rerender description column.

2

Hello @yukian72,

If you are set on using the renderer to perform the color, then you need to redraw the rows in order to rerender.

However, you could add another layer of the css so that it targets the link that are children of the row with the conditional formatting.

3

Could you please explain both options?

  1. How to redraw rows by their IDs?
  2. What do you mean by “another layer of css”? How it can be done?
4

Something like this for the css:

.closed-incident-row {
    background-color: var(--mantine-color-red-5) !important;
    background-image: linear-gradient(to right, var(--mantine-color-red-5), var(--mantine-color-red-5), var(--mantine-color-green-5) 70%) !important;
    color: black !important;
}

.closed-event-row {
    background-color: var(--mantine-color-green-5) !important;
    color: black !important;
}

.incident-row {
    background-color: var(--mantine-color-red-5) !important;
    color: black !important;
}

.black-font {
    color: black;
    text-decoration: none;
}

.white-font {
    color: whitesmoke;
    text-decoration: none;
}

.closed-incident-row, .closed-event-row, .incident-row {
    .white-font {
        color: black;
    }
}

For the row, you’d have to look as how you are applying transactions. You could use the event listener rowDataUpdated, JavaScript Grid: Grid Events Reference | AG Grid to trigger the redrawrows. The rowDataUpdated doesnt pass rows, so it’d be all rows refreshing.

2 Likes
5

Thank you for helping!

My managed to handle the problem via eventListeners

1-st step

table = dag.AgGrid(
    id="events-table",
    className='ag-theme-quartz-dark',
    dashGridOptions={'pagination': True,
                     'paginationPageSize': 30,
                     'domLayout': 'autoHeight',
                     'rowSelection': 'multiple',
                     'suppressRowClickSelection': True},
    getRowId='params.data._id',
    rowClassRules=rowClassRules,
    style={'height': None},
    eventListeners={'rowDataUpdated': ['refreshCells(params, setGridProps)']}
)

2-nd step
dashAgGridFunctions.js

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

dagfuncs.refreshCells = (params, setGridProps) => {
    params.api.refreshCells({force: true, columns: ['description']});
    return undefined;
};
1 Like
6

You might be able to just use the params.api bit in the function without needing to define it in the assets folder.