How To

Configure the cascading DropDownList

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

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

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

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

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>

Do incremental search in the DropDownList

DropDownList supports incremental search, by default. You can search the list item by focusing the DropDownList and typing the characters in it. The closely matched items are selected sequentially.

If the same key is searched once again, the next matched item is selected.

You can achieve this behavior by using ej2-tooltip component. When the mouse hover on the DropDownList option that tooltip display some details related to hovered list item.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
         <ejs:tooltip id="body" content='Loading...' target='.e-list-item' position='top center' :beforeRender='onBeforeRender'>
            <ejs-dropdownlist id='Countries' :dataSource='countryData' :fields='fields' :close='onClose' placeholder='Select a country'></ejs-dropdownlist>
         </ejs:tooltip>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { TooltipPlugin } from "@syncfusion/ej2-vue-popups";

Vue.use(TooltipPlugin);

Vue.use(DropDownListPlugin);

import { Tooltip } from '@syncfusion/ej2-popups';

export default { data () {
    return {
      countryData: [
        { id: '1', text: 'Australia', content: 'National sports is Cricket' },
        { id: '2', text: 'Bhutan', content: 'National sports is Archery' },
        { id: '3', text: 'China', content: 'National sports is Table Tennis' },
        { id: '4', text: 'Cuba', content: 'National sports is Baseball' },
        { id: '5', text: 'India', content: 'National sports is Hockey' },
        { id: '6', text: 'Spain', content: 'National sports is Football' },
        { id: '7', text: 'United States', content: 'National sports is Baseball' }
      ],
      fields : { text: 'text', value: 'id' }
    }
  },
  methods: {
        onClose: function(e) {
            var tooltip = document.getElementById('body');
            var TootipObj = tooltip.ej2_instances[0];
            TootipObj.close();
        },
        onBeforeRender : function(args) {
            var listElement = document.getElementById('Countries');
            var result = listElement.ej2_instances[0].dataSource;
            var i;
            for (i = 0; i < result.length; i++) {
                if (result[i].Name === args.target.textContent) {
                    this.content = result[i].Name;
                    this.dataBind();
                    break;
                }
            }
        }
    }
}
</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>

Close the popup on scroll

By using the hidePopup method in DropDownList, you can close the popup on scroll when triggered the windows scroll event.

The following example demonstrate about how to close the popup on scroll.

Source
Preview
app.vue
<template>
  <div id="app">
    <div style ='padding: 50px'>
        <h4> You can close the opened popup by scroll the page.</h4>
    </div>
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' popupHeight="220px" :dataSource='sportsData' placeholder='Select a game'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(DropDownListPlugin);
export default {
  data (){
    return {
      sportsData: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
    }
  }
}

document.onscroll = () =>  {
            var dropObj = document.getElementById("dropdownlist"); //to get dropdown list object
            dropObj.ej2_instances[0].hidePopup(); // hide the popup using hidePopup method
};
</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";
  body {
  height: 500px;
}
</style>

Whether each list items hold unique value

yes, value for each list items should be unique.

Clear the selected item in DropDownList

You can clear the selected item in the below two different ways.

By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.

Through programmatic you can set null value to anyone of the index, text or value property to clear the selected item in DropDownList.

The following example demonstrate about how to clear the selected item in DropDownList.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' :dataSource='sportsData' placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px'>
      <button id='button' class="e-control e-btn" v-on:click="onClick"> Set null to value property</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(DropDownListPlugin);
export default {
  data (){
    return {
      sportsData: ["American Football", "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Rugby", "Snooker", "Tennis"];
    }
  },
  methods: {
        onClick: function (event) {
            var dropObject = document.getElementById("dropdownlist");
            var dropDownListObject = dropObject.ej2_instances[0];
            dropDownListObject.value = null;
        }
    }
}
</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>

Preselect the list items in multiple cascading DropDownList

The following example demonstrate about how to preselect the list items in multiple cascading DropDownList.

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

export default {
  data () {
    return {
      countryData: [
        { CountryName: 'United States', CountryId: '1' },
        { CountryName: 'Australia', CountryId: '2' }
      ],
      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' },
      countryindex : 1,
      stateindex : 0,
      cityindex : 0,
      cityenabled : false,
      stateenabled : 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 DropDownList selected value
            stateObj.query = new Query().where('CountryId', 'equal', countryObj.value);
            // enable the state DropDownList
            stateObj.enabled = true;
            //clear the existing selection.
            stateObj.text = null;
            // bind the property changes to state DropDownList
            stateObj.dataBind();
            //clear the existing selection in city DropDownList
            cityObj.text = null;
            //disabe the city DropDownList
            cityObj.enabled = false;
            //bind the property cahnges to City DropDownList
            cityObj.dataBind();
        },
        onStateChange: function(e) {
            var stateObj = document.getElementById('states').ej2_instances[0];
            var cityObj = document.getElementById('cities').ej2_instances[0];
            // Query the data source based on state DropDownList selected value
            cityObj.query = new Query().where('StateId', 'equal', stateObj.value);
            // enable the city DropDownList
            cityObj.enabled = true;
            //clear the existing selection
            cityObj.text = null;
            // bind the property change to city DropDownList
            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>

Disable the Fixed group header in DropDownList

The following example demonstrate about how to disable the Fixed group header in DropDownList through CSS by using visibility attribute.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:20px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' popupHeight='200px' placeholder='Select a vegetable' :fields='fields' :dataSource='dataSource'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
export default {
  data () {
      var vegetableData =  [
        { Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },
        { Vegetable: 'Spinach', Category: 'Leafy and Salad', Id: 'item2' },
        { Vegetable: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item3' },
        { Vegetable: 'Yarrow', Category: 'Leafy and Salad', Id: 'item4' },
        { Vegetable: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item5' },
        { Vegetable: 'Chickpea', Category: 'Beans', Id: 'item6' },
        { Vegetable: 'Green bean', Category: 'Beans', Id: 'item7' },
        { Vegetable: 'Horse gram', Category: 'Beans', Id: 'item8' },
        { Vegetable: 'Garlic', Category: 'Bulb and Stem', Id: 'item9' },
        { Vegetable: 'Nopal', Category: 'Bulb and Stem', Id: 'item10' },
        { Vegetable: 'Onion', Category: 'Bulb and Stem', Id: 'item11' }
        ];
    return {
        dataSource : vegetableData,
        fields : { groupBy: 'Category', text: 'Vegetable', 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-ddl .e-dropdownbase .e-fixed-head {
  visibility: hidden;
}
</style>

Detect whether the value change happened by manual or programmatic

You can check about whether value change happened by manual or programmatic by using change event argument that argument name is isInteracted.

The following example demonstrate, how to check whether value change happened by manual or programmatic.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' :dataSource='sportsData' :fields='fields' :change='onChange' placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='margin: 50px'>
      <button id='button' class="e-control e-btn" v-on:click="onClick"> Set value dynamically</button>
    </div>
    <p style='margin: 5px' id='event'> </p>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(DropDownListPlugin);
export default {
  data (){
    return {
      sportsData: [
            { Id: 'game1', Game: 'Badminton' },
            { Id: 'game2', Game: 'Football' },
            { Id: 'game3', Game: 'Tennis' }
      ],
      fields : { text: 'Game', value: 'Id' }
    }
  },
  methods: {
        onClick: function (event) {
            var dropObject = document.getElementById("dropdownlist");
            var dropDownListObject = dropObject.ej2_instances[0];
            dropDownListObject.value = 'game3';
        },
        onChange : function(args) {
            let element = document.createElement('p');
            if (args.isInteracted) {
                element.innerText = 'Changes happened by Interaction';
            } else {
                element.innerText = 'Changes happened by programmatic';
            }
            document.getElementById('event').append(element);
        }
    }
}
</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>

Add item in between in DropDownList

You can add item in between based on item index. If you add new item without item index, item will be added as last item in list.

The following example demonstrate how to add item in between in DropDownList.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' :index='index' :dataSource='sportsData' :fields='fields' placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px 0'>
      <button id='first' class="e-control e-btn" v-on:click="onFirst"> add item (Hockey) in first</button>
    </div>
    <div style='padding-left: 50px 0'>
      <button id='between' class="e-control e-btn" v-on:click="onMiddle"> add item (Golf) in between</button>
    </div>
    <div style='padding: 50px 0'>
      <button id='last' class="e-control e-btn" v-on:click="onLast"> add item (Cricket) in last</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(DropDownListPlugin);
export default {
  data (){
    return {
      sportsData: [
            { Id: 'game1', Game: 'Badminton' },
            { Id: 'game2', Game: 'Football' },
            { Id: 'game3', Game: 'Tennis' }
      ],
      fields : { text: 'Game', value: 'Id' },
      index : 2
    }
  },
  methods: {
        onFirst: function (event) {
            var dropObject = document.getElementById("dropdownlist").ej2_instances[0];
            dropObject.addItem({Id: 'game0', Game: 'Hockey'}, 0);
        },
        onMiddle: function (event) {
            var dropObject = document.getElementById("dropdownlist").ej2_instances[0];
            dropObject.addItem({Id: 'game4', Game: 'Golf'}, 2);
        },
        onLast: function (event) {
            var dropObject = document.getElementById("dropdownlist").ej2_instances[0];
            dropObject.addItem({Id: 'game5', Game: 'Cricket'});
        }
    }
}
</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>

Remove an item from DropDownList

The following example demonstrate about how to remove an item from DropDownList.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' :dataSource='sportsData' :fields='fields' placeholder='Select a game'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px 0'>
      <button id='first' class="e-control e-btn" v-on:click="remove"> Remove 0th item</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(DropDownListPlugin);
export default {
  data (){
    return {
      sportsData: [
            { Id: 'game1', Game: 'Badminton' },
            { Id: 'game2', Game: 'Football' },
            { Id: 'game3', Game: 'Tennis' }
      ],
      fields : { text: 'Game', value: 'Id' }
    }
  },
  methods: {
        remove: function (event) {
            var obj = document.getElementById("dropdownlist");
            var dropDownListObject = obj.ej2_instances[0];
           if (dropDownListObject.list) {
                if (dropDownListObject.index === 0) {
                    dropDownListObject.value = null;
                    dropDownListObject.dataBind();
                }
                // remove first item in list
                (dropDownListObject.list.querySelectorAll('li')[0]).remove();
                if (!dropDownListObject.list.querySelectorAll('li')[0]) {
                    dropDownListObject.dataSource = [];
                    // enable the nodata template when no data source is empty.
                    dropDownListObject.list.classList.add('e-nodata');
                }
            }
            else {
                // remove first item in list
                dropDownListObject.dataSource.splice(0, 1);
            }
        }
    }
}
</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>

Modify the result data before passing to DropDownList when binding remote data source

When binding the remote data source, by using the actionComplete event, you can modify the result data before passing it to DropDownList.

The following sample demonstrate how to modify the result data.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' :actionComplete='actionComplete' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
import { DataManager,Query,ODataV4Adaptor } from "@syncfusion/ej2-data";
export default {
  data (){
    return {
        query :  new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
        dataSource : new DataManager({
          url: 'http://services.odata.org/V4/Northwind/Northwind.svc/',
          adaptor: new ODataV4Adaptor,
          crossDomain: true
          }),
        fields: { text: 'ContactName', value: 'CustomerID' }
    }
  },
   methods: {
        actionComplete: function (e) {
            // initially result contains 6 items
            console.log("Before modified the result: " + e.result.length);
            // remove first 2 items from result.
            e.result.splice(0, 2);
            // now displays the result count is 4.
            console.log("After modified the result: " + e.result.length);
        }
    }
}

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

Get the total count of data when remote data bind with DropDownList

Before component rendering, you can get the total items count by using actionComplete  event with its result arguments.

After rendering this component, you can get the total items count by using getItems method.

The following example demonstrate how to get the total items count.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' :actionComplete='actionComplete' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px 0'>
      <button id='first' class="e-control e-btn" v-on:click="getItems"> Get items</button>
    </div>
    <p id='event'> </p>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
import { DataManager,Query,ODataV4Adaptor } from "@syncfusion/ej2-data";
export default {
  data (){
    return {
        query :  new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
        dataSource : new DataManager({
          url: 'http://services.odata.org/V4/Northwind/Northwind.svc/',
          adaptor: new ODataV4Adaptor,
          crossDomain: true
          }),
        fields: { text: 'ContactName', value: 'CustomerID' }
    }
  },
   methods: {
        actionComplete: function (e) {
            // initially result contains 6 items
            console.log("Before modified the result: " + e.result.length);
            // remove first 2 items from result.
            e.result.splice(0, 2);
            // now displays the result count is 4.
            console.log("After modified the result: " + e.result.length);
        },
        getItems: function(e) {
            var obj = document.getElementById("dropdownlist");
            var customers = obj.ej2_instances[0];
            // get items count using getItems method
            console.log("Total items count: " + customers.getItems().length);
            let element: HTMLElement = document.createElement('p');
            element.innerText = "Total items count: " + customers.getItems().length;
            document.getElementById('event').append(element);
        }
    }
}

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

Limit the search result on filtering

The following example demonstrates about how to set limit the search result on filtering.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:20px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' popupHeight='250px' sortOrder="Ascending" :query='query' :allowFiltering='allowFiltering' :filtering='filtering' :dataSource='dataSource' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
import { DataManager,Query,ODataV4Adaptor,Predicate } from "@syncfusion/ej2-data";

export default {
  data () {
    return {
        dataSource : new DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        }),
        query : new Query().select(['ContactName', 'CustomerID']).take(7),
        fields : { text: 'ContactName', value: 'CustomerID' },
        allowFiltering: true,
    }
  },
  methods: {
        filtering: function(e) {
            var searchData = new DataManager({
                url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
                adaptor: new ODataV4Adaptor,
                crossDomain: true
            });
            // set limit as 4 to search result
            var query = new Query().select(['ContactName', 'CustomerID']).take(4);
            query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
            e.updateData(searchData, query);
        }
    }
}
</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>

Highlight the matched character in filtering

By using the highlightSearch method, you can highlight the matched character in DropDownList filtering.

The following example demonstrates about how to highlight the matched character in filtering.

Source
Preview
app.vue
<template>
  <div id="app">
    <div id='container' style="margin:20px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' popupHeight='250px' sortOrder="Ascending" :query='query' :allowFiltering='allowFiltering' :filtering='filtering' :dataSource='dataSource' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
import { DataManager,Query,ODataV4Adaptor,Predicate } from "@syncfusion/ej2-data";
import { DropDownList, FilteringEventArgs, highlightSearch } from '@syncfusion/ej2-dropdowns';

export default {
  data () {
    return {
        dataSource : new DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        }),
        query : new Query().select(['ContactName', 'CustomerID']).take(7),
        fields : { text: 'ContactName', value: 'CustomerID' },
        allowFiltering: true,
    }
  },
  methods: {
        filtering: function(e) {
            var searchData = new DataManager({
                url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
                adaptor: new ODataV4Adaptor,
                crossDomain: true
            });
            var text = e.text;
            var query = new Query().select(['ContactName', 'CustomerID']);
            //frame the query based on search string with filter type.
            query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
            //pass the filter data source, filter query to updateData method.
            e.updateData(searchData, query);
            setTimeout(() => {
                var popupElement = document.getElementById('dropdownlist_popup');
                // get the list from popup element
                var lists = popupElement.querySelector('ul');
                // pass the element, text, ignore case and filter type as argument to highlightSearch method.
                highlightSearch(lists, text, true, 'StartsWith');
            }, 300);
        }
    }
}
</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>