# dmc.Select (agrid) and Rich Cell Editor

**URL:** <https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424>\
**Category:** Dash Python\
**Created:** [May 23, 2025, 8:41am UTC](https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424 "2025-05-23T08:41:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mar7872x](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mar7872x/32/31171_2.png) [@Mar7872x](https://community.plotly.com/u/Mar7872x)\
**Post date:** [May 23, 2025, 8:41am UTC](https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424/1 "2025-05-23T08:41:11Z")

</div>

Hi

I looking ‘‘select’’ with user typing . - in Dash Agrid  
Does Rich Select Cell Editor it work without Enterprise version ? If it works, maybe someone could post a simple example ?

I tried using dmc.Select but this example doesn’t work for me:

dash\_ag\_grid Version: 31.3.0  
dash Version: 2.18.2

[dmc.Select](https://dashaggridexamples.pythonanywhere.com/components-dmc)

```auto
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import dash_mantine_components as dmc

app = Dash( __name__ )

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

columnDefs = [
    {
        "field": "country",
        "cellEditor": {"function": "DMC_Select"},
        "cellEditorParams": {
            "options": df.country.unique(),
            "clearable": True,
            "placeholder": "Select Country",
            "shadow": "xl",
        },
        "cellEditorPopup": True,
        "singleClickEdit": True,
    },
    {"field": "year"},
    {"field": "athlete"},
    {"field": "age"},
    {"field": "date"},
    {
        "field": "sport",
        "cellEditor": {"function": "DMC_Select"},
        "cellEditorParams": {
            "options": df.sport.unique(),
            "creatable": True,
            "clearable": False,
            "shadow": "xl",
        },
        "cellEditorPopup": True,
        "singleClickEdit": True,
    },
    {"field": "total"},
]

defaultColDef = {"filter": True, "minWidth": 100, "editable": True}

app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid has Dash Mantine Components dmc.Select in the Country and Sport columns"
        ),
        dag.AgGrid(
            id="cell-editor-dmc-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="responsiveSizeToFit",
            defaultColDef=defaultColDef,
        ),
        html.Div(id="cell-editor-dmc-output"),
    ],
    style={"margin": 20},
)

@app.callback(
    Output("cell-editor-dmc-output", "children"),
    Input("cell-editor-dmc-grid", "cellValueChanged"),
)
def selected(changed):
    return f"You have selected {changed}"

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

```

assets/grid\_events.js

```auto
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

// cell editor custom component - dmc.Select
dagfuncs.DMC_Select = class {
    // gets called once before the renderer is used
    init(params) {
        // create the cell
        this.params = params;

        // function for when Dash is trying to send props back to the component / server
        var setProps = (props) => {
            if (typeof props.value != typeof undefined) {
                // updates the value of the editor
                this.value = props.value;

                // re-enables keyboard event
                delete params.colDef.suppressKeyboardEvent;

                // tells the grid to stop editing the cell
                params.api.stopEditing();

                // sets focus back to the grid's previously active cell
                this.prevFocus.focus();
            }
        };
        this.eInput = document.createElement('div');

        // renders component into the editor element
        ReactDOM.render(
            React.createElement(window.dash_mantine_components.Select, {
                data: params.options,
                value: params.value,
                setProps,
                style: {width: params.column.actualWidth-2, ...params.style},
                className: params.className,
                clearable: params.clearable,
                searchable: params.searchable || true,
                creatable: params.creatable,
                debounce: params.debounce,
                disabled: params.disabled,
                filterDataOnExactSearchMatch:
                    params.filterDataOnExactSearchMatch,
                limit: params.limit,
                maxDropdownHeight: params.maxDropdownHeight,
                nothingFound: params.nothingFound,
                placeholder: params.placeholder,
                required: params.required,
                searchValue: params.searchValue,
                shadow: params.shadow,
                size: params.size,            
                styles: params.styles,
                switchDirectionOnFlip: params.switchDirectionOnFlip,
                variant: params.variant,            
            }),
            this.eInput
        );

        // allows focus event
        this.eInput.tabIndex = '0';

        // sets editor value to the value from the cell
        this.value = params.value;
    }

    // gets called once when grid ready to insert the element
    getGui() {
        return this.eInput;
    }

    focusChild() {
        // needed to delay and allow the component to render
        setTimeout(() => {
            var inp = this.eInput.getElementsByClassName(
                'mantine-Select-input'
            )[0];
            inp.tabIndex = '1';

            // disables keyboard event
            this.params.colDef.suppressKeyboardEvent = (params) => {
                const gridShouldDoNothing = params.editing;
                return gridShouldDoNothing;
            };
            // shows dropdown options
            inp.focus();
        }, 100);
    }

    // focus and select can be done after the gui is attached
    afterGuiAttached() {
        // stores the active cell
        this.prevFocus = document.activeElement;

        // adds event listener to trigger event to go into dash component
        this.eInput.addEventListener('focus', this.focusChild());

        // triggers focus event
        this.eInput.focus();
    }

    // returns the new value after editing
    getValue() {
        return this.value;
    }

    // any cleanup we need to be done here
    destroy() {
        // sets focus back to the grid's previously active cell
        this.prevFocus.focus();
    }
};

```

![dmc_select](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/d/7d50a1aa251d2770ee51e0945c0daebe7bc3625c.gif)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 23, 2025, 1:55pm UTC](https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424/2 "2025-05-23T13:55:05Z")

</div>

Hi @Mar7872x

Try following the examples here: [Dash AG Grid + DMC · snehilvj/dash-mantine-components · Discussion #467 · GitHub](https://github.com/snehilvj/dash-mantine-components/discussions/467)

---

<div class="post-metadata">

**Author:** ![Mar7872x](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mar7872x/32/31171_2.png) [@Mar7872x](https://community.plotly.com/u/Mar7872x)\
**Post date:** [May 26, 2025, 7:00am UTC](https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424/3 "2025-05-26T07:00:28Z")

</div>

It seems to work 🙂 Thx !  
So Rich Select Cell Editor it not working without Enterprise version ?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 26, 2025, 2:34pm UTC](https://community.plotly.com/t/dmc-select-agrid-and-rich-cell-editor/92424/4 "2025-05-26T14:34:28Z")

</div>

Hi @Mar7872x  
Glad it’s working for you. And yes, you need an Enterprise license to use AG Grid’s Rich Select Cell editor in production.