Cascading drop down list with grid editing in Vue Grid component

11 Jun 202414 minutes to read

You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature.

In the below demo, Cascading DropDownList rendered for ShipCountry and ShipState column.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid ref='grid' :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' :edit='countryParams'
          width=150></e-column>
        <e-column field='ShipCity' headerText='Ship City' editType='dropdownedit' :edit='stateParams'
          width=150></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import { cascadeData } from './datasource.js';
let country = [
  { countryName: 'United States', countryId: '1' },
  { countryName: 'Australia', countryId: '2' }
];
let state = [
  { stateName: 'New York', countryId: '1', stateId: '101' },
  { stateName: 'Virginia ', countryId: '1', stateId: '102' },
  { stateName: 'Washington', countryId: '1', stateId: '103' },
  { stateName: 'Queensland', countryId: '2', stateId: '104' },
  { stateName: 'Tasmania ', countryId: '2', stateId: '105' },
  { stateName: 'Victoria', countryId: '2', stateId: '106' }
];
let countryElem, stateElem, countryObj, stateObj;
const data = cascadeData;
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
const countryParams = {
  create: () => {
    countryElem = document.createElement('input');
    return countryElem;
  },
  read: () => {
    return countryObj.text;
  },
  destroy: () => {
    countryObj.destroy();
  },
  write: () => {
    countryObj = new DropDownList({
      dataSource: country,
      fields: { value: 'countryId', text: 'countryName' },
      change: () => {
        stateObj.enabled = true;
        let tempQuery = new Query().where('countryId', 'equal', countryObj.value);
        stateObj.query = tempQuery;
        stateObj.text = null;
        stateObj.dataBind();
      },
      placeholder: 'Select a country',
      floatLabelType: 'Never'
    });
    countryObj.appendTo(countryElem);
  }
}
const stateParams = {
  create: () => {
    stateElem = document.createElement('input');
    return stateElem;
  },
  read: () => {
    return stateObj.text;
  },
  destroy: () => {
    stateObj.destroy();
  },
  write: () => {
    stateObj = new DropDownList({
      dataSource: state,
      fields: { value: 'stateId', text: 'stateName' },
      enabled: false,
      placeholder: 'Select a state',
      floatLabelType: 'Never'
    });
    stateObj.appendTo(stateElem);
  }
};
provide('grid', [Edit, Toolbar]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' :edit='countryParams' width=150></e-column>
               <e-column field='ShipCity' headerText='Ship City' editType='dropdownedit' :edit='stateParams' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import { createElement } from '@syncfusion/ej2-base';
import { GridComponent, ColumnsDirective, ColumnDirective, AggregatesDirective, AggregateDirective,Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import { cascadeData } from './datasource.js';
let country= [
        { countryName: 'United States', countryId: '1' },
        { countryName: 'Australia', countryId: '2' }
    ];
let state = [
        { stateName: 'New York', countryId: '1', stateId: '101' },
        { stateName: 'Virginia ', countryId: '1', stateId: '102' },
        { stateName: 'Washington', countryId: '1', stateId: '103' },
        { stateName: 'Queensland', countryId: '2', stateId: '104' },
        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },
        { stateName: 'Victoria', countryId: '2', stateId: '106' }
    ];
let countryElem, stateElem, countryObj, stateObj;
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
    data: () => {
      return {
        data: cascadeData,
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
        countryParams: {
          create: () => {
            countryElem = document.createElement('input');
            return countryElem;
          },
          read: () => {
            return countryObj.text;
          },
          destroy: () => {
            countryObj.destroy();
          },
          write: () => {
            countryObj = new DropDownList({
              dataSource: country,
              fields: { value: 'countryId', text: 'countryName' },
              change: () => {
                stateObj.enabled = true;
                let tempQuery = new Query().where('countryId', 'equal', countryObj.value);
                stateObj.query = tempQuery;
                stateObj.text = null;
                stateObj.dataBind();
              },
              placeholder: 'Select a country',
              floatLabelType: 'Never'
            });
           countryObj.appendTo(countryElem);
          }
        },
        stateParams: {
          create: () => {
            stateElem = document.createElement('input');
            return stateElem;
          },
          read: () => {
            return stateObj.text;
          },
          destroy: () => {
            stateObj.destroy();
          },
          write: () => {
              stateObj = new DropDownList({
              dataSource: state,
              fields: { value: 'stateId', text: 'stateName' },
              enabled: false,
              placeholder: 'Select a state',
              floatLabelType: 'Never'
            });
            stateObj.appendTo(stateElem);
          }
        },

      };
    },
    provide: {
      grid: [Edit, Toolbar]
    }
  }
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>