Can’t have two independent groups

[Oscar Ramos]

We need to have independent behaviour on each button group. Currently if I select an option in the first group, and then I select an option in the second group, the first selection, dissapears.

This is my code:

<code>

<div id="group1" className='e-btn-group' role='group'>

                <ButtonComponent onClick={() => this.setSelectedRegion('Cluster')}>Cluster</ButtonComponent>

                <ButtonComponent onClick={() => this.setSelectedRegion('Spain')}>Spain</ButtonComponent>

                <ButtonComponent onClick={() => this.setSelectedRegion('Portugal')}>Portugal</ButtonComponent>

            </div>            

            <div id="group2" className='e-btn-group' role='group'>

                <ButtonComponent onClick={() => this.setSelectedProjection('Budget')}>Budget</ButtonComponent>

                <ButtonComponent onClick={() => this.setSelectedProjection('APR')}>APR Projection</ButtonComponent>

                <ButtonComponent onClick={() => this.setSelectedProjection('SEP')}>SEP Projection</ButtonComponent>

            </div>

</code>

[Saranya Dhayalan]

 Hi Oscar, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, and we would like to let you know that you have made a normal ButtonGroup type. So, when you select a second group option, the first selection  

will disappear. So, please use a single selection or multiple selection. 

 

Single selection: 

ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with htmlFor attribute inside the target element. Please find the below code snippet: 

 

<div id="group1" className='e-btn-group' role='group'> 

    <input type="radio" id="cluster" name="align" value="cluster" /> 

    <label className="e-btn" htmlFor="cluster">Cluster</label> 

    <input type="radio" id="spain" name="align" value="spain" /> 

    <label className="e-btn" htmlFor="spain">Spain</label> 

    <input type="radio" id="portugal" name="align" value="portugal" /> 

    <label className="e-btn" htmlFor="portugal">Portugal</label> 

</div> 

 

 

 

Multiple selection: 

ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with htmlFor attribute inside the target element. 

 

<div id="group2" className='e-btn-group' role='group'> 

    <input type="checkbox" id="budget" name="fontstyle" value="budget" checked /> 

    <label className="e-btn" htmlFor="budget"> 

        Budget 

    </label> 

    <input type="checkbox" id="APR" name="fontstyle" value="APR" /> 

    <label className="e-btn" htmlFor="APR"> 

        APR Projection 

    </label> 

    <input type="checkbox" id="SEP" name="fontstyle" value="SEP" /> 

    <label className="e-btn" htmlFor="SEP"> 

        SEP Projection 

    </label> 

</div> 

 

 

For your convenience we have prepared a sample. Please find the below link: 

 

Sample link: https://stackblitz.com/edit/react-qouald?file=index.js 

 

Please find the below documentation link: 

https://ej2.syncfusion.com/react/documentation/button-group/selection-and-nesting/ 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

  

Regards, 

Saranya D 

[Oscar Ramos]

 Hi Oscar, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, and we would like to let you know that you have made a normal ButtonGroup type. So, when you select a second group option, the first selection  

will disappear. So, please use a single selection or multiple selection. 

 

Single selection: 

ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with htmlFor attribute inside the target element. Please find the below code snippet: 

 

<div id="group1" className='e-btn-group' role='group'> 

    <input type="radio" id="cluster" name="align" value="cluster" /> 

    <label className="e-btn" htmlFor="cluster">Cluster</label> 

    <input type="radio" id="spain" name="align" value="spain" /> 

    <label className="e-btn" htmlFor="spain">Spain</label> 

    <input type="radio" id="portugal" name="align" value="portugal" /> 

    <label className="e-btn" htmlFor="portugal">Portugal</label> 

</div> 

 

 

 

Multiple selection: 

ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with htmlFor attribute inside the target element. 

 

<div id="group2" className='e-btn-group' role='group'> 

    <input type="checkbox" id="budget" name="fontstyle" value="budget" checked /> 

    <label className="e-btn" htmlFor="budget"> 

        Budget 

    </label> 

    <input type="checkbox" id="APR" name="fontstyle" value="APR" /> 

    <label className="e-btn" htmlFor="APR"> 

        APR Projection 

    </label> 

    <input type="checkbox" id="SEP" name="fontstyle" value="SEP" /> 

    <label className="e-btn" htmlFor="SEP"> 

        SEP Projection 

    </label> 

</div> 

 

 

For your convenience we have prepared a sample. Please find the below link: 

 

Sample link: https://stackblitz.com/edit/react-qouald?file=index.js 

 

Please find the below documentation link: 

https://ej2.syncfusion.com/react/documentation/button-group/selection-and-nesting/ 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

  

Regards, 

Saranya D 

Hello, unfortunately this is still not worth it. I need Two Buttongroup, both with unique selection. I have to be able to select one option in each, simultaneously. If you deselect the previous group, when selecting a new one, it is not valid.

[Saranya Dhayalan]

Hi Oscar, 

 

Thanks for the update. 

 

We have checked your reported query, previously we have explained about button group selection types. As per your requirement we suggest you use single selection (radio type). For your convenience we have modified the sample, please find the sample link: 

Sample link: https://stackblitz.com/edit/react-qouald?file=index.js 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement? 

 

Regards, 

Saranya D 

[Oscar Ramos]

It works, Thanks a lot

[Saranya Dhayalan]

Hi Oscar, 

 

Thanks for your update. 

 

We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 

 

Regards, 

Saranya D