Angular 계층적 그리드 선택

    Ignite UI for Angular Hierarchical Grid를 사용하면 다양한 이벤트, 풍부한 API 또는 단일 선택과 같은 간단한 마우스 상호 작용을 사용하여 데이터를 쉽게 선택할 수 있습니다.

    Angular 그리드 선택 예제

    아래 샘플은 계층적 그리드의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

    EXAMPLE

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Angular 그리드 선택 옵션

    Angular Hierarchical Grid 구성 요소용 IgniteUI는 행 선택, 셀 선택열 선택의 세 가지 다른 선택 모드를 제공합니다. 기본적으로 Hierarchical Grid에서는 다중 셀 선택 모드만 활성화됩니다. 선택 모드를 변경/활성화하려면 rowSelection, cellSelection 또는 selectable 속성을 사용할 수 있습니다.

    Angular 행 선택

    rowSelection 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

    • 없음 - 계층형 그리드에 대해 행 선택이 비활성화됩니다.
    • 단일 - 계층적 그리드 내에서 하나의 행만 선택할 수 있습니다.
    • 다중 - 행 Row selectors 사용하거나 Ctrl + 클릭과 같은 키 조합을 사용하거나 셀에 초점을 맞춘 후 스페이스 키를 눌러 다중 행 선택을 사용할 수 있습니다.

    자세한 내용은 행 선택 항목을 참조하세요.

    Angular 셀 선택

    속성 cellSelection 사용하면 다음 옵션을 지정할 수 있습니다.

    • 없음 - 계층 그리드에 대해 셀 선택이 비활성화됩니다.
    • 단일 - 계층적 격자 내에서 하나의 셀만 선택할 수 있습니다.
    • 다중 - 현재 계층형 그리드에서 선택 항목의 기본 상태입니다. 다중 셀 선택은 마우스 왼쪽 버튼을 계속 클릭한 후 셀 위로 마우스를 드래그하여 선택할 수 있습니다.

    자세한 내용은 셀 선택 항목을 참조하세요.

    Angular 열 선택

    selectable 속성을 사용하면 각 열에 대해 다음 옵션을 지정할 수 있습니다.

    • false - 계층적 그리드에 대해 해당 열 선택이 비활성화됩니다.
    • true - 계층적 그리드에 대해 해당 열 선택이 활성화됩니다.
    • 이로 인해 다음 세 가지 변형이 발생합니다.
    • 단일 선택 - 열 셀을 마우스로 클릭합니다.
    • 다중 열 선택 -Ctrl + 마우스를 누른 채 열 셀을 클릭합니다.
    • 범위 열 선택 -Shift 키를 누른 채 마우스를 클릭하면 그 사이의 모든 항목이 선택됩니다.

    자세한 내용은 열 선택 항목으로 이동하세요.

    알려진 문제 및 제한 사항

    • IE11에서 선택이 활성화된 계층적 그리드를 사용하려면 각도 애플리케이션의 polyfill.ts에서 배열 폴리필을 명시적으로 가져와야 합니다. IE11은 버전 13.0.0부터 더 이상 지원되지 않습니다.

      import 'core-js/es7/array';
      typescript
    • 그리드에 primaryKey 설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃게 됩니다. 요청이 완료되었습니다:

      • 행 선택
      • 행 확장/축소
      • 행 편집
      • 행 고정

    API 참조

    App Builder | CTA 배너

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.