Creating MultiColumn ComboBoxes in Javascript using Wijmo

March 08 2021

When displaying information inside of a dropdown control, there may be times where you would like to display a larger amount of information at once, instead of having one extremely long dropdown list. Wijmo’s ComboBox control makes this easy and straightforward to accomplish, while also giving us multiple layouts that we can use in our dropdown controls.

In this blog, we will outline the steps to creating multicolumn dropdowns using Wijmo’s ComboBox control, CSS styling, and the ComboBox’s headerPath and property.

Wijmo offers the fastest, most flexible JavaScript DataGrid with features including sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more.

Download Now!

How to Import the Required Modules

Before we can create our MultiColumn ComboBoxes, we will need to import the required Wijmo modules in our JavaScript file:

import ‘@grapecity/wijmo.styles/wijmo.css’;
import * as wijmo from ‘@grapecity/wijmo’;
import * as input from ‘@grapecity/wijmo.input’;
import { getData } from ‘./data’;

We import Wijmo’s CSS file that will be used to style our ComboBox, Wijmo’s core and input JavaScript files, and our getData() method, which will be used to retrieve our data.

The data retrieved from the getData() method returns a list of objects with multiple properties, like so:

{ id: 1, country: ‘Luxembourg’, gdmp: 57825, … }
{ id: 2, country: ‘Switzerland’, gdmp: 664005, … }  
{ id: 3, country: ‘Norway’, gdmp: 388315, … }
...

Creating a Three-Column ComboBox

The first style of MultiColumn ComboBox that we are going to look at is the three-column ComboBox. This will be set up just like a normal Wijmo ComboBox:

let theComboCSS = new input.ComboBox(‘#theComboCSS’, { 
  dropDownCSSClass: ‘cb-flex’,
  displayMemberPath: ‘country’,
  itemsSource: getData()
});

Here, we’re setting a CSS class that the dropdown will use, the property of the objects that will be displayed, and our item source, which gets handed to us by the getData() method.

Now, we’ll create our CSS class that the dropdown will use, which will display our data in three columns instead of a single column of data:

.cb-flex {  
  display: flex;  
  flex-wrap: wrap;  
  width: 380px;
}
.cb-flex .wj-listbox-item {  
  width: 120px;  
  white-space: pre;  
  overflow: hidden; 
  text-overflow: ellipsis;
}

This will expand the width of our ComboBox to accommodate the three columns, as well as set the columns to wrap around in the dropdown. The final product looks as such:

Three Column ComboBox

As you can see here, the dropdown of the ComboBox now displays our data in three nice and neat columns of data.

Creating a Table ComboBox

The second style of formatting that we will look at for Wijmo’s ComboBox is table style formatting. The table style will allow us to display our entire data object in our dropdown in a table layout.

We will first create a template variable that will hold the HTML that we will use to format our dropdown:

let template = ‘<table><tr>’ +
‘<td>{country}</td>’ +
‘<td class=’number’>{gdpm:c0}</td>’ +
‘<td class=’number’>{popk:n0}</td>’ +
‘<td class=’number’>{gdpcap:c0}</td>’ +
‘</tr></table>’;

This creates the template layout that the ComboBox will use for its dropdown, as well as format the number values that will be displayed in the dropdown.

Next, we’ll create our ComboBox object, and use the template to customize our dropdown using the ComboBox’s formatItem property:

let theComboTable = new input.ComboBox(‘#theComboTable’, { 
 headerPath: ‘country’, 
 displayMemberPath: ‘country’,
 formatItem: (sender, e) => { 
  e.item.innerHTML = wijmo.format(template, e.data);  
}, 
 itemsSource: getData()
});

Here, we’re setting the innerHTML value for each cell in the dropdown, using Wijmo’s wijmo.format method along with our template and the current data item.

Finally, we’ll add a little bit of CSS to improve the layout of the table:

.wj-listbox-item table { 
  table-layout: fixed;
}
.wj-listbox-item td { 
  width: 120px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wj-listbox-item td.number { 
  width: 80px;  
  text-align: right;
}

The final output of our table ComboBox looks as follows:

ComboBox Table Style