Use color picker to color rows in dag.AgGrid

Dash Python
1

Is there a way to use a color picker to then color/fill out the rows of a dag.AgGrid?
In my case I want to use the colors to indicate different priorities.

2

Hello @matti,

Yes, you can do this. I’d recommend using classRules.

Then have some way to change the variables via a color picker in the app.

1 Like
3

Thank you for your answer.

Is there a way to combine the classRules with a custom dagAgGrid with dcc.Dropdown by using the Cell Renderer component?

I have the following dashAgGridComponentFunctions.js file:

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

dagcomponentfuncs.Dropdown = function (props) {
    const {setData, data} = props;

    function selectionHandler() {
        const newValue = event.target.value;
        const colId = props.column.colId;
        props.node.setDataValue(colId, newValue);
        setData(event.target.value)
    }

    const options = props.colDef.cellEditorParams.values.map((opt) =>
        React.createElement('option', {}, opt)
    );

    return React.createElement(
        'div',
        {
            style: {
                width: '100%',
                height: '100%',
                padding: '5px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            },
        },
        React.createElement(
            'select',
            {
                value: props.value,
                onChange: selectionHandler,
            },
            options
        )
    );
};

My VSCode says that “event” component is deprecated. I don’t know if that has any impacts on the functionality…

This is my dagAgGrid:

dag.AgGrid(
                    id='row-dragging-managed-dragging-options',
                    rowData=measure_list,
                    columnDefs=columnDefs,
                    defaultColDef={"resizable": True, "sortable": True, "filter": True},
                    columnSize="sizeToFit",
                    getRowStyle=getRowStyle,
                    dashGridOptions={"rowDragManaged": True},
                    style={'height': '100%'}
                )

with this being my columnDefs and getRowStyle:

columnDefs = [
    {'field': 'Name', 'rowDrag': True, 'resizable': True},
    {'field': 'Cost', 'resizable': True},
    {'field': 'Priority', 'editable': True}
]

getRowStyle = {
    'styleConditions': [
        {
            'condition': 'params.data.priority == "Low Priority',
            'style': {'backgroundColor': '#33B864'}
        }
    ]
}

The only error message that is thrown is the following:


Line 1: Unexpected token ILLEGAL
16:06:17
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
Error: Line 1: Unexpected token ILLEGAL

    at e.constructError (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1381663)

    at e.createError (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1381882)

    at e.throwError (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1382005)

    at e.throwUnexpectedToken (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1386671)

    at e.scanStringLiteral (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1398576)

    at e.lex (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1402373)

    at e.nextToken (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1321312)

    at e.parseBinaryExpression (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1342038)

    at e.inheritCoverGrammar (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1324400)

    at e.parseConditionalExpression (http://127.0.0.1:8050/_dash-component-suites/dash_ag_grid/async-community.js:2:1342858)
4

Hello @matti,

You are missing a " in this block:

columnDefs = [
    {'field': 'Name', 'rowDrag': True, 'resizable': True},
    {'field': 'Cost', 'resizable': True},
    {'field': 'Priority', 'editable': True}
]

getRowStyle = {
    'styleConditions': [
        {
            'condition': 'params.data.priority == "Low Priority', ## <- here
            'style': {'backgroundColor': '#33B864'}
        }
    ]
}

As far as the event, yes, that is deprecated in some browsers, to fix, you need to do this:

function selectionHandler(event) {
        const newValue = event.target.value;
        const colId = props.column.colId;
        props.node.setDataValue(colId, newValue);
        setData(event.target.value)
    }

Event is automatically passed to the function as a listener.

getRowStyle only renders when the grid is first loaded with data, or any time all the data has to be refreshed. Altering a cell will not for it to rerender. This is why I commend using rowClassRules instead, since this is just going to switch the class.

Then you have a class in your css stylesheet to format it.

Other than that, do you have an image of what exactly you want to accomplish?

1 Like
5

Here is a simple example based on two examples in the docs:


import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)

rowClassRules = {
    "priority-1": "params.data.priority == 'High'",
    "priority-2": "params.data.priority == 'Medium'",
    "priority-3": "params.data.priority == 'Low'",
}

columnDefs = [
    {
        "headerName": "Text Editor",
        "field": "task",
        "cellEditor": "agTextCellEditor",
        "cellEditorParams": {
            "maxLength": 20,
        },
    },
    {
        "headerName": "Priority",
        "field": "priority",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": ["Low", "Medium", "High"],
        },
    },
    {
        "headerName": "Large Text Editor",
        "field": "description",
        "cellEditorPopup": True,
        "cellEditor": "agLargeTextCellEditor",
        "cellEditorParams": {
            "maxLength": 250,
            "rows": 10,
            "cols": 50,
        },
        "flex": 2,
    },
]


descriptiion = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
rowData = [
    {"task": "task 1", "priority": "High", "description": descriptiion},
    {"task": "task 2", "priority": "Medium", "description": descriptiion},
    {"task": "task 3", "priority": "Low", "description": descriptiion},
]


app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid has a regular text editor, select dropdown, and a large textarea editor."
        ),
        dag.AgGrid(
            id="cell-editor-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "sortable": True},
            rowClassRules=rowClassRules
        ),
        html.Div(id="cell-editor-div"),
    ],
    style={"margin": 20},
)


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

Add the following to the .css file in the assets folder:


.priority-1 {
    background-color: #d8f0d3 !important;
}
.priority-2 {
    background-color: #f6e3cc !important;
}
.priority-3 {
    background-color: #f5cccc !important;
}

ag-grid-row-colorpicker

3 Likes
6

Many thanks for your replies @jinnyzor @AnnMarieW.

@AnnMarieW:
The dropdown menu works now and I can switch between the different values.
However, I am not sure what you mean by

I created a aggrid.css file and added your code to that, but it does not seem to work.
I do not use BOOTSTRAP Theme btw, I only use DARKLY. Not sure if that has any impacts on the functionality (I mention that because BOOTSTRAP Theme is used in all the Styling Rows examples…).

7

First I wanted to use a color picker with three different colors to color the rows depending on their priority. Then I thought that a dropdown menu inside the table would be more suitable, so now I’m trying to implement that. I created a column called “Priority” with the dropdown menu in each cell of the column. So now the only part that is missing is the row background color switch depending on the selected priority…

8

HI @matti

Did you run my example as-is to make sure it works for you?

This will work with Bootstrap as well - however you may want to change the colors to something that looks nice with your theme – or just use Bootstrap classnames instead of making your own.

There can be several reasons why the color doesn’t show, but I can’t tell based on what you posted. Can you make minimal example?

9

Hi,

This is what I created so far:

rowClassRules = {
    "priority-high": "params.data.priority == 'High'",
    "priority-medium": "params.data.priority == 'Medium'",
    "priority-low": "params.data.priority == 'Low'",
}

columnDefs1 = [
    {'headerName': 'Name', 'field': 'Name'},
    {'headerName': 'Cost', 'field': 'Cost'},
    {'headerName': 'Priority', 'field': 'Priority', 'cellEditor': 'agSelectCellEditor', 'cellEditorParams': {'values': ['Low', 'Medium', 'High']}}
]

dag.AgGrid(
                    id='row-dragging-managed-dragging-options',
                    rowData=measure_list,
                    columnDefs=columnDefs1,
                    defaultColDef={"resizable": True, "sortable": True, "filter": True, "editable": True},
                    rowClassRules=rowClassRules,
                    columnSize="sizeToFit",
                    style={'height': '100%'}
                )

and then there is also a “aggrid.css” file in my assets folder with the following code:

.priority-high {
    background-color: #d8f0d3 !important;
}
.priority-medium {
    background-color: #f6e3cc !important;
}
.priority-low {
    background-color: #f5cccc !important;
}

The Dropdown works, but the background color doesnt change.
image

10

Hello @matti,

Your field name and params.data.<column name> must match, including case. :grin:

2 Likes
11

My brain still seems to be in weekend-mode…
Thank you @jinnyzor, everything works now.

1 Like