How to select some items programatically in a multiselect dropdown

[Martin]

Hello, I want to set some selected items in a multiselect dropdown in my razor view, but I can't figure out how. My multiselect looks like this:

`<ejs-multiselect id="SelectedItems" 

 dataSource="@Model.MultiselectDropdownItems" 

 mode="CheckBox" 

 showDropDownIcon="true"

 popupHeight="350px">

 

<e-multiselect-fields text="DisplayName" value="Id"></e-multiselect-fields>

</ejs-multiselect>`

                   

               

The list of items is loaded without problems, but I want to set some of them selected in the server or by javascript. I've tried to set the values in javascript with:

`$('select[name= SelectedItems]').append('<option selected value=“itemId”>0</option>'`

But the checkbox doesn't appear checked even if the option elements are appended to the select element of the dropdown.Thanks in advance. 

[Ilakkiya Baskar]

Hi Martin,   

Thank you for contacting Syncfusion Support.  

We suggest you to set the value in array type for MultiSelect component. Please check the below code.   

<div class="control-section">   

    <div id='local-data'>   

        <div class='control-wrapper'>   

            <h4> Local Data</h4>   

            <ejs-multiselect id="local" placeholder="Select games" dataSource="@ViewBag.localdata"popupHeight="200px" mode="CheckBox" showSelectAll="true" hideSelectedItem="true" openOnClick="true"allowFiltering="true" showClearButton="true">   

                <e-multiselect-fields text="Game" value="Id"></e-multiselect-fields>   

            </ejs-multiselect>   

            <ejs-button id="btn" cssClass="e-flat" content="click"></ejs-button>   

        </div>   

    </div>   

    <script>   

         

    document.getElementById('btn').onclick = () => {   

        var msObject = document.getElementById("local").ej2_instances[0];   

           

        var str_array = ["Game3",Game2"];   

   

        msObject.value = str_array; //set the value   

    }   

    </script>   

   

In the attached sample, on click handler, we set the value in the click handler.   

Please check the below sample,   

http://www.syncfusion.com/downloads/support/forum/137523/ze/MutliSelect357517511-2073197758   

Please check the below link,   

https://ej2.syncfusion.com/aspnet/documentation/multi-select/chip-customization.html?syntax=tag   

  

Let us know if there is any concern, we will be happy to assist you.   

Regards,   

Ilakkiya B   

[Martin]

Thank you very much Ilakkiya. Problem solved.

[Keerthana Rajendran]

Hi Martin, 

 

Most Welcome. Please get back to us if you require further assistance on this. We will be happy to assist you. 

 

Regards, 

Keerthana. 

[Markus]

How would you do this with Blazor?

[Berly Christopher]

Hi Markus, 

  

We can set the required item in the MultiSelect DropDown with help of @bind-value attribute as mentioned in the below code example. 

  

@using Syncfusion.Blazor.DropDowns 

 

<SfMultiSelect Placeholder="e.g. Australia" @bind-Value="@MultiVal" DataSource="@Country"> 

    <MultiSelectFieldSettings Value="Code" Text="Name"></MultiSelectFieldSettings> 

</SfMultiSelect> 

 

@code { 

 

   public string[] MultiVal { get; set; } = new string[] { "AU", "BM" }; 

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

    }; 

} 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_Bind_value_137523-468515026  

  

Screenshot: 

  

 

  

Regards, 

Berly B.C