1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Blazor EjsMultiSelect events not firing when dropdown selection changes

Blazor EjsMultiSelect events not firing when dropdown selection changes

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

5 Replies
CI Christopher Issac Sunder K Syncfusion Team May 8, 2019 01:38 PM UTC

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, 

Please let us know if you require any further assistance. 

Thanks, 
Christo 


AN Andrew May 10, 2019 02:32 PM UTC

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

AB Ashokkumar Balasubramanian Syncfusion Team May 13, 2019 06:24 AM UTC

Hi Andrew, 
 
We are glad to know that given solution works. Please let us know if you need any further assistance.  
 
Regards, 
Ashokkumar B. 


FE Felix replied to Christopher Issac Sunder K May 17, 2019 11:42 AM UTC

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, 

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.

PO Prince Oliver Syncfusion Team May 21, 2019 03:39 PM UTC

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. 


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: 
  
Let us know if you need any further assistance on this. 
  
Regards, 
Prince

Loader.
Up arrow icon