1. Home
  2. Forum
  3. Blazor
  4. Blazor EjsMultiSelect and OnAfterRenderAsync() not working

Blazor EjsMultiSelect and OnAfterRenderAsync() not working

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

5 Replies
CI Christopher Issac Sunder K Syncfusion Team 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 


AN Andrew May 10, 2019 02:34 PM UTC

Yes, this worked. Thank you

AB Ashokkumar Balasubramanian Syncfusion Team 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. 


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

BC Berly Christopher Syncfusion Team 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 
 


Loader.
Up arrow icon