Button with isToggle prop true, How can we set some button active by default?

[Animesh Dutta]

Hi Team, we have a requirement of having some toggle buttons whose initial state will be defined by some flag let's say.

I was looking for something like a checkbox as button, but seems like that is not available in Syncfusion. So I am using toggle button like below -

And it is giving me proper output which is -

But I want to set the initial state, i.e. let's say Tuesday should be selected by default when we are rendering this. So is there any property like isActive or something which can be set to achieve this?

Or if there is any other alternate solution/component which can be used please suggest me the same

[YuvanShankar Arunagiri]

Hi Animesh,

We have checked your requirement and using the ButtonGroup component, we can achieve your requirement shown in your screenshot. Kindly refer to the below demo and UG link.

Demo link: https://ej2.syncfusion.com/react/demos/#/bootstrap5/button/button-group

UG link: https://ej2.syncfusion.com/react/documentation/button-group/selection-and-nesting#single-selection

 <div id="text" className="e-btn-group">

                                <input type="radio" id="sunday" name="day" value="sunday"/>

                                <label className="e-btn" htmlFor="sunday">Sunday</label>

                                <input type="radio" id="monday" name="day" value="monday"/>

                                <label className="e-btn" htmlFor="monday">Monday</label>

                                <input type="radio" id="tuesday" name="day" value="tuesday" checked/>

                                <label className="e-btn" htmlFor="tuesday">Tuesday</label>

                                <input type="radio" id="wednesday" name="day" value="wednesday"/>

                                <label className="e-btn" htmlFor="wednesday">Wednesday</label>

                                <input type="radio" id="thrusday" name="day" value="thrusday"/>

                                <label className="e-btn" htmlFor="thrusday">Thrusday</label>

                                <input type="radio" id="friday" name="day" value="friday"/>

                                <label className="e-btn" htmlFor="friday">Friday</label>

                                <input type="radio" id="saturday" name="day" value="saturday"/>

                                <label className="e-btn" htmlFor="saturday">Saturday</label>

                            </div>

 

Using the checked property, we can selected the specific button in initial state.

Output screenshot:

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

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

[Animesh Dutta]

Hey YuvanShankar, 

this will not work for me. I think my requirement was not clear to you.

I need a checkbox type of functionality. And this button group will keep all these buttons stuck together. But that is not what I need. Please check the attached demo to understand how it works.

Code was already attached. Function wise the current implementation is ok. But I can't select a button by default.

Need support for that.

Thanks.

Attachment: Samplle_8072651c.zip

[YuvanShankar Arunagiri]

Animesh,

Using the ‘e-active’ CSS class name of button component, we can achieve your requirement. kindly refer to the below code snippet and sample link.

<div id='button-control'>

                    <ButtonComponent cssClass='e-outline' isToggle >Sunday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Monday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline e-active' isToggle >Tuesday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Wednesday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Thrusday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Friday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >saturday</ButtonComponent>

                    </div>

Output screenshot:

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

Get back to us if you need any further assistance on this. 

[Animesh Dutta]

instead of manually adding the class, there is no other alternative way to do this? Because during the element creation only we need to set this, also we need to find out the buttons which are active at any time.

Searching with CSS class names may not be accurate. 

[YuvanShankar Arunagiri]

Animesh,

Sorry for the delay. We have prepared the sample based on your requirement. Using the created and onClick event of button component, we can set the initial selected button using the class name ‘e-active’ and will get the selected button data in click event shown as below.

let initalSelectedBtn = 'tuesday';

    let selectedBtn = [];

    function onCreated(args) {

        if (initalSelectedBtn === args) {

            setTimeout(function() {

                var btn = document.getElementById(args);

                btn.classList.add('e-active');

            });

            selectedBtn.push(initalSelectedBtn);

        }

    }

    function onClick(args) {

        if(!selectedBtn.includes(args.target.id)) {

            selectedBtn.push(args.target.id);

        } else {

            selectedBtn.splice(selectedBtn.indexOf(args.target.id), 1);

        }

    }

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

Notes: Using the class name only we get set initial selected state in button component.

Get back to us if you need any further assistance on this.