Dash AG Grid: getRowStyle through JS function

Dash Python
1

Hello, I have a requirement to calculate a getRowStyle through a JS function, as I have tried here:

import dash_ag_grid as dag
from dash import Dash, html

app = Dash()

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
]

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

getRowStyle = {
    "function": "rowStyleFunction(params)",
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-conditional-style2",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            getRowStyle=getRowStyle,
            dashGridOptions={"animateRows": False},
        ),
    ],
)

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

where my assets/custom.js looks like this:

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

dagfuncs.rowStyleFunction = function (params) {
  console.log("rowStyleFunction called");
  return { backgroundColor: "blue", color: "white" };
};

Is this not possible? The function is not being called, even though when I do the exact same through cellStyle in the column defs, it works fine.

My dash-ag-grid version is 31.2.0, dash is 2.18.2, and python is 3.11.0

2

Hello @O_E_J,

Welcome to the community!

I believe you can just pass the function without needing to wrap it as a dictionary. It assumes that you are passing a function as this is what get implies in getRowStyle. :grin:

3

Thank you for the quick reply!

Do you mean like this?

getRowStyle = "getRowStyle(params)"

Then I get an error that it expects an object and not a string:

error.js:16 Error: Invalid argument `getRowStyle` passed into AgGrid with ID "styling-rows-conditional-style2".
Expected `object`.
Was supplied type `string`.
Value provided: "getRowStyle(params)"
4

My mistake, its looking for not being declared as a function.

It’s looking for something styled like this:

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.data.sickDays > 5 && params.data.sickDays <= 7",
            "style": {"backgroundColor": "sandybrown"},
        },
        {
            "condition": "params.data.sickDays >= 8",
            "style": {"backgroundColor": "lightcoral"}
        },
    ],
    "defaultStyle": {"backgroundColor": "grey", "color": "white"}
}

Now, this can be changed by using the getApi as adding your custom function to the grid options directly.

Alternatively, you could open a issue on the github, as I think that this function should exist.

5

Thank you, I opened one :slight_smile:

1 Like