Common Scenarios

You can use the configuration options of the DropDownList to achieve the implementation of common scenarios.

Controlling the DropDownList Value

You can use the DropDownList as the so-called "controlled component" in Vue which is similar to the behavior of the native <select> element.

<div id="vueapp" class="vue-app">
    <div>
        <div>T-shirt size:</div>
        <dropdownlist 
            :data-items='sizes' 
            :value="value"
            @change="onChange"
        ></dropdownlist>
        Value: {{value}}
    </div>
</div>
import { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            value: "Large",
            sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ],
        };
    },
    methods: {
        onChange: function(event){
            this.value = event.value;
        }
    }
});

Implementing Cascading DropDownLists

The cascading DropDownList is a series of two or more DropDownLists where each DropDownList is filtered based on the selected option from the previous DropDownList.

<div id="vueapp" class="vue-app">
    <div>
        <div :style="{ display: 'inline-block' }">
            Categories
            <br />
            <dropdownlist
                :data-items="dataCategories"
                :text-field="'categoryName'"
                @change="categoryChange"
                :default-item="defaultItemCategory"
                :value="category"
            />
        </div>
        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
            Products
            <br />
            <dropdownlist
                :disabled="!hasCategory"
                :data-items="products"
                :text-field="'productName'"
                @change="productChange"
                :default-item="defaultItemProduct"
                :value="product"
            />
        </div>
        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
            Orders
            <br />
            <dropdownlist
                :disabled="!hasProduct"
                :data-items="orders"
                :text-Field="'orderName'"
                @change="orderChange"
                :default-item="defaultItemOrder"
                :value="order"
            />
        </div>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import { dataCategories, dataProducts, dataOrders } from './app/data.js';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            defaultItemCategory: { categoryName: 'Select Category ...' },
            defaultItemProduct: { productName: 'Select Product ...' },
            defaultItemOrder: { orderName: 'Select Order ...' },
            category: null,
            product: null,
            order: null,
            orders: dataOrders,
            products: dataProducts,
            dataCategories: dataCategories
        };
    },
    computed: {
        hasCategory: function(){
            return this.category && this.category !== this.defaultItemCategory;
        },
        hasProduct: function(){
            return this.product && this.product !== this.defaultItemProduct;
        } 
    },
    methods: {
        categoryChange(event) {
            const category = event.value;
            const products = dataProducts.filter(product => product.categoryId === category.categoryId);
    
            this.category = category;
            this.products = products;
            this.product = null;
            this.order = null;
        },
        productChange(event) {
            const product = event.value;
            const orders = dataOrders.filter(order => order.productId === product.productId);
    
            this.product = product;
            this.orders = orders;
            this.order = null;
        },
        orderChange (event) {
            this.order = event.value;
        }
    }
});
const dataCategories = [
    { categoryName: "Beverages", categoryId: 1 },
    { categoryName: "Condiments", categoryId: 2 },
    { categoryName: "Seafood", categoryId: 3 }
];

const dataProducts = [
    { productName: "Chai", productId: 1, categoryId: 1 },
    { productName: "Chang", productId: 2, categoryId: 1 },
    { productName: "Aniseed Syrup", productId: 3, categoryId: 2 },
    { productName: "Genen Shouyu", productId: 4, categoryId: 2 },
    { productName: "Ikura", productId: 5, categoryId: 3 },
    { productName: "Konbu", productId: 6, categoryId: 3 }
];

const dataOrders = [
    { orderName: "Cunewalde", orderId: 1, productId: 1 },
    { orderName: "Albuquerque", orderId: 2, productId: 1 },
    { orderName: "Geneva", orderId: 3, productId: 2 },
    { orderName: "Graz", orderId: 4, productId: 2 },
    { orderName: "London", orderId: 5, productId: 3 },
    { orderName: "I. de Margarita", orderId: 6, productId: 3 },
    { orderName: "Barquisimeto", orderId: 7, productId: 4 },
    { orderName: "Brandenburg", orderId: 8, productId: 4 },
    { orderName: "Cunewalde", orderId: 9, productId: 5 },
    { orderName: "Mexico D.F.", orderId: 10, productId: 5 },
    { orderName: "Mexico D.F.", orderId: 11, productId: 6 },
    { orderName: "Rio de Janeiro", orderId: 12, productId: 6 }
];

export { dataCategories, dataProducts, dataOrders };

In this article