ComboBox의 HTML 콘텐츠

대부분의 ComboBox 컨트롤은 드롭다운 목록의 항목을 일반 텍스트로 표시합니다. isContentHTML 속성을 사용하거나 formatItem 이벤트로 항목에 직접 HTML을 할당하여 이를 재정의할 수 있습니다.

formatItem 이벤트는 원시(Raw) Javascript 객체에 임의의 템플릿을 적용하는 데 사용할 수 있기 때문에 더 많은 유연성을 제공합니다. formatItem 이벤트를 사용하는 동안 콤보 박스의 headerPath 속성을 속성 이름으로 설정해야하는데, 이는 일반 텍스트만 표시할 수 있으므로 콤보 박스의 입력 요소에 표시되어야 합니다.

아래 예시에서는, 객체 배열을 사용하고 __displayMemberPath__를 정의하여 ComboBox를 만들고 채웠습니다.

HTML

<div id="theCombo"></div>

Javascript

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

function init() {
    // define template for the details
    var template = '<div class="item">' +
        '<h1>{name}</h1>' +
        '<b>{city}</b> ({state})<br/>' +
        '{address}<br/>' +
        'Phone: <b>{phone}</b><br/>' +
        'Fax: <b>{fax}</b><br/>' +
        'Website: <a href="{site}" target="_blank">{site}</a><br/>' +
        '</div>';
    //
    // show items in a ComboBox
    let theCombo = new input.ComboBox('#theCombo', {
        displayMemberPath: 'name',
        headerPath: 'name',
        itemsSource: getData(),
        formatItem: (sender, e) => {
            let html = wijmo.format(template, e.data, (data, name, fmt, val) => {
                return wijmo.isString(data[name]) ? wijmo.escapeHtml(data[name]) : val;
            });
            e.item.innerHTML = html;
        }
    });
}