We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can’t have two independent groups

Thread ID:

Created:

Updated:

Platform:

Replies:

150399 Jan 3,2020 11:59 AM UTC Jan 9,2020 09:05 AM UTC React - EJ 2 5
loading
Tags: ButtonGroup
Oscar Ramos
Asked On January 3, 2020 11:59 AM UTC

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 [Syncfusion]
Replied On January 6, 2020 09:20 AM UTC

 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 normal ButtonGroup type. So, when you select second group option, the first selection  
will disappear. So, please use 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: 
 
 
Please find the below documentation link: 
 
Could you please check the above sample and get back to us if you need further assistance on this? 
  
Regards, 
Saranya D 


Oscar Ramos
Replied On January 7, 2020 09:11 AM UTC

 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 normal ButtonGroup type. So, when you select second group option, the first selection  
will disappear. So, please use 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: 
 
 
Please find the below documentation link: 
 
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 [Syncfusion]
Replied On January 7, 2020 11:10 AM UTC

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: 
 
Could you please check the above sample and let us know whether this is fulfilling your requirement? 
 
Regards, 
Saranya D 


Oscar Ramos
Replied On January 9, 2020 08:52 AM UTC

It works, Thanks a lot

Saranya Dhayalan [Syncfusion]
Replied On January 9, 2020 09:05 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon