We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor EjsMultiSelect and OnAfterRenderAsync() not working

Thread ID:

Created:

Updated:

Platform:

Replies:

145024 May 7,2019 08:05 PM UTC Jun 3,2019 11:23 AM UTC Blazor 5
loading
Tags: MultiSelect Dropdown
Andrew
Asked On May 7, 2019 08:05 PM UTC

Hello,

Scenario 1

The following code works fine for me:

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

     protected override async Task OnInitAsync()
        {
                localdata = new List<object>
                { 
                    new { Name = "Australia", Code = "AU" },
                    new { Name = "Bermuda", Code = "BM" },
                };
        }

Scenario 2

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

     protected override async Task OnAfterRenderAsync()
        {
                localdata = new List<object>
                { 
                    new { Name = "Australia", Code = "AU" },
                    new { Name = "Bermuda", Code = "BM" },
                };
        }

Problem

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()?

Christopher Issac Sunder K [Syncfusion]
Replied On May 10, 2019 06:48 AM UTC

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 

<EjsMultiSelect ref="@MultiSelectObj" ID="local" PlaceHolder="Select countries" DataSource="@localdata" Fields="@MultiSelectFieldSettings"></EjsMultiSelect> 
EjsMultiSelect MultiSelectObj; 
@functions{ 
    protected override async Task OnAfterRenderAsync() 
    { 
        localdata = new List<object> 
            { 
            new { Name = "Australia", Code = "AU" }, 
            new { Name = "Bermuda", Code = "BM" }, 
            }; 
        MultiSelectObj.DataSource = localdata; 
        MultiSelectObj.DataBind(); 
    } 
    public object MultiSelectFieldSettings = new { text = "Name", value = "Code" }; 
} 

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

Thanks, 
Christo 


Andrew
Replied On May 10, 2019 02:34 PM UTC

Yes, this worked. Thank you

Ashokkumar Balasubramanian [Syncfusion]
Replied On May 13, 2019 06:49 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. 


Patrick
Replied On May 31, 2019 04:58 PM UTC

Hi,

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.

Berly Christopher [Syncfusion]
Replied On June 3, 2019 11:23 AM UTC

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. 
  
Regards, 
Berly B.C 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon