Blazor EjsMultiSelect events not firing when dropdown selection changes

[Andrew]

Can you please tell me which events I should be subscribing to, to be fired when the user adds or removes a chip from the multi-select dropdown? I have tried both:

<EjsMultiSelect ChipSelection="OnChange" ref="dropdown" ID="local" PlaceHolder="Select countries" DataSource="@localdata" Fields="@MultiSelectFieldSettings">/EjsMultiSelect>

        protected void OnChange(object e)

        {

            int i = 1;

        }

and

<EjsMultiSelect Change="OnChange" ref="dropdown" ID="local" PlaceHolder="Select countries" DataSource="@localdata" Fields="@MultiSelectFieldSettings"></EjsMultiSelect>

        protected void OnChange(MultiSelectChangeEventArgs e)

        {

            int i = 1;

        }

but the OnChange() method is never called...

[Christopher Issac Sunder K]

Hi Andrew, 

Greetings from Syncfusion support. 

The change event triggers only after the control has been lost the focus. While adding the chips, Select event will trigger and removing the chips Removed event will trigger. And Tagging event before set the selected item as chip in the component.This is the dafault behaviour of our component. Please find the below code snippet for adding and removing chip events. 

  

Select Event: 

<EjsMultiSelect ID="default" Mode="@VisualMode.Default" PlaceHolder="Favorite Sports" DataSource="@games" Select=”@onSelect”></EjsMultiSelect> 

@functions { 

    public void onSelect(SelectEventArgs args) 

    { 

    } 

} 

 

Removed Event: 

<EjsMultiSelect ID="default" Mode="@VisualMode.Default" PlaceHolder="Favorite Sports" DataSource="@games" Removed=”@onRemoving”></EjsMultiSelect> 

@functions { 

    public void onRemoving(removeEventArgs args) 

    { 

    } 

} 

To know more about these events, please refer the below API links, 

Select Event: https://ej2.syncfusion.com/documentation/api/multi-select#select 

Removed Event: https://ej2.syncfusion.com/documentation/api/multi-select#removed 

Tagging Event: https://ej2.syncfusion.com/documentation/api/multi-select#tagging 

Please let us know if you require any further assistance. 

Thanks, 

Christo 

[Andrew]

That's great, and it answered my question. Thank you!

[Ashokkumar Balasubramanian]

Hi Andrew, 

 

We are glad to know that given solution works. Please let us know if you need any further assistance.  

 

Regards, 

Ashokkumar B. 

[Felix]

Hi Andrew, 

Greetings from Syncfusion support. 

The change event triggers only after the control has been lost the focus. While adding the chips, Select event will trigger and removing the chips Removed event will trigger. And Tagging event before set the selected item as chip in the component.This is the dafault behaviour of our component. Please find the below code snippet for adding and removing chip events. 

  

Select Event: 

<EjsMultiSelect ID="default" Mode="@VisualMode.Default" PlaceHolder="Favorite Sports" DataSource="@games" Select=”@onSelect”>EjsMultiSelect> 

@functions { 

    public void onSelect(SelectEventArgs args) 

    { 

    } 

} 

 

Removed Event: 

<EjsMultiSelect ID="default" Mode="@VisualMode.Default" PlaceHolder="Favorite Sports" DataSource="@games" Removed=”@onRemoving”>EjsMultiSelect> 

@functions { 

    public void onRemoving(removeEventArgs args) 

    { 

    } 

} 

To know more about these events, please refer the below API links, 

Select Event: https://ej2.syncfusion.com/documentation/api/multi-select#select 

Removed Event: https://ej2.syncfusion.com/documentation/api/multi-select#removed 

Tagging Event: https://ej2.syncfusion.com/documentation/api/multi-select#tagging 

Please let us know if you require any further assistance. 

Thanks, 

Christo 

Hi Christo,

in the current version the change event does nothing. Even if the field loses the focus. I would like to get the complete value of the field (this means all selected items) when the value changes. Do you have any instructions for me on how to do that? Furthermore I am wondering why it's not possible to bind the Value property via bind-Value="..." and get an updated value via ValueChanged. This is the default behavior of components in Blazor.

[Prince Oliver]

Hello Andrew, 

  

Good day to you. 

  

Query 1: Even if the field loses the focus. I would like to get the complete value of the field (this means all selected items) when the value changes. Do you have any instructions for me on how to do that? 

We have checked the reported issue with change event, and this issue occurs in the version 17.1.0.47-beta. This issue is fixed in the latest release version 17.1.0.48-beta and change event triggers as expected when the control losses focus. In case you are using any earlier versions, we suggest you update to the latest NuGet to get this resolved. 

You can find the latest packages here: https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core.RazorComponents 

Query 2: Furthermore I am wondering why it's not possible to bind the Value property via bind-Value="..." and get an updated value via ValueChanged 

We have supported two-way binding since the latest release version 17.1.0.48-beta. Please refer to the following release notes section for further details: https://ej2.syncfusion.com/aspnet-core-blazor/documentation/release-notes/17.1.48/ 

Once you have the latest version installed in your end, you can bind the value using bind-Value property and get the value in ValueChanged when the value state changes. Kindly refer to the following code for further reference 

  

<EjsMultiSelect ref='@MultiSeletRef' PlaceHolder="Select countries" bind-value="@val" change='@onChange' ValueChanged="@MyValueChangeHandler" DataSource="@localdata"> 

. . . . . . . . . . . . . . . . . . .  . . . . . . . . 

  

public void MyValueChangeHandler() 

{ 

    Console.WriteLine(this.val); 

} 

  

public object val = new string[]{"BM"}; 

  

We have attached an example with the latest version for your reference, please find it in the below link: 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication101572587490 

  

Let us know if you need any further assistance on this. 

  

Regards, 

Prince