AG Grid Cell Editing with using string values

Dash Python
1

Hi, I was looking at this documentation:

In the following example, they show how to make a specific column cell editable if it matches the condition:

“editable”: {“function”: “params.data.year == 2012”},

image
image741×696 27.5 KB

I’m trying to do something similar but I struggled. What I am trying to do is to make the age column editable only if the value column Athlete contains the word ‘e’. Any Ideas on how to achieve this?

2

Hello @seventy77,

I think this might work:

{"field": "age", "editable": {"function": "params.data ? params.data.athlete.contains('e') : null"}}

If not contains try includes.

1 Like
3

Hi @jinnyzor,

Unfortunately this is not working for me :(,

I do this analogy using the example above. But my code looks like this:


    {
        'field': 'Morning',
        'cellStyle': {
            # Set of rules
            "styleConditions": [
            {
                    "condition": "params.value.includes('Hot')",
                    "style": {"backgroundColor": "pink", "borderRadius": "15px", "borderWidth": "1px", "borderColor": "black","paddingRight": "5px","boxShadow": "3px 3px 2px gray"},
                },
                {
                    "condition": "params.value.includes('Cold')",
                    "style": {"backgroundColor": "skyblue", "borderRadius": "15px", "borderWidth": "1px", "borderColor": "black","paddingRight": "5px","boxShadow": "3px 3px 2px gray"},
                },
            ],
            # Default style if no rules apply
            "defaultStyle": {"backgroundColor": "white"},
            "editable": {"function": "params.data ? params.data.Morning.includes('f') : null"}

        }

Is the same problem basically, and what is it instead of using ‘f’ I want to be able to evaluate this against a Python variable called keyword. This would be my second problem

4

This works for me:

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

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


app.layout = html.Div(
    [
        dcc.Markdown("This grid has editing enabled on all columns"),
        dag.AgGrid(
            id="basic-editing-example",
            columnDefs=[{"field": i, 'editable': {"function": "params.data ? params.data.athlete.includes('e') : null"}
                         if i == 'age' else True} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run(debug=True, port=8000)
1 Like
5

@jinnyzor,

Great now it works for me :), final question how can I restrict the edit option only to the age column? And can I also store the ‘e’ word on a Python variable and then evaluate it?

6

What do you mean exactly?

Right now, the only one that is conditional is age, all the others are True, if you want all others to be off then change the True to False.

1 Like
7

Thanks, I understood! :slight_smile: just changed into False.

the other question is, that I want to be able to store the keyword into a variable because this might change depending on each user so how can I save this keyword into a variable and then evaluate it?

{“function”: “params.data ? params.data.athlete.includes(keyword) : null”}

I also want to make them editable if keyword is presented or if the cell have null values.
keyword |cell_null

8

I would actually use a dcc.Store so you dont have to keep updating it.

"function": "params.data ? params.data.athlete.includes(localStorage.getItem('variable')) : null"

Then if your layout pass a dcc.Store(id='variable', storage_type='local', data=''), then have a clientside_callback that updates that value:

app.clientside_callback(
"""function (n, id) {
    if (n) {
         localStorage.setItem('variable', n)
         dash_ag_grid.getApi(id).refreshCells()
         return n
    } 
    return window.dash_clientside.no_update
}""",
Output('variable','data'), Input('trig', 'prop'), Input('grid', 'id')
)

^ the trigger should be something like an input box or something that has a value to make it easier to update :slight_smile: