Set preselected items through fields

17 Feb 20225 minutes to read

You can use a boolean field(for ex:”isSelected”) of MultiSelect dataSource to set preselected items through fields during initial rendering. You can use itemCreated event of fields to push items with isSelected field set to true and these values will be selected through dataBound event of MultiSelect. Pass empty string of array initially to load the control with preselected values.

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

CSHTML

<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>

Country.cs

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;
        }

    }
}