Angular 계층적 그리드 선택

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

    Angular Grid Selection Example

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

    Angular Grid Selection Options

    IgniteUI for Angular Hierarchical Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Hierarchical Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

    Angular Row Selection

    Property rowSelection enables you to specify the following options:

    • 없음 - 계층형 그리드에 대해 행 선택이 비활성화됩니다.
    • 단일 - 계층적 그리드 내에서 하나의 행만 선택할 수 있습니다.
    • multiple - Multi-row selection would be available by using the Row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focused

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

    Angular Cell Selection

    Property cellSelection enables you to specify the following options:

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

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

    Angular Column Selection

    The selectable property enables you to specify the following options for each column:

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

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

    Known Issues and Limitations

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

      import 'core-js/es7/array';

    • When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

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

    API References

    Additional Resources

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