Disabled Items in Vue DropDownList component

20 Jun 20245 minutes to read

The DropDownList provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the disabled field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the fields.disabled property.

In the following sample, State are grouped according on its category using disabled field.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-dropdownlist :dataSource='statusData' :fields='fields' :placeholder="waterMark"></ejs-dropdownlist>
  </div>
</template>
<script setup>
import { DropDownListComponent as EjsDropdownlist } from '@syncfusion/ej2-vue-dropdowns';

const waterMark = 'Select Status';
const statusData = [
    { "Status": "Open", "State": false },
    { "Status": "Waiting for Customer", "State": false },
    { "Status": "On Hold", "State": true },
    { "Status": "Follow-up", "State": false },
    { "Status": "Closed", "State": true },
    { "Status": "Solved", "State": false },
    { "Status": "Feature Request", "State": false }
];
const fields = { value: 'Status', disabled: 'State' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 10%;
  width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-dropdownlist :dataSource='statusData' :fields='fields' :placeholder="waterMark"></ejs-dropdownlist>
  </div>
</template>
<script>
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent
  },
  data() {
    return {
      waterMark: 'Select Status',
      statusData: [
    { "Status": "Open", "State": false },
    { "Status": "Waiting for Customer", "State": false },
    { "Status": "On Hold", "State": true },
    { "Status": "Follow-up", "State": false },
    { "Status": "Closed", "State": true },
    { "Status": "Solved", "State": false },
    { "Status": "Feature Request", "State": false }
      ],
      fields: { value: 'Status', disabled: 'State' }
    }
  }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 10%;
  width: 30%;
}
</style>

Disable Item Method

The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the dataSource, when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.

Parameter	Type	Description
itemHTMLLIElement	HTMLLIElement	It accepts the HTML Li element of the item to be removed.
itemValue	string | number | boolean | object	It accepts the string, number, boolean and object type value of the item to be removed.
itemIndex	number	It accepts the index of the item to be removed.

Enabled

If you want to disabled the overall component to set the enabled property to false.