Format the cell in the selected row. Dash Agrid

Dash Python
1

I want format the cell in the selected row. That possible ? Below example not working

cell_styles = {
    'if_function': {
        "function": "params.node.isSelected() ? {'backgroundColor': '#D0F0C0'} : {'backgroundColor': null}"
    },
    
}

columnsDefs=[
{'field': 'Lp',"checkboxSelection": True},
{"field": 'Typ',"cellStyle":cell_styles['if_function']}
]
2

Hello @Mar7872x,

What version of dag are you using?

3
  1. Name: dash_ag_grid Version: 31.3.0
  2. Name: dash Version: 2.18.2
4

Can you provide a full example?

Are there any console errors that you can see?

5

I want the cell in the ‘status’ column to change its background color when I select the row.

Currently, this only happens when I first select the row and then choose an option from the dropdown. But I want to get this effect immediately when I select the row.

By the way :slight_smile: …

In the final version, I would like the cell in the ‘status’ column to change color only when the row is selected AND the ‘status’ cell is empty." - A colored empty cell in the ‘status’ column should indicate that there is an option to be selected there.

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


app = dash.Dash(__name__)


rowData = [
    {'Lp': 'P001', 'productName': 'Laptop', 'status': None},
    {'Lp': 'P002', 'productName': 'Mouse', 'status': None},
    {'Lp': 'P003', 'productName': 'Keyboard', 'status': None},
    {'Lp': 'P004', 'productName': 'Monitor', 'status': None},
    {'Lp': 'P005', 'productName': 'Webcam', 'status': None},
]
cell_styles = {
    'if_function': {
        "function": "params.node.isSelected() ? {'backgroundColor': '#FF0000'} : {'backgroundColor': null}"
    }
    
}
# Definicje kolumn
columnDefs = [
    {
        "headerName": "Lp",  
        "field": "Lp",       
        "editable": False,
        "checkboxSelection": True               
    },
    {
        "headerName": "Product Name", 
        "field": "productName",      
        "editable": False,
    },
    {
        "headerName": "Status",  
        "field": "status",
        "cellStyle":cell_styles['if_function'],
        "editable": True,            
        "cellEditor": 'agSelectCellEditor',
        "cellEditorParams": {
            'values': ['Available', 'Out of Stock', 'On Order', 'Discontinued']
        }
    }
]



# Układ aplikacji Dash
app.layout = html.Div([
    dag.AgGrid(
        id='my-simple-grid',
        rowData=rowData,                
        columnDefs=columnDefs,          # Prze  
        dashGridOptions={"rowSelection": "multiple","suppressRowClickSelection": True,"domLayout": "autoHeight","animateRows": False},
        
    )
])


if __name__ == '__main__':
    app.run_server(debug=True)
6

I think you’ll also need to update the target node when the selections change. :slight_smile:

7

What do you mean by ‘target node’? I don’t understand that.

8

image
image797×339 4.24 KB

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

app = dash.Dash(__name__)

rowData = [
    {'Lp': 'P001', 'productName': 'Laptop', 'status': None},
    {'Lp': 'P002', 'productName': 'Mouse', 'status': None},
    {'Lp': 'P003', 'productName': 'Keyboard', 'status': None},
    {'Lp': 'P004', 'productName': 'Monitor', 'status': None},
    {'Lp': 'P005', 'productName': 'Webcam', 'status': None},
]
cell_styles = {
    'if_function': {
        # "function": "log(params)",
        "function": "params.node.isSelected() ? {'backgroundColor': '#FF0000'} : {'backgroundColor': null}"
    }

}
# Definicje kolumn
columnDefs = [
    {
        "headerName": "Lp",
        "field": "Lp",
        "editable": False,
        "checkboxSelection": True
    },
    {
        "headerName": "Product Name",
        "field": "productName",
        "editable": False,
    },
    {
        "headerName": "Status",
        "field": "status",
        "cellStyle": cell_styles['if_function'],
        "editable": True,
        "cellEditor": 'agSelectCellEditor',
        "cellEditorParams": {
            'values': ['Available', 'Out of Stock', 'On Order', 'Discontinued']
        }
    }
]

# Układ aplikacji Dash
app.layout = html.Div([
    dag.AgGrid(
        id='my-simple-grid',
        rowData=rowData,
        columnDefs=columnDefs,  # Prze
        dashGridOptions={"rowSelection": "multiple", "suppressRowClickSelection": True, "domLayout": "autoHeight",
                         "animateRows": False},
        eventListeners={'rowSelected': ['params.api.redrawRows()']}

    )
])

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

This uses the event listeners of the grid to trigger the redrawing of the rows (this is used to calculate the cell styles again). :slight_smile:

2 Likes
9

Nice , I first time see ‘‘event listeners’’ . Working properly ! :slight_smile: Thx a lot

"function": "params.node.isSelected() && params.value === null ? {'backgroundColor': '#FF0000'} : {'backgroundColor': null}"

Solution:

eventListeners={'rowSelected': ['params.api.redrawRows()']}
2 Likes