Multiselect dropdown checkbox unselect all is not working properly.

[Vigneswaran]

Hello,

I am currently working on multiselect checkbox dropdown and the unselect all is not working properly when the dataSource for the multiselect is quite large (say 100-150). Whereas it works fine for smaller dataSources (say around 20-30). 

Kindly help me out on this.

Warm Regards

Vigneswaran

[Sevvandhi Nagulan]

Hi Vigneswaran, 

Greetings from Syncfusion support. 

We checked your reported requirement. We could not validate the issue further based on the given information. So, could you please provide the below information in our end to proceed further.  

1. Video or screenshot representation for the reported issue.
2. Control rendering code example
3. If possible, share the issue reproducing sample.

Above details would be helpful to validate the issue further in our end.  

Regards, 

Sevvandhi N 

[Vigneswaran]

Hello,

I have included the code snippet and a video recording of the issue below.

app.component.html

<ejs-multiselect

id='multiselectelement'

[dataSource]='dataSource'

[fields]='fields'

[mode]='mode'

[enableSelectionOrder]='false'

[placeholder]='placeholder'

[filterType]="filterType"

[value] = "values"

[allowFiltering] = 'true'

showSelectAll='true'

(select) = "onSelect($event)"

(removed) = "onRemove($event)">

</ejs-multiselect>

app.component.ts

onSelect(event)

{

if(!this.tempParentMapSource.includes(event.itemData.Color))

{

this.tempParentMapSource.push(event.itemData.Color);

}

if(!this.values.includes(event.itemData.Code))

{

this.values.push(event.itemData.Code);

}

}

onRemove(event)

{

this.tempParentMapSource = this.tempParentMapSource.filter((item) => item != event.itemData.Code);

this.values = this.values.filter((item) => item != event.itemData.Color);

}

Attachment: unselectallvideo_kUhaQ4Y9_TQaO_89f6be3d.zip

[Sevvandhi Nagulan]

Hi Vigneswaran, 

Thanks for providing the requested information. 

  

We checked the shared video. By default, when you unselect using select all checkbox, the first 50 selected values will be removed from the input element. Then remaining elements set of 50 values will be removed from the DOM after some time. This process continues till all the elements are removed from the input element. When we de-select the already selected values, we trigger the removing and removed event. Those events will be triggered for each deselection. As a result, the delay occurs. When the number of deselections increase, time will also increase. This is the default behavior at our end when using the large data source. Please check these details and get back to us if you need further assistance. 

  

Regards, 

Sevvandhi N