How To

Configure the Cascading ComboBox

The cascading ComboBox is a series of ComboBox, where the value of one ComboBox depends upon another’s value. This can be configured by using the change event of the parent ComboBox. Within that change event handler, data has to be loaded to the child ComboBox based on the selected value of the parent ComboBox.

The following example, shows the cascade behavior of country, state, and city ComboBox. Here, the dataBind method is used to reflect the property changes immediately to the ComboBox.

razor
cascading.cs
<div class="col-lg-12 control-section">
        <div class='control-wrapper'>
            <div class="padding-top">
                @Html.EJS().ComboBox("country").Placeholder("Select a country").PopupHeight("auto").Change("countrychange").DataSource((IEnumerable<Object>
                         )ViewBag.country).Fields(new ComboBoxFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()
                @*//change="countrychange"*@
            </div>
            <div class="padding-top">

                @Html.EJS().ComboBox("state").Placeholder("Select a state").Enabled(false).Change("statechange").PopupHeight("auto").DataSource((IEnumerable<object>)ViewBag.state).Fields(new ComboBoxFieldSettings { Text = "StateName", Value = "StateId" }).Render()

                @*// change="statechange"*@

            </div>
            <div class="padding-top">

                @Html.EJS().ComboBox("city").Placeholder("Select a city").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<object>
                    )ViewBag.cities).Fields(new ComboBoxFieldSettings { Text = "CityName", Value = "CityId" }).Render()

            </div>
        </div>
    </div>

    <style>
        .control-wrapper {
            margin: 0 auto;
            width: 250px;
        }

        .control-section .padding-top {
            padding-top: 35px;
        }
    </style>
    <script type="text/javascript">
        function countrychange() {
            var state = document.getElementById('state').ej2_instances[0];
            var city = document.getElementById('city').ej2_instances[0];
            var country = document.getElementById('country').ej2_instances[0];
            // disable the state DropDownList
            state.enabled = true;
            // frame the query based on selected value in country DropDownList.
            var tempQuery = new ej.data.Query().where('CountryId', 'equal', country.value);
            // set the framed query based on selected value in country DropDownList.
            state.query = tempQuery;
            // set null value to state DropDownList text property
            state.text = null;
            // bind the property changes to state DropDownList
            state.dataBind();
            // set null value to city DropDownList text property
            city.text = null;
            // disable the city DropDownList
            city.enabled = false;
            // bind the property changes to City DropDownList
            city.dataBind();
        }
        function statechange() {
            var city = document.getElementById('city').ej2_instances[0];
            var state = document.getElementById('state').ej2_instances[0];
            city.enabled = true;
            // Query the data source based on state DropDownList selected value
            var tempQuery1 = new ej.data.Query().where('StateId', 'equal', state.value);
            // set the framed query based on selected value in city DropDownList.
            city.query = tempQuery1;
            //clear the existing selection
            city.text = null;
            // bind the property change to city DropDownList
            city.dataBind();

        }
    </script>
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 ComboBoxController : Controller
    {
        public IActionResult cascading()
        {
            ViewBag.state = new State().StateList();
            ViewBag.country = new Country().CountryList();
            ViewBag.cities = new Cities().CitiesList();
            ViewBag.popupHeight = "auto";
            return View();
        }
    }
}

Show the list items with icons

You can render icons to the list items by mapping the iconCss  field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.

In the following sample, icon classes are mapped with iconCss field.

razor
icons.cs
SocialMedia.cs
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <h4> Icons</h4>
        @Html.EJS().ComboBox("icons").Placeholder("Select a social media").Fields(new ComboBoxFieldSettings { Text = "SocialMediaName", IconCss = "Class", Value = "Id" }).PopupHeight("200px").DataSource((IEnumerable<SocialMedia>)ViewBag.icondata).Render()
    </div>
</div>   
<link href="../Content/dropdownlist/grouping.css" rel="stylesheet" />
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 ComboBoxController : Controller
    {
        public IActionResult icons()
        {
            ViewBag.icondata = new SocialMedia().SocialMediaList();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class SocialMedia
    {
        public string Class { get; set; }
        public string SocialMediaName { get; set; }
        public string Id { get; set; }
        public List<SocialMedia> SocialMediaList()
        {
            List<SocialMedia> media = new List<SocialMedia>();
            media.Add(new SocialMedia{ Class= "facebook", SocialMediaName= "Facebook", Id= "media1" });
            media.Add(new SocialMedia{ Class= "google-plus", SocialMediaName= "Google Plus", Id= "media2" });
            media.Add(new SocialMedia{ Class= "instagram", SocialMediaName= "Instagram", Id= "media3" });
            media.Add(new SocialMedia{ Class= "linkedin", SocialMediaName= "LinkedIn", Id= "media4" });
            media.Add(new SocialMedia{ Class= "skype", SocialMediaName= "Skype", Id= "media5" });
            media.Add(new SocialMedia{ Class= "tumblr", SocialMediaName= "Tumblr", Id= "media6" });
            media.Add(new SocialMedia{ Class= "twitter", SocialMediaName= "Twitter", Id= "media7" });
            media.Add(new SocialMedia{ Class= "vimeo", SocialMediaName= "Vimeo", Id= "media8" });
            media.Add(new SocialMedia{ Class= "whatsapp", SocialMediaName= "WhatsApp", Id= "media9" });
            media.Add(new SocialMedia { Class = "youtube", SocialMediaName= "YouTube", Id = "media10" });
            return media;
        }
    }
}

Autofill supported with ComboBox

The ComboBox supports the autofill behaviour with the help of autofill property. Whenever you change the input value, the ComboBox will autocomplete your data by matching the typed character. Suppose, if no matches found then, comboBox doesn’t suggest any item.

In the following sample, showcase that how to work autofill with ComboBox.

razor
autofill.cs
@Html.EJS().ComboBox("games").Autofill(true).Placeholder("Select a game").PopupHeight("230px").DataSource((IEnumerable<object>)ViewBag.localdata).Render()
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 ComboBoxController : Controller
    {
         public IActionResult autofill()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}