Syncfusion ej2 .NET Core Dropdown disable values

Question

I'm trying to disable some options/values in a DropDownList. It should be very simple but i doesn't find any solution in documentation. https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started

Example Cabbage and Chickpea must be set as disabled

Controller:

Vegetables objVeg = new Vegetables();
        public IActionResult Index()
        {
            ViewBag.Veg = objVeg.VegetablesList();

            return View();
        }

        public class Vegetables
        {
            public string Vegetable { get; set; }
            public bool Disabled { get; set; }
            public string Id { get; set; }
            public List<Vegetables> VegetablesList()
            {
                List<Vegetables> veg = new List<Vegetables>();
                veg.Add(new Vegetables { Vegetable = "Cabbage", Disabled = true, Id = "item1" });
                veg.Add(new Vegetables { Vegetable = "Chickpea", Disabled = true, Id = "item2" });
                veg.Add(new Vegetables { Vegetable = "Garlic", Disabled = false, Id = "item3" });
                veg.Add(new Vegetables { Vegetable = "Green bean", Disabled = false, Id = "item4" });
                veg.Add(new Vegetables { Vegetable = "Horse gram", Disabled = false, Id = "item5" });
                veg.Add(new Vegetables { Vegetable = "Nopal", Disabled = false, Id = "item6" });
                veg.Add(new Vegetables { Vegetable = "Onion", Disabled = false, Id = "item7" });
                veg.Add(new Vegetables { Vegetable = "Pumpkins", Disabled = false, Id = "item8" });
                veg.Add(new Vegetables { Vegetable = "Spinach", Disabled = false, Id = "item9" });
                veg.Add(new Vegetables { Vegetable = "Wheat grass", Disabled = false, Id = "item10" });
                veg.Add(new Vegetables { Vegetable = "Yarrow", Disabled = false, Id = "item11" });
                return veg;
            }
        }

View:

<ejs-dropdownlist id="VegDDL" dataSource="@ViewBag.Veg" placeholder="Select Vegetables" floatLabelType="Always" popupHeight="300px">
    <e-dropdownlist-fields text="Vegetable" value="Id" disabled="Disabled" ></e-dropdownlist-fields>
 </ejs-dropdownlist>

I can't find the right way to set it as disabled in the View.

Answer 1

We have used the open event of the Dropdown List component to get the li element array and we have added an e-disabled class to the specific li elements based on the data source field “Disabled”. For more details refer to the below code snippet and sample.

<ejs-dropdownlist id="VegDDL" dataSource="@ViewBag.Veg"  placeholder="Select Vegetables" open="OpenHandler" floatLabelType="Always" popupHeight="300px">
    <e-dropdownlist-fields text="Vegetable" value="Id" ></e-dropdownlist-fields>
 </ejs-dropdownlist>
 
 <script>
 
     function OpenHandler(args)
     {
         var dataSource = document.getElementById('VegDDL').ej2_instances[0].dataSource;
        var Lielement =  args.popup.element.querySelectorAll('.e-list-item');
        for(var i=0;i<Lielement.length;i++)
        {
            if(dataSource[i].Disabled)
            Lielement[i].classList.add('e-disabled');
        }
     }
 
 </script>

API Documentation : https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Open