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. Image for the cookie policy date

MultiSelectComponent - get all selected values on SELECT event

Hi Team,

I am using syncfusion react MultiSelectComponent with mode:CheckBox.
On SELECT event I am gettting only one value of latest selected option
On CHANGE event I am getting all selected values.

I want all selected values on SELECT event (just like CHANGE event)

Is there any way to achieve this ..?

3 Replies

SN Sevvandhi Nagulan Syncfusion Team January 3, 2020 04:45 AM

Hi Vinayak 
Greetings from Syncfusion support. 
You can get the selected values in select event from the component’s instances. Kindly refer the below code, 
Please find the sample below, 
Sevvandhi N  

SU sujatha August 11, 2021 05:13 PM

How to get values from a multiselect component in JSX?

 <MultiSelectComponent id="checkbox" onBlur={context.handleChangeMultiple.bind(context,i)} dataSource={this.state.outputs[i].outputValue} placeholder="Select Values" mode="CheckBox" showSelectAll={true} showDropDownIcon={true} filterBarPlaceholder="Search Values" popupHeight="200px">

              <Inject services={[CheckBoxSelection]}/>


DR Deepak Ramakrishnan Syncfusion Team August 12, 2021 09:12 AM

Hi Sujatha, 

Greetings from Syncfusion  support. 

We have created a sample based on your requirement . Please find the below code and sample for your reference. We can get the value through ‘select’ and ‘change’ based on your usage. 

    render() { 
        return (<div id="multichecbox" className='control-pane'> 
    <div className='control-section col-lg-8'> 
        <div id="multigroup" className="control-styles"> 
            <MultiSelectComponent id="checkbox" ref={(scope) => 
                { this.mulObj = scope; }} dataSource={this.countries} fields={this.checkFields} placeholder="Select countries" mode="CheckBox" showSelectAll={true} showDropDownIcon={true} change={this.Onchange.bind(this)}  select={this.onSelect.bind(this)} filterBarPlaceholder="Search countries" popupHeight="350px"> 
                <Inject services={[CheckBoxSelection]} /> 

Kindly revert us if you have any concerns in it. 

Deepak R. 

Live Chat Icon For mobile
Up arrow icon