계단식 콤보가 있는 Web Components 그리드

    Grid의 편집 기능은 Cascading Combobox 구성 요소를 사용할 수 있는 기회를 제공합니다. 이전 IgcComboComponent에서 값을 선택하면 사용자는 다음 Web Components Combobox 구성 요소 내에서 선택과 관련된 데이터만 받게 됩니다.

    Angular Grid with Cascading Combos Sample Overview

    아래 샘플은 IgcGridComponent 중첩된 계단식 IgcComboComponent 구성 요소와 작동하는 방식을 보여줍니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Setup

    In order enable column editing, make sure editable property is set to true.

    열 편집이 활성화되면 IgcComboComponent 추가하여 시작할 수 있습니다. 단 하나의 선택 항목만 사용하려면 singleSelect 속성을 설정해야 합니다.

    ​IgcComboComponent를 시작하려면 먼저 이를 가져와야 합니다.

    import { IgcComboComponent, defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
ts

    그런 다음 콤보를 사용하여 열 템플릿을 정의해야 합니다.

    public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
    const id = ctx.cell.id.rowID;
    const comboId = "country_" + id;
    return html`<igc-combo placeholder="Choose Country..." value-key="Country" display-key="Country" id="${comboId}" single-select></igc-combo>`
}
ts
    • displayKey- 객체 배열에 필수 - 항목의 텍스트에 사용될 속성을 지정합니다. displayKey에 값이 지정되지 않으면 콤보는 지정된 valueKey (있는 경우)를 사용합니다.

    선택 변경을 처리하려면 change 이벤트가 필요합니다. 내보낸 이벤트 인수에는 변경 전 선택 항목, 현재 선택 항목, 추가되거나 제거된 항목에 대한 정보가 포함됩니다. 따라서 이전 콤보의 선택을 기준으로 값을 필터링합니다.

     public countries = [...this.worldCitiesAbove500K].filter(x => this.countryNames.indexOf(x.Country) !== -1).filter((value, index, array) => array.findIndex(x => x.Country === value.Country) === index);
public bindEventsCountryCombo(rowId: any, cell: any) {
        const comboId = "country_" + rowId;
        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
        combo?.addEventListener("igcChange", (e:any) => {
            const value = e.detail.newValue[0];
            cell.update(value);
            const nextCombo = document.getElementById("region_" + cell.id.rowID) as IgcComboComponent<any>;
            const nextProgress = document.getElementById("progress_region_" + cell.id.rowID) as IgcLinearProgressComponent;
            if (value === "") {
                nextCombo.deselect(nextCombo.value);
                nextCombo.disabled = true;
                nextCombo.data = [];
            } else {
                nextProgress.style.display = "block";
                setTimeout(() => {
                    nextProgress.style.display = "none";
                    nextCombo.disabled = false;
                    nextCombo.data = this.regions.filter(x => x.Country === value);
                }, 2000);

            }
        });
        combo?.addEventListener("igcOpening", (e:any) => {
            var currCombo = e.target;
            if (currCombo.data.length === 0) {
                combo.data = this.countries;
            };
        });
    }
ts

    마지막으로 데이터 목록을 로드하는 동안 필요한 IgcLinearProgressComponent를 추가합니다. id 속성의 값을 설정하려면 id 필요합니다.

        public webGridRegionDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
        const id = ctx.cell.id.rowID;
        const comboId = "region_" + id;
        const progressId = "progress_region_" + id;
        return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose Region..." disabled value-key="Region" display-key="Region" id="${comboId}" single-select></igc-combo>
        <igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress><div>`;
    }
ts
    Ignite UI for Web Components | CTA Banner

    Known Issues and Limitations

    한정 설명
    콤보 드롭다운 목록은 다른 UI 요소 뒤에 숨겨질 수 있습니다. 그리드에 있는 요소의 스택 순서로 인해 콤보 드롭다운이 머리글, 바닥글 등과 같은 다른 요소 뒤에 숨겨질 수 있습니다.

    Web Components Grid API Members