Creating MultiColumn ComboBoxes in Angular using Wijmo

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 to 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 Angular DataGrid with features including sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more.

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 { WjInputModule } from ‘@grapecity/wijmo.angular2.input’;
import { DataService } from ‘./app.data’;

We import Wijmo’s CSS file that will be used to style our ComboBox, Wijmo’s core and input TypeScript files, Wijmo’s input module, and our DataService, which will get us data through the use of its 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:

<wj-combo-box [dropDownCssClass]=”’cb-flex’”
[displayMemberPath]=”’country’” [itemsSource]=”data”></wj-combo-box>

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:

As you can see here, the dropdown of the ComboBox now displays our data in 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’ll once again create a ComboBox, but within we’ll be using an ng-template element to create a table within our ComboBox, which we will use to display all of our data in a table format:

<wj-combo-box [headerPath]=”’country’” [displayMemberPath]=”’country’” [itemsSource]=”’data’”>
  <ng-template wjItemTemplate let-item=”item” let-itemIndex=”itemIndex”>
    <table>
      <tr>
        <td>\{{ item.country }}</td>
        <td class=”number”>\{{ format(‘{gdpm:c0}’, item) }}</td>
        <td class=”number”>\{{ format(‘{popk:n0}’, item) }}</td>
        <td class=”number”>\{{ format(‘{gdpcap:c0}’, item }}</td>
      </tr>
    </table>
  </ng-template>
</wj-combo-box>

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 using a format method, which we will now create inside of our app.component.ts file:

format(text: string, data: any) {
  return wijmo.format(text, data);
}

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:

As you can see, we’re now displaying the entirety of each data object inside of our ComboBox’s dropdown, four neat columns. You can check out both samples live here.