계단식 콤보가 있는 React Grid

    그리드의 편집 기능은 캐스케이딩 콤보박스 컴포넌트를 사용할 수 있는 기회를 제공합니다. 이전IgrCombo 값에서 값을 선택하면 사용자는 다음 React Combobox 구성 요소 내에서 자신이 선택한 것과 관련된 데이터만 받게 됩니다.

    Angular Grid with Cascading Combos Sample Overview

    아래 샘플은 중첩된 캐스케이딩IgrGrid 컴포넌트에서 어떻게IgrCombo 작동하는지 보여줍니다.

    Setup

    열 편집을 활성화하려면 property가 반드시 설정되어 있는지 확인하세요editable.true​

    열 편집이 활성화되면, 먼저 당신의 항목을 추가할IgrCombo 수 있습니다. 여기서 단일 선택지만 사용하려면 속성 설정(set thesingleSelect property)을 사용해야 합니다.

    import { IgrCombo } from 'igniteui-react';

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

       <IgrColumn
    field="Country"
    header="Country"
    bodyTemplate={webGridCountryDropDownTemplate}>
    </IgrColumn>

        const webGridCountryDropDownTemplate = (ctx: IgrCellTemplateContext) => {
        const rowId = ctx.cell?.id.rowID;
        if (!rowId) return <></>;
        const comboId = `country_${rowId}`;

        return (
        <>
            <IgrCombo
                data={countries}
                ref={getComboRef(comboId)}
                onChange={(event: CustomEvent) => { onCountryChange(rowId, event) }}
                placeholder="Choose Country..."
                valueKey="Country"
                displayKey="Country"
                singleSelect={true}
                name={comboId}>
            </IgrCombo>
        </>
        );
    }
    • displayKey- 객체 배열에 필수 - 항목의 텍스트에 사용할 속성을 지정합니다. 만약 에displayKey 대한 값이 지정되어 있지 않으면, 콤보는 지정된valueKey 값을 사용합니다(있다면).

    선택 변경을 처리하려면 사건이onChange 필요합니다. 방출된 이벤트 인자에는 변경 이전의 선택, 현재 선택, 추가되거나 제거된 항목에 대한 정보가 포함되어 있습니다. 따라서 이전 조합의 선택을 기준으로 값을 필터링합니다.

        const onCountryChange = (rowId: string, event: CustomEvent) => {
        const regionCombo = getComboRef(`region_${rowId}`).current;
        const cityCombo = getComboRef(`city_${rowId}`).current;
        const regions = regions;
        const newValue = event.detail.newValue[0];

        if (newValue === undefined) {
            regionCombo.deselect(regionCombo.value);
            regionCombo.disabled = true;
            regionCombo.data = [];

            cityCombo.deselect(regionCombo.value);
            cityCombo.disabled = true;
            cityCombo.data = [];
        } else {
            regionCombo.disabled = false;
            regionCombo.data = regions.filter(x => x.Country === newValue);

            cityCombo.deselect(cityCombo.value);
            cityCombo.disabled = true;
            cityCombo.data = [];
        }
    }

    Known Issues and Limitations

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

    React Grid API Members