Blazor Multi select chip removed event

Hello Team,

Is there any event that can capture the chip removed event in blazor for multiselect ?


Currently, when I click on the close button(X) in chip, it is not getting removed. That button may not work because, our datasource gets cleared each time user selects an item from the list.

So, I want to know if there is any event that can capture the Chip close?
Note: ChipSelected event works if I click on the chip but not on the close button ("X")

<SfMultiSelect @ref="SelectedMultiSelectedRef" Mode="VisualMode.Box" TValue="List<QuoteOutput>" TItem="QuoteOutput" @bind-Value="@SelectedTrades" AllowFiltering="true"  CssClass="mr-2" EnableVirtualization="true">

<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

<MultiSelectEvents OnValueSelect="OnValueSelected" Cleared="Clearedhandler" TValue="List<QuoteOutput>" TItem="QuoteOutput" OnChipTag="OnChipTagged" ValueChange="@ValueChangeHandler"></MultiSelectEvents>

<MultiSelectFieldSettings Text="Description" Value="Description"></MultiSelectFieldSettings>

</SfMultiSelect>


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team May 3, 2022 04:02 AM UTC

Hi Aditya,


We have an event called “ OnValueRemove “. It triggers before the selected item is removed from the widget. Please try the OnValueRemove event for your scenario and let us know if this meets your requirement.


For more details please refer to the attached code snippet, sample, and documentation.


 

<SfMultiSelect TValue="int?[]" TItem="Countries" @bind-Value="@DropVal" Mode="VisualMode.Box" AllowFiltering="true" Placeholder="Sub Type" FloatLabelType="FloatLabelType.Always" EnablePersistence="true">

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

<MultiSelectEvents TItem="Countries" TValue="int?[]" OnValueRemove="@OnValueRemovehandler" Cleared="@Clearedhandler" ></MultiSelectEvents>   

<MultiSelectFieldSettings Text="Name" Value="Code" ></MultiSelectFieldSettings>

</SfMultiSelect>

 

 

 

private void OnValueRemovehandler(RemoveEventArgs<Countries> args)

    {

        // Here you can customize your code

    }

 


Documentation: https://blazor.syncfusion.com/documentation/multiselect-dropdown/events#onvalueremove


Regards,

Udhaya Kumar D


Attachment: MultiSelect_CustomAdaptor_34f3d6c2.zip

Loader.
Up arrow icon