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.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
          <ejs-combobox id='countries' :dataSource='countryData' :fields='countryfields' :change='onCountryChange' placeholder='Select a country'></ejs-combobox>
        <div class="padding-top">
          <ejs-combobox id='states' :dataSource='stateData' :enabled='stateenabled' :fields='statefields' :change='onStateChange' placeholder='Select a state'></ejs-combobox>
        </div>
        <div class="padding-top">
          <ejs-combobox id='cities' :dataSource='cityData' :enabled='cityenabled' :fields='cityfields' placeholder='Select a city'></ejs-combobox>
        </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(ComboBoxPlugin);
import { Query } from '@syncfusion/ej2-data';

export default {
  data () {
    return {
      countryData: [
        { CountryName: 'Australia', CountryId: '2' },
        { CountryName: 'United States', CountryId: '1' }
      ],
      stateData: [
        { StateName: 'New York', CountryId: '1', StateId: '101' },
        { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
        { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
      ],
      cityData : [
        { CityName: 'Albany', StateId: '101', CityId: 201 },
        { CityName: 'Beacon ', StateId: '101', CityId: 202 },
        { CityName: 'Emporia', StateId: '102', CityId: 206 },
        { CityName: 'Hampton ', StateId: '102', CityId: 205 },
        { CityName: 'Hobart', StateId: '105', CityId: 213 },
        { CityName: 'Launceston ', StateId: '105', CityId: 214 }
      ]
      countryfields : { value: 'CountryId', text: 'CountryName' }
      statefields : { value: 'StateId', text: 'StateName' },
      cityfields : { text: 'CityName', value: 'CityId' },
      stateenabled : false,
      cityenabled : false
    }
  },
  methods: {
        onCountryChange: function(e) {
          var countryObj = document.getElementById('countries').ej2_instances[0];
          var stateObj = document.getElementById('states').ej2_instances[0];
          var cityObj = document.getElementById('cities').ej2_instances[0];
           //Query the data source based on country ComboBox selected value
          stateObj.query = new Query().where('CountryId', 'equal', countryObj.value);
          // enable the state ComboBox
          stateObj.enabled = true;
          //clear the existing selection.
          stateObj.text = null;
          // bind the property changes to state ComboBox
          stateObj.dataBind();
          //clear the existing selection in city ComboBox
          cityObj.text = null;
          //disabe the city ComboBox
          cityObj.enabled = false;
          //bind the property cahnges to City ComboBox
          cityObj.dataBind();
        },
        onStateChange: function(e) {
          var stateObj = document.getElementById('states').ej2_instances[0];
          var cityObj = document.getElementById('cities').ej2_instances[0];
          cityObj.query = new Query().where('StateId', 'equal', stateObj.value);
          // enable the city ComboBox
          cityObj.enabled = true;
          //clear the existing selection
          cityObj.text = null;
          // bind the property change to city ComboBox
          cityObj.dataBind();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  #container .padding-top {
    padding-top: 35px;
}
</style>

Show the list items with icons

You can render icons to the list items by mapping the the iconCss  fields. 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.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-combobox id='combobox' :dataSource='sortFormatData' :fields='fields' placeholder='Select a format'></ejs-combobox>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(ComboBoxPlugin);

export default {
  data () {
    return {
      sortFormatData: [
        { Class: 'asc-sort', Type: 'Sort A to Z', Id: '1' },
        { Class: 'dsc-sort', Type: 'Sort Z to A ', Id: '2' },
        { Class: 'filter', Type: 'Filter', Id: '3' },
        { Class: 'clear', Type: 'Clear', Id: '4' }
      ],
      fields : { text: 'Type', iconCss: 'Class', value: 'Id' }
    }
  }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  .e-list-icon{
    line-height: 1.3;
    padding-right: 10px;
    text-indent: 5px;
}
.asc-sort:before {
    content: '\e73f';
    font-family: 'e-icons';
    font-size: 20px;

}
.dsc-sort:before {
    content: '\e721';
    font-family: 'e-icons';
    font-size: 20px;
}
.filter:before {
    content: '\e818';
    font-family: 'e-icons';
    font-size: 20px;
    opacity: 0.78;
}
.clear:before {
    content: '\e7db';
    font-family: 'e-icons';
    font-size: 20px;
}
</style>

Autofill supports 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.

The following examples, showcase that how to work autofill with ComboBox.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-combobox id='combobox' :dataSource='sportsData' :autofill='autofill' placeholder='Select a game'></ejs-combobox>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(ComboBoxPlugin);

export default {
  data () {
    return {
      sportsData: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'],
      autofill : true,
    }
  }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>