Ag Grid avoid pasting over dropdowns with values not in options

Dash Python
,
1

I have an Ag Grid in my dash applications with columns that are dropdowns, either agSelectCellEditor or DMC_Select, which have fixed values A | B.

If I enable pasting of data to these cells (which I think is default in Enterprise), I can add values to these cells that are not in the options or values, i.e I can paste Some random text or number into column_1.

In the Ag-Grid documentation I have found reference to: processCellForClipboard and processDataFromClipboard, however I cannot seem to utilise them in Dash and I’m not sure what the best approach would be for this since all my options are in my python-dash program and I’d need to hand these to the grid/js :woman_shrugging:?

Example columnDefs

[.., {
    "field": "column_1",
    "editable": True,
    "cellEditor": {"function": "DMC_Select"},
    "cellEditorParams": {"options": ["A", "B"]},
},...]

or

...
[..., {
    "field": "column_1",
    "editable": True,
    "cellEditor": "agSelectCellEditor",
    "cellEditorParams": {"values": ["A", "B"]},
},...]
2

Hello @Redhotmoons,

You should be able to wrangle the valueSetter to make sure the values are inside of the value list.

2 Likes
3

That seems to have worked great :grin:

some_python_file.py

test_options = ["A", "B", "C"]

columnDefs =
   [...,
     {
            "field": "test",
            "cellEditor": {"function": "DMC_Select"},
            "cellEditorParams": {
                "options": test_options,
            },
            "valueGetter": {"function": f"validate_test(params.data.test, {test_options})"},
        },
...
]

dashAgGridFunctions.js:

dagfuncs.validate_test= function(test, test_options) {
    return test_options.includes(test) ? test: null;
};

Many thanks!

4

That’s only for displaying the data, if you want to keep the value from going to the underlying data, you’ll need to use the valueSetter flow:

5

Ah you’re right!

This seems to work nicely:


dagfuncs.validate_test = function(params, test_options) {

    if (test_options.includes(params.newValue)) {
        params.data.test= params.newValue;  // Update only if valid
        return true;  // Indicates the operation was successful
    } else {
        return false;  // Indicates the newValue was not valid
    }
};

Or a more general function:

dagfuncs.validate_value_setter = function(params, valid_options) {
    // Update and validates the value based on given options for any column.
    var fieldName = params.colDef.field;  // Dynamically get the field name from column definition
    if (valid_options.includes(params.newValue)) {
        params.data[fieldName] = params.newValue;  // Update only if valid
        return true;
    } else {
        return false;
    }
};
1 Like
6

Typically the colId is used instead of field.