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. Image for the cookie policy date

Blazor EjsMultiSelect - how to programatically set the selected items

I am using the Blazore EjsMultiSelect. I populate the list of values as such:

<EjsMultiSelect ref="dropdown" DataSource="@CloudCredentials" Fields="@SelectCredentialsFieldSettings"></EjsMultiSelect>

        protected override async Task OnAfterRenderAsync()
        {
                CloudCredentials = (await _userService.GetUser()).CloudCredentials.OrderBy(i => i.FriendlyName).ToList();
                dropdown.DataSource = CloudCredentials;
                dropdown.DataBind();
            }
        }

Can you tell me how to programatically select specific items in the dropdown, such that specific chips are shown after OnAfterRenderAsync() completion?

1 Reply

PO Prince Oliver Syncfusion Team May 15, 2019 11:04 AM UTC

Hello Andrew, 

Thank you for contacting us. 

We have checked the reported scenario. To programmatically select specific items in the dropdown and be displayed after rendering the component, we can achieved it by using value property. In MultiSelect component value property is defined as array of strings. Kindly refer to the following code snippet. 

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

We have attached a sample for your reference, please find it in the following location:  

Let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon