멀티컬럼(MultiColumn) ComboBox

기본적으로 __ComboBox__는 드롭다운 목록에 행당 하나의 항목을 표시합니다.

짧은 항목이 많은 경우, 화면 공간을 경제적으로 사용하기 위해 드롭다운에 여러 열을 표시할 수 있습니다. 약간의 CSS와 dropDownCssClass 속성을 사용하여 이를 수행할 수 있습니다. 또는 항목이 복잡한 객체인 경우, 행당 단일 항목을 렌더링할 수 있지만 테이블이나 그리드의 경우와 같이 세부 사항이 추가됩니다. formatItem 이벤트나 headerPath 속성을 사용하여 이를 수행할 수 있습니다.

아래 예시에서는 두 개의 ComboBox 컨트롤을 보여줍니다. 하나는 CSS 클래스를 사용하여 여러 열을 표시하고 다른 하나는 테이블 스타일로 세부 정보를 표시하기 위해 여러 열을 표시합니다.

HTML

  <label for="theComboCSS">Three Columns:</label>
  <div id="theComboCSS"></div>
 <br/>
  <label for="theComboTable">Table-Style:</label>
  <div id="theComboTable"></div>

CSS

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

.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;
}

Javascript

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {

    // multi-column CSS
    let theComboCSS = new input.ComboBox('#theComboCSS', {
        dropDownCssClass: 'cb-flex',
        displayMemberPath: 'country',
        itemsSource: getData()
    });
    //
    // multi-column table-style
    let template = '<table><tr>' +
        '<td>{country}</td>' +
        '<td class="number" title="GDP (million US$/year)">{gdpm:c0}</td>' +
        '<td class="number" title="Population (thousands)">{popk:n0}</td>' +
        '<td class="number" title="GDP/cap (US$/person/year)">{gdpcap:c0}</td>' +
        '</tr></table>';
    //
    let theComboTable = new input.ComboBox('#theComboTable', {
        headerPath: 'country',
        displayMemberPath: 'country',
        formatItem: (sender, e) => {
            e.item.innerHTML = wijmo.format(template, e.data);
        },
        itemsSource: getData()
    });
}