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 09:45 AM UTC

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 10:13 PM UTC

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 02:12 PM UTC

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