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

user_1954970 0
Viewed 1983

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

enter image description here

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 .

radio-group ag-grid reactjs radio-button javascript
1 Answers

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>
        );
    }
user_35829960
Related