Radio Button implementation in ejGrid

[Prithivinath Prabhunath]

component : Syncfusion data grid

version : ej2

platform : ReactJS

I want to have radio button in one column of my data grid which allows the user to choose only one of a predefined set of mutually exclusive options. We used "selectionSettings" property and we set "type" to "Single". But this didn't work for me. Using this property, i was still able to select multiple rows. So please let us know the actual implementation of radio button in datagrid along with small code demo.

[Vignesh Sivagnanam]

Hi Prithivinath 

Greetings from Synfusion support 

Based on your query we found that you want to select the grid records using the Radio button. So, we have prepared a sample to select single grid record using the radio button and in this sample we used columnTemplate feature to achieve your requirement.  

Please refer the below Code Example and Sample for your reference, 

Code Example : 

function onchange(e) { 

  var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

  var a = parseInt(e.index); 

  grid.selectRow(a); 

} 

export class Default extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.template = this.gridTemplate; 

  } 

  editTemplate(args) { 

    return ( 

      <RadioButtonComponent 

        name="default" 

        change={() => { 

          onchange(args); 

        }} 

      /> 

    ); 

  } 

  settings = { checkboxMode: "ResetOnRowClick" }; 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={orderDetails} 

            height="350" 

            selectionSettings={this.settings} 

            allowPaging={true} 

            pageSettings={{ pageCount: 4, pageSizes: true }} 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                headerText="Button" 

                width="180" 

                template={this.editTemplate.bind(this)} 

                textAlign="Center" 

              /> 

…………………………………………. 

            </ColumnsDirective> 

            <Inject services={[Page]} /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

Sample : https://stackblitz.com/edit/react-3adn6m-2ubptg?file=index.js 

Regards 

Vignesh Sivagnanam