Dash AG Grid: how to disable checkbox?

Dash Python
1

I have an ag grid where one of the columns is a checkbox.

I do not want this checkbox to be editable.

I just want it to show the underlying boolean value.

I’m essentially just doing this:
entry[‘cellRenderer’] = ‘Checkbox’
entry[‘minWidth’] = 110

I have tried:
entry[‘checkboxSelection’] = False
and
entry[‘checkboxSelection’] = ‘False’
and
entry[‘editable’] = False
and
entry[‘disabled’] = True

and none of them make the checkbox un-editable.

Can someone please tell me the right approach here?

Thanks!

2

Hello @zack_nc,

If you are using a cellRenderer for this, then you need to put disabled=True in the definition.

If you want to not allow the selection event, then you need to check out here:

It looks like you need to display the disabled selection boxes by adding this to the columnDef:

showDisabledCheckboxes=True

2 Likes
3

Thanks -
What if I want the ‘enabled’ status of a checkbox column to depend on the value of another column in the same row?

So in a row that has
ID | Gender | Confirmed

The ‘confirmed’ column would be a checkbox that would only be enabled if Gender is not null?

Thanks!

4

You are referencing whether or not something is able to be selected, or you want to automatically select something when that row meets a specific criteria?

5

Hi @zack_nc

Try this app:



import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
    {
        "field": "confirm_price",
        'cellRenderer': 'agCheckboxCellRenderer',
        'cellRendererParams': {'function': 'conditionalCheckbox(params)'}
    }
]

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000, "confirm_price": False},
    {"make": "Ford", "model": "Mondeo", "price": 32000, "confirm_price": False},
    {"make": "Porsche", "model": "Boxster", "price": 72000, "confirm_price": False},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid-conditional-checkbox",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef={"editable": True, "animateRows": False},
            eventListeners={'cellValueChanged': ["updateCheckbox(params)"]}
        ),
    ],
)

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

Put the following in a .js file in the assets folder:

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

dagfuncs.conditionalCheckbox = (params) => {
    return {'disabled': params.data.price? false: true}
}

dagfuncs.updateCheckbox = (params) => {
    if (!params.data.price) {
        params.data.confirm_price = false
        params.api.redrawRows()
    }
}
1 Like