DMC.RadioGroup as cell renderer for AG Grid

Dash Python
1

Hey Guys! Thought I might share this custom cell renderer for AG Grid using awesome Dash Mantine Components. Its a RadioGroup that produces as many Radios as you define in the columnDefs parameter in AG Grid. You can also define key, value, color and if the Radio is disabled or not for each Radio. Just paste this in the dashAgGridComponentFunctions.js file:

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

// DMC RadioGroup component
dagcomponentfuncs.DMC_RadioGroup = function (props) {
    const { setData, value } = props;

    const setProps = ({ value }) => {
        props.node.setDataValue(props.column.colId, value);
        setData(value);
    };

    const dataList = props.children

      
      const children = dataList.map(item => {
        const { key, value, color, disabled } = item;
        
        return React.createElement(window.dash_mantine_components.Radio, {
          key: key,
          value: value,
          color: color,
          disabled: disabled,
        });
      });

    return React.createElement(
        window.dash_mantine_components.RadioGroup,
        {
            children: children,
            value: value,
            setProps: setProps,
        },
    );
};

Then define a column for AG Grid like this:

{
  "headerName": "Yes/No",
  "field": "radiogroup",
  "cellRenderer": "DMC_RadioGroup",
  "cellRendererParams": {
      "children": [
          {
              "key": "yes",
              "value": "yes",
              "color": "green",
              "disabled": False,
          },
          {
              "key": "no",
              "value": "no",
              "color": "red",
              "disabled": False,
          },
      ],
  },
},

This produces a column which can be interacted with and be disabled if you need it to be:

image

4 Likes
2

Hi @dashamateur

Thanks for sharing! I added this component to the Dash AG Grid Custom Component Gallery

See it live here:

5 Likes
3

Hi, @AnnMarieW are there any suggestion on how to update ag grid with the dmc.Select from version 0.14? It is not working for me with the current example, but I also get no error. So I guess the java script function is not working anymore?!

4

Thanks for this link and for the Dash AG Grid examples site - it’s incredibly useful and time-saving

2 Likes