Kendo Multiselect Dropdown in Vue.js

Introduction

In this article, we’ll Learn how we add the Kendu multiselect dropdown in the Vue.js application. We will create a demo of how to add the Kendo Multiselect Dropdown in the Vue.js application.

Prerequisites

• Basic knowledge of JavaScript and VueJS
• NodeJS installed.
• Text editor.
• Vue CLI installed.

Create VueJS Project

Create a Vue.js project by using the following command.

vue create multiselectdropdown

Now open the newly created project in Visual Studio Code and install the Kendu autocomplete dropdown library using the following command.

 install Kendu autocomplete dropdown library

Install Bootstrap

Install bootstrap using the following command.

npm install bootstrap

Now open the main.js file and add the following code. 

import 'bootstrap/dist/css/bootstrap.css';

Now open App.vue and add the following code.

<template>
  <div class="example-wrapper">
    <div>
      <div>Favorite sports:</div>
      <multiselect :style="{ width: '300px' }" :data-items="sports" v-model="value"></multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelect } from '@progress/kendo-vue-dropdowns';

export default {
  components: {
    'multiselect': MultiSelect
  },
  data() {
    return {
      sports: ['Baseball', 'Basketball', 'Cricket', 'Field Hockey',
        'Football', 'Table Tennis', 'Tennis', 'Volleyball'],
      value: []
    };
  }
};

</script>
<style>
body {
  position: relative;
}

html,
body {
  height: 100%;
}

#app {
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
  min-height: 80px;
  box-sizing: border-box;
  padding: 30px;
}

@keyframes k-loading-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.k-i-loading.k-example-loading {
  font-size: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(144, 152, 165);
}

.k-i-loading.k-example-loading::before,
.k-i-loading.k-example-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  content: "";
  box-sizing: inherit;
  border-radius: 50%;
  border-width: .05em;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: transparent;
}

.k-icon.k-i-loading.k-example-loading::before,
.k-icon.k-i-loading::after {
  content: "";
}

.k-i-loading.k-example-loading::before {
  margin-top: -0.5em;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  animation: k-loading-animation .7s linear infinite;
}

.k-i-loading.k-example-loading::after {
  margin-top: -0.25em;
  margin-left: -0.25em;
  width: .5em;
  height: .5em;
  animation: k-loading-animation reverse 1.4s linear infinite;
}

.example-wrapper {
  min-height: 280px;
  align-content: flex-start;
}

.example-wrapper p,
.example-col p {
  margin: 20px 0 10px;
}

.example-wrapper p:first-child,
.example-col p:first-child {
  margin-top: 0;
}

.example-col {
  display: inline-block;
  vertical-align: top;
  padding-right: 20px;
  padding-bottom: 20px;
}

.example-config {
  margin: 0 0 20px;
  padding: 20px;
  background-color: rgba(0, 0, 0, .03);
  border: 1px solid rgba(0, 0, 0, .08);
}

.event-log {
  margin: 0;
  padding: 0;
  max-height: 100px;
  overflow-y: auto;
  list-style-type: none;
  border: 1px solid rgba(0, 0, 0, .08);
  background-color: white;
}

.event-log li {
  margin: 0;
  padding: .3em;
  line-height: 1.2em;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.event-log li:last-child {
  margin-bottom: -1px;
}</style>

In the above code, we have import the Kendu dropdown, then we created some dummy data to show in the dropdown.

Now run the project using the 'npm run serve' command.

Select some values from the textbox

Summary

In this article, we learned how to add Kendo Multiselect Dropdown in  Vue.js.