Blazor EjsMultiSelect and OnAfterRenderAsync() not working

[Andrew]

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]

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]

Yes, this worked. 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. 

[Patrick]

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]

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