# dmc.MultiSelect as Dash AG Grid custom component

**URL:** <https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247>\
**Category:** Dash Python\
**Created:** [July 28, 2023, 9:01am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247 "2023-07-28T09:01:04Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![kjurukova](https://avatars.discourse-cdn.com/v4/letter/k/439d5e/32.png) [@kjurukova](https://community.plotly.com/u/kjurukova)\
**Post date:** [July 28, 2023, 9:01am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/1 "2023-07-28T09:01:04Z")

</div>

Hey guys,

I am trying to create a multiple choice dropdown for my dash ag grid table, and found dmc.MultiSelect as a good option.

In my dashAgGridComponentFunctions.js file I have the following code:

```auto
//dmc select componenet

dagcomponentfuncs.CustomMultiSelect = function (props) {
    const {setData, data} = props;
    const [selectedOptions, setSelectedOptions] = React.useState(Array.isArray(data) ? data : []);

    function onChange(value) {
        setSelectedOptions(value);
        setData(value);
    }

    return React.createElement(
        window.dash_mantine_components.MultiSelect,
        {
            data: ['a', 'b', 'c'],
            value: selectedOptions,
            onChange: onChange,
            placeholder: "Select options",
        }
    );
};

```

and I reference the component in my dash ag grid table like this:

```auto
columnDefs = [
    {
        "headerName": "Options",
        "cellRenderer": "CustomMultiSelect",
    },
]

dash_ag_grid.AgGrid(
                                        id="my-table",
                                        dashGridOptions={
                                            "rowHeight": 120,
                                            "rowSelection": "multiple",
                                            "undoRedoCellEditing": True,
                                            "suppressRowTransform": True,
                                        },
                                        columnDefs=columnDefs,
                                        defaultColDef={
                                            "flex": 1,
                                            "sortable": True,
                                            "filter": True,
                                        },
                                    )

```

I can see the options, but I cannot choose/select anything. Any idea what am I doing wrong? Thanks!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 28, 2023, 11:03am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/2 "2023-07-28T11:03:25Z")

</div>

Hello @kjurukova,

Yes, adding dash components are a little more tricky when working inside the context of the grid.

You need to tie in the `setProps` to update the data for the cell, I don’t think the onChange does anything because it’s not your typical select.

Basically, use the setProps and then check if the value changes, if so, use `setData`.

---

<div class="post-metadata">

**Author:** ![kjurukova](https://avatars.discourse-cdn.com/v4/letter/k/439d5e/32.png) [@kjurukova](https://community.plotly.com/u/kjurukova)\
**Post date:** [July 28, 2023, 11:58am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/3 "2023-07-28T11:58:16Z")

</div>

Thank you very much @jinnyzor !!!  
Worked like this:

```auto
dagcomponentfuncs.CustomMultiSelect = function (props) {
    const {setData, data} = props;
    const [selectedOptions, setSelectedOptions] = React.useState(Array.isArray(data) ? data : []);

    function onChange(value) {
        setSelectedOptions(value);
        setData(value);
    }

    function setProps(value){
        data: value;
    }

    return React.createElement(
        window.dash_mantine_components.MultiSelect,
        {
            data: ['a', 'b', 'c'],
            value: selectedOptions,
            onChange,
            setProps,
            placeholder: "Select options",
        }
    );
};

```

---

<div class="post-metadata">

**Author:** ![Jocelyn](https://avatars.discourse-cdn.com/v4/letter/j/90db22/32.png) [@Jocelyn](https://community.plotly.com/u/Jocelyn)\
**Post date:** [September 7, 2023, 9:43am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/4 "2023-09-07T09:43:04Z")

</div>

Hello,

I’d like to do the same thing, but I can’t provide the list of possible choices.

Here’s a basic example of an app I can’t get to work :

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv")
df.loc[:, 'direction'] = 'S'

app = Dash( __name__ )

columnDefs = [
    {"field": "id", "hide": True},
    {'field': 'direction', 'editable': True, "cellRenderer": "CustomMultiSelect",
     'cellEditorParams': {'value': ["N", "S", "E", "W"]}},
{'field': 'strength', 'editable': False},
{'field': 'frequency', 'editable': False},
]

grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

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

```

The dashAgGridComponentFunctions.js file contains :

```js
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.CustomNoRowsOverlay = function (props) {
    return React.createElement(
        'div',
        {
            style: {
                border: '1pt solid grey',
                color: 'grey',
                padding: 10,
                fontSize: props.fontSize
            },
        },
        props.message
    );
};

dagcomponentfuncs.CustomMultiSelect = function (props) {
    const {setData, data} = props;
    const [selectedOptions, setSelectedOptions] = React.useState(Array.isArray(data) ? data : []);

    function onChange(value) {
        setSelectedOptions(value);
        setData(value);
    }

    function setProps(value){
        data: value;
    }

    return React.createElement(
        window.dash_mantine_components.MultiSelect,
        {
            data: ['a', 'b', 'c'],
            value: selectedOptions,
            onChange,
            setProps,
            placeholder: "Select options",
        }
    );
};

```

Thank you for your help.

---

<div class="post-metadata">

**Author:** ![Jocelyn](https://avatars.discourse-cdn.com/v4/letter/j/90db22/32.png) [@Jocelyn](https://community.plotly.com/u/Jocelyn)\
**Post date:** [September 8, 2023, 11:59am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/5 "2023-09-08T11:59:01Z")

</div>

Is it possible to have a very simple working example?  
Because I’m still stuck.

Thanks

---

<div class="post-metadata">

**Author:** ![Jocelyn](https://avatars.discourse-cdn.com/v4/letter/j/90db22/32.png) [@Jocelyn](https://community.plotly.com/u/Jocelyn)\
**Post date:** [September 12, 2023, 3:21pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/6 "2023-09-12T15:21:13Z")

</div>

I’ve found the solution.  
All I had to do was copy the Select example here:  
[https://dashaggrid.pythonanywhere.com/components/cell-editor-components](https://dashaggrid.pythonanywhere.com/components/cell-editor-components)  
by changing the Select element to MultiSelect and deleting the filterDataOnExactSearchMatch attribute.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [September 12, 2023, 3:51pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/7 "2023-09-12T15:51:36Z")

</div>

Yes. The cellEditor is easier to use than the cellRenderer. The issue was that your component wasn’t showing up because of being contained inside of the cell.

When you allow for the pop up, it adds it above the grid, so it’s no longer contained inside the cell.

---

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [May 13, 2024, 11:34pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/8 "2024-05-13T23:34:57Z")

</div>

Hey @Jocelyn

Could you please share the select example? Seems like to select example was removed 😩

---

<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 14, 2024, 12:42am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/9 "2024-05-14T00:42:15Z")

</div>

Hi @kabure

You can find 3 dmc.Select examples here. Note that it currently it uses dmc== 0.12.1

> **[Dash AG Grid Examples: dmc components](https://dashaggridexamples.pythonanywhere.com/components-dmc)**
>
> Tutorials, tips & tricks and additional examples to supplement the Dash AG Grid documentation.

---

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [May 14, 2024, 1:07am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/10 "2024-05-14T01:07:49Z")

</div>

Hey @AnnMarieW Thank you so much!

I’ve already understood how it works, and it’s exactly the solution I need… The issues I see are mainly:  
1- I need to apply this to the ROWS and not to the COLUMNS;  
2 - My list has more than 38k options;

Do you think that is it possible to be applied to my case?

It’s late here now, I will try to implement this tomorrow, but I’m not too confident as I will need to pass the 38k list for each column

Do you know a way that I could load a json file in the .js file? I think that it would avoid the need to set the same list many times

---

<div class="post-metadata">

**Author:** ![dashamateur](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dashamateur/32/32181_2.png) [@dashamateur](https://community.plotly.com/u/dashamateur)\
**Post date:** [July 11, 2024, 11:01am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/11 "2024-07-11T11:01:03Z")

</div>

Hey @jinnyzor I am forced to use cell renderer and I am stuck on the same problem where dmc.Select is limited by row height. Would you please help me position the pop up above ag grid? I tried with zIndex but didn’t have any luck. I have a dmc.Modal with Ag Grid inside and inside of said grid I would like to have c.Select. Thanks in advance!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 11, 2024, 11:25am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/12 "2024-07-11T11:25:42Z")

</div>

Hello @dashamateur,

You need to set the cellStyle to overflow visible. I think that’s all you need. 😁

You may run into issues at the bottom.

---

<div class="post-metadata">

**Author:** ![dashamateur](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dashamateur/32/32181_2.png) [@dashamateur](https://community.plotly.com/u/dashamateur)\
**Post date:** [July 11, 2024, 1:34pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/13 "2024-07-11T13:34:38Z")

</div>

It didn’t work 😔 Could it have something to do with my way of rendering cells? I am rendering a string and returning a div element which has dmc.Text and dmc.Select as children. I’ve set up my initial string to have place holders in places where I want dmc.Select component to be.

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [July 11, 2024, 3:52pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/14 "2024-07-11T15:52:40Z")

</div>

On using z-index on the dropdown of a dmc.Select, this doesn’t work…

```python
style={"z-index":"10002"}

```

but this might, if you’ve not tried it…

```python
styles={"dropdown":{"z-index":"10002"}}

```

You could also try (it works for putting a Select on a Drawer. so might be worth a try here)…

```python
comboboxProps={"withinPortal": False}

```

---

<div class="post-metadata">

**Author:** ![dashamateur](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dashamateur/32/32181_2.png) [@dashamateur](https://community.plotly.com/u/dashamateur)\
**Post date:** [July 12, 2024, 3:57am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/15 "2024-07-12T03:57:27Z")

</div>

I have tried all of the above but with no luck. For some reason the dropdown still has the default z-index 300.

EDIT: Solved it! Defining parameter of dmc.Select dropdownPosition solved the issue. For some reason this was the only thing necessary for dropdown to open. Thank you both for your help!

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [July 12, 2024, 6:34am UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/16 "2024-07-12T06:34:01Z")

</div>

OK, good you’ve solved it 🙂

You’re using DMC 0.13? The dropdownPosition argument no longer exists in 0.14

---

<div class="post-metadata">

**Author:** ![dashamateur](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dashamateur/32/32181_2.png) [@dashamateur](https://community.plotly.com/u/dashamateur)\
**Post date:** [July 16, 2024, 1:36pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/17 "2024-07-16T13:36:45Z")

</div>

DMC 0.12 actually 🙂 haven’t got around to updating it yet…

---

<div class="post-metadata">

**Author:** ![231530353](https://avatars.discourse-cdn.com/v4/letter/2/ecae2f/32.png) [@231530353](https://community.plotly.com/u/231530353)\
**Post date:** [August 13, 2024, 4:10pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/18 "2024-08-13T16:10:23Z")

</div>

Hi @jinnyzor,

In the case of using cellRendered and dmc.MultiSelect, what would be the solution to make the dropdown popped over the grid?

Thanks

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 13, 2024, 5:00pm UTC](https://community.plotly.com/t/dmc-multiselect-as-dash-ag-grid-custom-component/77247/19 "2024-08-13T17:00:41Z")

</div>

I’m not exactly sure what you mean.

I recommend things with dropdowns to use `cellEditorPopup: True`