Angular Tree Grid Column Selection

    열 선택 기능은 한 번의 클릭으로 전체 열을 쉽게 선택할 수 있는 방법을 제공합니다. 헤더 셀과 그 아래의 모든 것을 집중시켜 특정 열의 중요성을 강조합니다. 이 기능은 선택 상태 조작, 선택된 분획에서 데이터 추출, 데이터 분석 및 시각화가 가능한 풍부한API 기능을 제공합니다.

    Angular Column Selection Example

    아래 샘플은 세 가지 유형의 트리 그리드 열 선택 동작을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.

    * 단위, 단가 및 배송 완료 항목은 열 선택이 비활성화되어 있습니다.

    Basic usage

    열 선택 기능은 다음으로 활성화할 수 있습니다.columnSelection 입력은 다음을 그리드셀렉션 모드 가치관.

    상호 작용

    기본 선택 모드는 다음과 같습니다none. 만약 로single 설정되어 있으면multiple 또는 제시된 모든 열이selectable 즉, 열을 선택하려면 하나의 열을 클릭하면 표시됩니다.selected 열이 선택 불가능하면, 마우스를 올리는 동안 헤더에 선택 스타일이 적용되지 않습니다.

    Note

    Multi-column Headers반성하지 마세요selectable 입력. 그IgxColumnGroupComponent 이야.selectable, 적어도 한 자식 중 하나가 선택 동작이 활성화되어 있다면 말입니다. 또한, 이 구성 요소는 다음과 같이 표시됩니다.selected 만약 모든 것이selectable 후손들은selected.

    * 개인 세부정보 열 그룹에서는 열 ID와 제목만 선택할 수 있습니다.

    Keyboard combinations

    Note

    키보드 조합은 그리드columnSelection 입력이 설정multiple 되어 있을 때만 사용할 수 있습니다.

    ​열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.

    • 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
    • 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.

    API manipulations

    그 API 추가 기능을 제공합니다. 비가시적 열을 사용하여 모든 숨겨진 열은 다음과 같이 표시할 수 있습니다.selected 해당 세터.

    Note

    위의 진술은 속성이 변경되면 그 후손들의 상태가 변한다는 점에서 해당IgxColumnGroupComponent​selected 성격에도 적용됩니다.

    API 조작에 관한 자세한 내용은 해당API References 섹션에서 확인할 수 있습니다.

    스타일링

    스타일링 옵션을 살펴보기 전에 핵심 모듈과 모든 구성 요소 믹스인을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
    Note

    이 점을row selection 유의하시고column selection 독립적으로 조작할 수 없습니다. 두 분야는 같은variables 원리에 의존합니다.

    이제 선택 및 호버 스타일을 변경해 보겠습니다.
    가장 간단한 접근 방식에 따라 맞춤 테마를 정의해 보겠습니다.

    $custom-grid-theme: grid-theme(
  $row-selected-background: #011627,
  $row-selected-text-color: #ecaa53,
  $row-selected-hover-background: #011627,
  $header-selected-text-color: #ecaa53,
  $header-selected-background: #011627,
  $expand-icon-color: #ecaa53,
  $expand-icon-hover-color: #b64b80
);

    이 매개변수grid-theme는 여러 가지를 받아들이지만, 이 다섯 가지가 모든 선택된 열의 외관을 변경하는 역할을 합니다:

    • $row-selected-ground- 선택한 분수의 배경을 설정합니다.
    • $row-selected-text-color- 선택한 분수의 텍스트 색상을 설정합니다.
    • $row-selected-hover-ground- 호버링된 셀 또는 셀 묶음의 색상을 설정합니다.
    • $header-selected-text-color- 선택한 열 헤더의 텍스트 색상을 설정합니다.
    • $header-selected-ground- 선택한 열 헤더의 배경색을 설정합니다.

    Using CSS Variables

    마지막 단계는 커스텀igx-grid 테마를 포함하는 것입니다.

    @include css-vars($custom-grid-theme)

    Demo

    Note

    샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

    API References

    열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

    IgxTreeGridComponent properties:

    IgxColumnComponent properties:

    IgxColumnGrpupComponent properties:

    IgxTreeGridComponent events:

    Additional Resources

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