계단식 콤보가 있는 React Grid

    The Grid's Editing functionality provides with the opportunity to use Cascading Combobox components. By selecting the value in any preceding IgrCombo, the users will receive only the data that is relevant to their selection within the next React Combobox component.

    Angular Grid with Cascading Combos Sample Overview

    The sample below demonstrates how IgrGrid works with nested Cascading IgrCombo components.

    Setup

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

    Once the column editing is enabled, you can start by adding your IgrCombo. Please note that here in order to have only one single selection available, you will need to use set the singleSelect 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 - Required for object arrays - Specifies which property will be used for the items' text. If no value is specified for displayKey, the combo will use the specified valueKey (if any).

    In order to handle the selection change, we need the onChange event. The emitted event arguments contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo.

        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