How to Group radio button which are in different rows of ag-grid

Question

I'm creating a grid with multiple rows and inserting a radio button to each row as shown in below snapshot

The code snippet for the column definition of Radio button is as below,

columnDefs: [{
                headerName: '',
                field: '',
                tooltipField: '',
                suppressMenu: false,
                suppressFilter: true,
                suppressMovable: true,
                suppressResize: true,
                width: 200,
                cellRendererFramework: this.ButtonCellRenderer
               }]



 ButtonCellRenderer = (params) => {
      return (
        <div style={{margin: 'auto', width: '100%', overflow: 'hidden'}}>
          <div style={{display: 'inline-block'}}>
            <RadioButtonGroup
              name={params.data.bit_rate}
              defaultSelected={this.state.selectedRadioButton}
              debugger //eslint-disable-line
              onChange={handleSelectionChange}
              labelPosition={this.state.labelPosition}
            >
              <RadioButton label='' value='true' enabled='true' />
            </RadioButtonGroup>
          </div>
        </div>
      )
    } 

The issue I'm facing here is I'm not able to group the radio button into single RadioGroup hence I'm not achieving the mutual exclusive. Can you please suggest how to make it mutual exclusive .

Answer 1

You can achieve it programmatically by giving all your input/radio elements a name attribute and loop on all elements with the same name:

handleClick = () => {
        const elems = document.getElementsByName("rad");
        let selected;
        for(let i = 0; i < elems.length; i++) {
            if(elems[i].checked) {
                selected = elems[i].value;
            }
        }
        console.log(selected);
    };

    render() {

        return (
            <div>
                <input type={"radio"} name={"rad"} defaultChecked={true} value={'radio1'} onClick={this.handleClick}/> radio1 <br/>
                <input type={"radio"} name={"rad"} value={'radio2'} onClick={this.handleClick}/> radio2
            </div>
        );
    }