Blazor EjsMultiSelect and OnAfterRenderAsync() not working

The following code works fine for me:

However moving my logic to OnAfterRenderAsync results in "No Records Found":

The dropdown populates with records as expected in Scenario 1. However in Scenario 2 I get "No Records Found" in the dropdown.

What do I have to do to allow my DataSource to be populated in On AfterRenderAsync()?

Hi Andrew, 

Greetings from Syncfusion support. 

OnInitAsync() Method is called when the component initialization. But OnAfterRenderAsync() method is called after the component render. So When rendering, the component dataSource is set as null. After the rendering in onAfterRenderAsync method need to call the DataBind() method to refresh the dataSource. Please find the code snippet 

Please check the above code snippet and get back to us if you require any further assistance. 

Thanks, 

Christo 

Hi Andrew, 

 

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

 

Regards, 

Ashokkumar B. 

I have a little problem; the code is working fine for displaying and removing already selected values.

But I can't add any other value to the list.

What can I do?

Thanks for your answer.

Hi Andrew, 

You can add the custom values to the list by enabling our public property AllowCustomValue as true as mentioned in the below code example. By default, AllowCustomValue property value will be false.  

Method 1: 

<EjsMultiSelect ref="@multiselect" PlaceHolder="Select countries" AllowCustomValue="true" DataSource="@localdata">

 

Also, you can add the custom value by using our public AddItem method. We suggest you to pass the value as string to add the corresponding value in the list. Please find the code example below. 

Method 2: 

<input type="button" id="item" ref="multiselect" value="AddItem" onclick="@onClick" />      public void onClick(UIMouseEventArgs args)      {          this.multiselect.AddItem("newItem");      }

 

We have prepared the sample and attached below. 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11236231209 

  

Regards, 

Berly B.C