Angular 그리드 열 선택

    The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations.

    Angular Column Selection Example

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

    * 연락처 제목, 도시 및 주소 열은 열 선택이 비활성화되어 있습니다.

    Basic usage

    The column selection feature can be enabled through the columnSelection input, which takes GridSelectionMode values.

    상호 작용

    The default selection mode is none. If set to single or multiple all of the presented columns will be selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

    Note

    Multi-column Headers don't reflect on the selectable input. The IgxColumnGroupComponent is selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as selected if all of its selectable descendants are selected.

    * 국가 정보 열 그룹에서는 도시 및 우편번호 열만 선택할 수 있습니다.

    Keyboard combinations

    Note

    The keyboard combinations are available only when the grid columnSelection input is set to multiple.

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

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

    API manipulations

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

    Note

    The above statement also applies to the IgxColumnGroupComponent, except that when the selected property is changed it changes the state of its descendants.

    More information regarding the API manipulations could be found in the API References section.

    스타일링

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

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

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

    Please note that row selection and column selection can't be manipulated independently. They depend on the same 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
);

    The grid-theme accepts several parameters but those are the five responsible for changing the appearance of all selected columns:

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

    Using CSS Variables

    The last step is to include the custom igx-grid theme.

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

    Demo

    Note

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

    API References

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

    IgxGridComponent properties:

    IgxColumnComponent properties:

    IgxColumnGrpupComponent properties:

    IgxGridComponent events:

    Additional Resources

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