How to Create a Vue Dropdown Control in Your Web Application

One of the most common input types that users interact with online, dropdowns allow users to select from various items. Many organizations use dropdown menus to allow users to complete an online form accurately. They are used for choosing options such as selecting your country, language, or responding to a question where there are only a few possible responses. 

Besides being a default HTML element through the <select> element, there are plenty of open-source and third-party dropdown controls available online; which one should you choose?

Thankfully, Wijmo has you covered with ComboBox, the best Vue dropdown control available. It's simple to implement, easily customizable, and has an extensive list of features that allow you to integrate it into your other controls and components easily. 

In this article, we'll be outlining the following features of the ComboBox:

• Dropdown Implementation
• Styling the ComboBox Control
• Customizing the Dropdown Elements
• Integrating the Dropdown Control with other Components

If you'd like to download this project for yourself, you can find it here. Now, let's get to work!

Dropdown Implementation

Before we implement the Wijmo's Vue dropdown, ComboBox, we'll need to install Wijmo's components library. Inside of your Vue application, run the following command:

1npm i @grapecity/wijmo.vue2.all

This will install all the Wijmo files required for its set of Vue controls.

Next, we'll need to include Wijmo's styling and the ComboBox module. Inside of the App.vue file, within the <script> tags, include the following:

import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';
import '@grapecity/wijmo.vue2.input';
import * as wjCore from '@grapecity/wijmo';
import * as wjcInput from '@grapecity/wijmo.vue2.input';
import * as wjcGrid from '@grapecity/wijmo.vue2.grid';

We also need to set up the component imports so that we can create the components in markup:

export default {
  name: 'App',
  components: {
    'wj-combo-box': wjcInput.WjComboBox,
    'wj-item-template': wjcInput.WjItemTemplate,
    'wj-flex-grid': wjcGrid.WjFlexGrid,
    'wj-flex-grid-column': wjcGrid.WjFlexGridColumn
  },
}

Now the application is set up to allow us to create a ComboBox control. Inside our App.vue file, we'll retrieve some dummy data to populate our dropdown:

data() {
  return {
    cv: ['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada']
  };
},

We're just creating an array of countries, which we'll give the user the ability to select from inside of the markup:

<h2>ComboBox Blog</h2>
<wj-combo-box :itemsSource="cv"></wj-combo-box>

Now we're good to run our application to see the ComboBox in action:

As you can see, Wijmo's Vue dropdown neatly displays all our data. Next, it’s time to customize the look of the ComboBox.

Styling the ComboBox Control

Wijmo's ComboBox, along with its other controls, is highly customizable. For this sample, we will modify the dropdown to have a dark-mode look.

Inside the App.vue file’s <style> tag, add the following:

.wj-control .wj-input-group .wj-form-control {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    font-weight: bold;
    padding: 10px 16px 8px;
    font-size: 16px;
}
 
.wj-control .wj-input-group .wj-input-group-btn {
    background: hsl(0, 0%, 15%);
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
    background: hsl(0, 0%, 30%);
    transition: .4s;
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
    color: hsl(0, 0%, 85%);
    transition: .4s;
}
 
.wj-combobox {
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
 
.wj-listbox-item {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
}
 
.wj-listbox-item.wj-state-selected {
    background: hsl(0, 0%, 30%);
}
 
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
    border-left: 1px solid hsl(0, 0%, 70%);
}
 
.combo-dropdown > .wj-listbox-item:hover {
    cursor: pointer;
    background: hsl(0, 0%, 30%) !important;
    transition: .3s;
  }
 
.wj-glyph-down {
    color: hsl(0, 0%, 70%);
}

There's a fair amount of code here, but all we're doing is modifying the size and color of the ComboBox. We change all the white in the dropdown to black, darken the grey hover effect when users hover over list elements, and add some padding to the control to give it a little more space. When we run the application, we'll see the following:

Customizing the Dropdown Elements

Now, loading in an array is pretty basic. In most scenarios, you won't be creating your data in code but receiving it from a database, and most of the time, it won't be an array of strings but an array of objects that you'll be receiving. The nice thing about this, however, is that ComboBox makes it easy to add data from an API call, and even more, you can use this additional data to customize the dropdown elements of the ComboBox further.

The first thing we'll need to do is get the data from the source. In this article, I'll be making a fetch request to an API, which will return some data on each country. To do this, we'll be including the created() method in the application and make a fetch request to our API. Inside the App.vue file, make the following changes:

data() {
  return {
    cv: new wjCore.CollectionView([], {})
  };
},
created() {
  fetch('https://mocki.io/v1/eaf8d0a8-052c-4d2a-b105-da40855634fa').then(response => response.json()).then(data => (this.cv.sourceCollection = data));
}

Instead of just assigning an array of data to our state, we’re creating a CollectionView object and assigning an empty array. We’re then using the created() method to assign the data we retrieve to the CollectionView. When we run the application now, we see the following:

As you can see, this definitely isn't what we want to display. The reason that we're seeing this is because we've dropped an object in as the data source for the dropdown, so its just showing that each item in the list is an object. Thankfully, Wijmo's Vue dropdown makes it easy to tell the component what exactly we want to display. Inside of the App.vue file we're going to add some properties to the ComboBox control:

<wj-combo-box :displayMemberPath="'country'" :headerPath="'country'" :itemsSource="cv" :dropDownCssClass="'combo-dropdown'"></wj-combo-box>

Here, we're setting 2 properties: displayMemberPath and headerPath. The displayMemberPath property tells the control which property of the object that we want to display, and the headerPath will tell the ComboBox the property what property we want to display in the text box portion of the control.

Normally you only need to set displayMemberPath, but in this article, we're also going to be modifying what we're displaying in the dropdown elements. That is where headerPath comes in. It allows you to decouple the display values of the dropdown elements and the display value of the input element.

Finally, we're going to add our template to the ComboBox. Wijmo allows you to create custom templates for many of its controls, which are used to override the default display text. Inside of the App.vue markup, add the following code:

<wj-combo-box :displayMemberPath="'country'" :headerPath="'country'" :itemsSource="cv" :dropDownCssClass="'combo-dropdown'">
  <wj-item-template v-slot="ctx">
    <div class="item">
      <div class="itemHeader"><img :src="ctx.item.flag"/><b>{{ctx.item.country}}</b></div>
      Sales: <b>${{ctx.item.sales}}</b><br/>
      Expense: <b>${{ctx.item.expenses}}</b>
    </div>
  </wj-item-template>
</wj-combo-box>

We're creating a wjItemTemplate, which will replace the default HTML used to generate each of the dropdown elements. The ctx variable is simply used to hold the properties of each of the dropdown elements, which means that we can just use the same property names that our object uses when referencing those properties.

We're also going to add some CSS inside of the <style> to clean up the look a little:

.item {
    margin: 2px;
}
 
.itemHeader {
    font-size: 16px;
    margin-bottom: 4px;
}

Now, when we run the application we'll see the following:

Now we've got a dark-themed dropdown control, which displays each country's flag, name, and their current sales and expenses. Very nice! We're almost done, there's still one more thing that we need to do; we need to tie the ComboBox to another control. We'll cover how to do that in the next section.

Integrating the Dropdown Control with other Components

The final step in this application is to tie Wijmo's Vue dropdown to another control, allowing them to work together. In this sample, we'll use Wijmo's FlexGrid control. First, we'll need to import the required module inside of the App.vue file:

import * as wjcGrid from '@grapecity/wijmo.Vue.grid';

Next, we'll add FlexGrid to the markup:

<wj-flex-grid :itemsSource="cv" :selectionMode="'Row'">
  <wj-flex-grid-column :binding="'country'" :header="'Country'"></wj-flex-grid-column>
  <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :width="'*'" :format="'c2'"></wj-flex-grid-column>
  <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" :width="'*'" :format="'c2'"></wj-flex-grid-column>
</wj-flex-grid>

Most of this code isn't relevant to this article, but the one important thing that I will cover is the fact that we're using the same data source for each of the controls: the dataSet, which is a CollectionView object. When we run the application, you'll see the following:

The CollectionView object is what allows us to tie the controls together. When two different controls use the same CollectionView, any changes made to one are reflected by another. In the case of the ComboBox and FlexGrid, when the user selects a different item from the dropdown, the grid's selection will change to match the same item. Also, if a user changes any of the cells in the FlexGrid, those changes will be reflected in the ComboBox.

To show this, we'll change "Greece" in the country column to "Mexico", and you'll see the following:

As you can see, the country name in the dropdown has changed from "Greece" to "Mexico", and the selected row in the grid has changed to match the selected item in the dropdown.

Conclusion

As you can see, you can build a very powerful and versatile Vue dropdown with Wijmo's ComboBox. This article scratches the surface of what you can do with the ComboBox; if you'd like more information, we've got demos, documentation, and API references for developers to use. If you'd like to download the finished application, you can find it here.

If you're interested in seeing what more Wijmo has to offer, you can download the library here.

Happy coding!