[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components 그리드 선택

    Ignite UI for Web Components 단일 또는 다중 행 및 셀 선택을 지원합니다.

    Web Components Grid Selection Example

    개요

    Web Components 데이터 그리드의 선택은 행 및 셀 수준에서 활성화되며 Web Components 그리드의 selectionMode 옵션을 사용하여 구성할 수 있습니다. 이 속성에는 아래에 나열된 다섯 가지 옵션이 있습니다.

    • None: 선택이 활성화되지 않습니다.
    • SingleCell: 단일 셀 선택이 가능합니다.
    • SingleRow: 단일 행 선택이 활성화됩니다.
    • MultipleCell: 여러 셀을 선택할 수 있습니다.
    • MultipleRow: 여러 행을 선택할 수 있습니다.
    • RangeCell: 클릭 및 드래그를 통해 여러 셀 범위를 선택할 수 있습니다.

    selectionBehavior 기본값은 ModifierBased로, 한 번에 하나의 행이나 셀만 선택되고 항목을 다중 선택하려면 수정자 키(CTRL)가 필요합니다. selectionBehavior​ ​Toggle로 설정하면 한 번의 클릭으로만 여러 행이나 셀을 선택할 수 있습니다.

    MultipleRow 다음 기능이 포함되어 있습니다.

    • 행을 선택하려면 클릭하고 드래그하세요.
    • 여러 행을 선택하려면 Shift 키를 누른 채 클릭하세요.
    • 여러 행을 선택하려면 Shift 키를 누른 채 위쪽/아래쪽 화살표 키를 누르세요.

    스페이스바를 누르면 MultipleRow 또는 SingleRow 통해 활성 행 선택이 전환됩니다.

    Row Range Selection

    다음 예에서는 그리드의 모든 행을 선택하거나 선택 취소하는 방법을 보여줍니다. selectionMode MultipleRow로 설정되어야 합니다.

    API References