Search results

Set preselected items through fields

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.

razor
selected.cs
country.cs
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        @Html.EJS().MultiSelect("local").Width("300px").Value(ViewBag.val).Placeholder("Select countries").Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox).DataSource((IEnumerable<Object>)ViewBag.data).ActionBegin("onBegin").DataBound("onBound").Render()
        <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>
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class MultiSelectController : Controller
    {
        public ActionResult selected()
        {
            ViewBag.data = new Countries().CountryList();
            ViewBag.val = new string[] {""};
            return View();
        }
    }
}
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;
        }

    }
}