MultiSelectComponent - get all selected values on SELECT event

[Vinayak]

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 ..?

[Sevvandhi Nagulan]

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, 

 

    onSelect(args) 

    { 

        console.log(this.mulObj.value); 

    } 

 

Please find the sample below, 

 

Sample Link: https://stackblitz.com/edit/react-xdsecn?file=index.js 

 

Regards,  

Sevvandhi N  

[sujatha]

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]}/>

            </MultiSelectComponent>

[Deepak Ramakrishnan]

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. 

[index.js]/[index.jsx] 

Select(args){ 

  console.log(args.itemData.Name); 

  console.log(args.itemData.Code); 

} 

Onchange(args){ 

  console.log(this.mulObj.value); 

} 

    render() { 

        return (<div id="multichecbox" className='control-pane'> 

    <div className='control-section col-lg-8'> 

        <div id="multigroup" className="control-styles"> 

            <h4>CheckBox</h4> 

            <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]} /> 

            </MultiSelectComponent> 

        </div> 

    </div> 

</div>); 

    } 

Sample Link: https://stackblitz.com/edit/react-xdsecn-xw8niq?file=index.js 

 

Kindly revert us if you have any concerns in it. 

Thanks, 

Deepak R.