# Grouping in ComboBox

Learn how to use groups in Wijmo's ComboBox in this tutorial

## Content


The __ComboBox__ control supports grouping of items through the __showGroups__ property. Group header items can be added by setting the __showGroups__ property to true and by enabling the grouping in the __itemsSource__ collection. 

However, note that these header items are just presentational, that is, they cannot be selected with the mouse or keyboard and are not bound to any data items.

The below example demonstrates a combobox with grouping.
![ComboBox](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/input/cb-grouping.png)

 

##### HTML

```html
  <div id="theComboBox"></div>
```
##### Javascript

```javascript
import * as input from '@mescius/wijmo.input';
import * as wijmo from '@mescius/wijmo';

function init() {
    // get grouped CollectionView
    let data = getData();
       
    // show in ComboBox
    let theComboBox = new input.ComboBox('#theComboBox', {
        showGroups: true,
        displayMemberPath: 'city',
        itemsSource: data,
        selectedIndexChanged: (sender) => {
            console.log('selectedIndexChanged', sender.selectedIndex, sender.selectedItem.city);
        }
    });
   
}
function getData() {
    var arr = [];
    
    addCities(arr, 'US', ['New York', 'Los Angeles', 'Chicago', 'Houston']);
    addCities(arr, 'Japan', ['Tokyo', 'Osaka', 'Kyoto', 'Sendai']);
    addCities(arr, 'UK', ['London', 'Birmingham', 'Manchester', 'Liverpool']);
    addCities(arr, 'China', ['Shanghai', 'Beijing', 'Tianjin', 'Shenzhen']);
    addCities(arr, 'Germany', ['Berlin', 'Hamburg', 'Munich', 'Cologne']);
    addCities(arr, 'France', ['Paris', 'Marseille', 'Lyon', 'Toulouse']);
    addCities(arr, 'Canada', ['Toronto', 'Ottawa', 'Vancouver', 'Montreal']);
    addCities(arr, 'Russia', ['Moscow', 'St Petersburg', 'Novosibirsk', 'Yekaterinburg']);
    
    return new wijmo.CollectionView(arr, {
        sortDescriptions: ['country', 'city'],
        groupDescriptions: ['country'],
        currentItem: null
    });
}
```