How to preselect ASP.NET CORE MultiSelect items via fields

28 Aug 20266 minutes to read

You can use a boolean field (for example, isSelected) on the MultiSelect dataSource to set preselected items through fields during initial rendering. Use the itemCreated event of fields to push items with the isSelected field set to true; these values are then selected through the dataBound event of the MultiSelect. Pass an empty string or array initially to load the control with preselected values.

In the following sample, selected values are mapped through the isSelected field.

<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <ejs-multiselect id="local" dataSource="@ViewBag.data" placeholder="Select countries" value="@ViewBag.val" mode="CheckBox" actionBegin="onBegin" dataBound="onBound">
        </ejs-multiselect>
    </div>
</div>
<script>
    var selected = [];
    function onBegin(e) {
        this.fields = {
            text: 'Name', value: 'Code', itemCreated: function (e) {
                var count = 0;
                if (count === 0) {
                    for (let i = 0; i < e.dataSource.length; i++) {
                        if (e.curData.isSelected == true)
                            itemSearch(e.curData.Code); //pass the corresponding value
                    }
                }
            }
        }
    }
    function itemSearch(e) {
        if (selected.indexOf(e) == -1)
            selected.push(e);
    }
    function onBound(e) {
        this.value = selected;
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Countries
    {
        public string Code { get; set; }
        public string Id { get; set; }
        public string Name { get; set; }

        public bool isSelected { get; set; }
        public List<Countries> CountryList()
        {
            List<Countries> country = new List<Countries>();
            country.Add(new Countries { Id = "ct1", Name = "South Africa", Code= "001" ,isSelected=true });
            country.Add(new Countries { Id = "ct2", Name = "North America", Code="002", isSelected = false });
            country.Add(new Countries { Id = "ct3",Name = "West Indies",Code="003", isSelected = true });
            country.Add(new Countries { Id = "ct4", Name = "North California" ,Code="004", isSelected = true });
            country.Add(new Countries { Id = "ct5", Name = "East Indies",Code="005", isSelected = false });
            country.Add(new Countries { Id = "ct6", Name = "India", Code = "006", isSelected = false });
            country.Add(new Countries { Id = "ct7", Name = "Japan", Code = "007", isSelected = true });
            country.Add(new Countries { Id = "ct8", Name = "China", Code = "008", isSelected = false });
            return country;
        }

    }
}