Angular Grid 툴바 -Ignite UI for Angular

The Hierarchical Grid in Ignite UI for Angular provides an IgxGridToolbarComponent which is essentially a container for UI operations. The Angular toolbar is located at the top of the Angular component, i.e the Hierarchical Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Hierarchical Grid's features:

열 숨기기
열 고정
Excel, CSV 및 PDF로 내보내기
고급 필터링

또는 다른 사용자 정의 콘텐츠. 툴바와 사전 정의된 UI 구성 요소는 Angular 이벤트를 지원하고 개발자를 위한 API를 노출합니다.

미리 정의actions 된 컴포넌트와title UI 컴포넌트가 내부에 추가<igx-grid-toolbar> 되며, 이는 해당 Grid 기능과 기본 상호작용을 제공하는 툴바를 갖추기 위해 모두 필요합니다:

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Hierarchical Grid Toolbar</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
            <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-hierarchical-grid>

참고: 위 코드 스니펫에서 보듯이, 미리 정의actions 된 UI 컴포넌트는 컨테이너 안에<igx-grid-toolbar-actions> 랩되어 있습니다. 이렇게 하면 툴바 제목이 툴바 왼쪽에 정렬되고, 액션은 오른쪽에 정렬됩니다.

물론, 각 UI는 서로 독립적으로 추가될 수도 있고 전혀 추가되지 않을 수도 있습니다. 이렇게 하면 도구 모음 컨테이너가 비어 있게 렌더링됩니다.

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-hierarchical-grid>

각 기본 UI 구성 요소를 포괄적으로 살펴보려면 아래 기능 섹션을 계속 읽어보세요.

Due to certain limitations in how the child grids of an IgxHierarchicalGrid are implemented and how DI scope works, when defining a toolbar component inside the igx-row-island tags use the igxGridToolbar directive with the template shorthand. This allows child grids to create their own separate toolbar instances:

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        <igx-grid-toolbar *igxGridToolbar>
            <igx-grid-toolbar-title>Child toolbar</igx-grid-toolbar-title>
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>

도구 모음 템플릿 컨텍스트는 다른 바인딩/논리 요구 사항에 사용할 수 있는 각 그리드 인스턴스에 대한 참조를 암시적으로 노출합니다. 예를 보려면 아래를 참조하십시오.

With versions prior to 17.1.0

17.1.0 이전 버전에서는 제공된 그리드 인스턴스를 도구 모음 자체에 입력 속성으로 전달해야 합니다. 이렇게 하면 템플릿의 범위에 항상 올바른 grid 인스턴스가 있는지 확인할 수 있습니다.

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        <!--
            You can name the binding from igxGridToolbar however you want. Just make sure to use
            it inside the template if you need to access the grid instance.
        -->
        <igx-grid-toolbar [grid]="gridRef" *igxGridToolbar="let gridRef">
            <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>

특징

툴바는 그리드 전체에 영향을 미치는 로직/상호 작용을 분리하는 데 매우 유용합니다. 위에 표시된 대로, 그리드에서 제어, 열 숨기기, 열 고정, 고급 필터링 및 데이터 내보내기를 위한 기본 구성 요소를 제공하도록 구성할 수 있습니다. 이러한 기능은 Ignite UI for Angular 제품군의 카드 구성 요소와 유사한 패턴을 따르면 서로 독립적으로 활성화할 수 있습니다. 아래에 툴바의 주요 기능과 각 기능에 대한 예제 코드가 나와 있습니다.

Title

그리드의 도구 모음 제목 설정은 IgxGridToolbarTitleComponent 를 사용하여 수행됩니다. 사용자는 간단한 텍스트부터 보다 복잡한 템플릿까지 무엇이든 제공할 수 있습니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
</igx-grid-toolbar>

Actions

도구 모음은 사용자가 상위 그리드와 관련하여 작업/상호 작용을 배치할 수 있는 특정 컨테이너를 노출합니다. 도구 모음의 제목 부분과 마찬가지로 사용자는 기본 도구 모음 상호 작용 구성 요소를 포함하여 해당 템플릿 부분 내에 무엇이든 제공할 수 있습니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <button igxButton>Action</button>
        <igx-select></igx-select>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

각 액션은 이제 입력을 사용하여overlaySettings 액션 대화 대화의 오버레이 설정을 변경할 수 있는 방법을 제공합니다. 예를 들어:

<igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>

public data: any[];
public positionStrategyScaleCenter = new GlobalPositionStrategy({
    openAnimation: scaleInCenter,
    closeAnimation: scaleOutCenter
});
public overlaySettingsScaleCenter = {
    positionStrategy: this.positionStrategyScaleCenter,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};

public positionStrategyAuto = new AutoPositionStrategy();
public overlaySettingsAuto = {
    positionStrategy: this.positionStrategyAuto,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: false,
    closeOnEscape: false
};
constructor() {
    this.data = athletesData;
}

기본 overlaySettings는 Absolute 스크롤 전략과 함께 ConnectedPositionStrategy를 사용하고, 모달은 false로 설정되며, 이스케이프 시 닫기 및 외부 클릭 상호 작용 시 닫기가 활성화됩니다.

Column pinning

도구 모음 고정 구성 요소는 그리드의 열 고정과 상호 작용하기 위한 기본 UI를 제공합니다. 구성 요소는 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자 및 드롭다운 자체의 높이와 같은 UI 사용자 정의를 위한 여러 입력 속성뿐만 아니라 도구 모음이 포함된 상위 그리드를 사용하여 즉시 작동하도록 설정됩니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-pinning>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Column hiding

도구 모음 숨기기 구성요소는 열 숨기기와 상호작용하기 위한 기본 UI를 제공합니다. 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자, 드롭다운 자체의 높이 등 UI 사용자 지정을 위한 동일한 입력 속성을 노출합니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Advanced filtering

도구 모음 고급 필터링 구성 요소는 고급 필터링 기능을 위한 기본 UI를 제공합니다. 구성 요소는 버튼의 기본 텍스트를 변경하는 방법을 노출합니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Data exporting

Note

계층형 그리드 또는 해당 하위 그리드를 계층 아래로 내보낼 때 내보낸 데이터는 해당 그리드에 속하는 행의 플랫 컬렉션이 됩니다(하위 그리드는 내보낸 데이터에 포함되지 않음).

다른 툴바 동작들과 마찬가지로, 내보내기는 기본 툴 bar 내보내기 컴포넌 트를 통해 제공됩니다. 내보내기 컴포넌트는 대상 데이터 형식(Excel, CSV, PDF)에 맞는 서비스를 사용합니다. 즉, 해당 서비스가 의존성 주입 체인을 통해 제공되지 않으면 컴포넌트는 아무것도 내보낼 수 없습니다. Angular DI에 대해 복습이 필요하다면 공식 가이드를 확인해 보세요. 다음은 귀하의 애플리케이션에 맞는 모든 수출 서비스를 활성화하는 방법을 보여주는 샘플 스니펫입니다.

// app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService ]
})
export class AppModule { ... }

Note

v12.2.1 이상에서는 내보내기 서비스가 루트에서 제공됩니다. 즉, 더 이상 AppModule 공급자에서 이를 선언할 필요가 없습니다.

도구 모음 내보내기 구성 요소는 UI와 내보내기 환경을 모두 사용자 지정하기 위한 여러 입력 속성을 노출합니다. 표시 텍스트 변경부터 드롭다운 옵션 활성화/비활성화, 생성된 파일 이름 사용자 정의까지 다양합니다. 자세한 내용은 도구 모음 내보내기 구성요소에 대한 API 문서를 참조하세요.

다음은 Angular 템플릿을 통해 사용자 정의할 수 있는 일부 옵션을 보여주는 스니펫입니다.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-exporter
            <!-- If active, enables the CSV export entry in the dropdown UI -->
            [exportCSV]="csvExportEnabled"
            <!-- If active, enables the excel export entry in the dropdown UI -->
            [exportExcel]="excelExportEnabled"
            <!-- If active, enables the PDF export entry in the dropdown UI -->
            [exportPDF]="pdfExportEnabled"
            <!-- The name of the generated export file without the file extension -->
            filename="exported_data"
        >
            Custom text for the exporter button
            <span excelText>Custom text for the excel export entry</span>
            <span csvText>Custom text for the CSV export entry</span>
            <span pdfText>Custom text for the PDF export entry</span>
        </igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

다음 샘플은 내보낸 파일을 사용자 정의하는 방법을 보여줍니다.

Exporting Indicator

기본 도구 모음 내보내기 구성 요소를 사용하는 경우 내보내기 작업이 수행될 때마다 작업이 진행되는 동안 도구 모음에 진행률 표시기가 표시됩니다. 또한 사용자는 도구 모음 showProgress 속성을 설정하고 자신의 장기 실행 작업에 사용하거나 그리드에서 발생하는 작업을 나타내는 다른 방법으로 사용할 수 있습니다. 아래 샘플에는 상당한 양의 데이터가 있습니다. 데이터를 내보내는 동안 진행률 표시줄이 표시됩니다. 또한 그리드에서 장기 실행 작업을 시뮬레이션하는 또 다른 단추가 있습니다.

Custom Content

Note

이는 이전 도구 모음 템플릿 지시문을 대체합니다. v11 이전 버전에서 마이그레이션하는 경우 마이그레이션에서 템플릿 콘텐츠 이동이 처리됩니다. 단, 템플릿 내 바인딩은 당사에서 처리하지 않으므로 마이그레이션 완료 후 수정된 템플릿 파일을 반드시 다시 확인하시기 바랍니다.

도구 모음 구성 요소의 작업 부분이 특정 사용 사례에 충분하지 않은 경우 도구 모음 자체에는 사용자가 추가 UI를 제공할 수 있는 일반 콘텐츠 프로젝션이 있습니다. 사용자가 API 호출 또는 바인딩을 위해 해당 그리드 인스턴스가 필요한 경우 템플릿 참조 변수를 만들 수 있습니다.

다음은 샘플 스니펫입니다.

<igx-hierarchical-grid #gridRef ...>

    ...
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>

        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>

        <igx-grid-toolbar-actions>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

</igx-hierarchical-grid>

다음 샘플은 열 헤더를 클릭하여 정렬 설정을 지우기 위해 도구 모음에 추가 버튼을 추가하는 방법을 보여줍니다.

스타일링

툴바 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.

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

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

먼저 새로운 팔레트를 만들어 보겠습니다.

$my-dark-palette: palette(
  $primary: #2466ff,
  $secondary: #ffcd0f,
  $surface: #2a2b2f,
  $grays: #fff,
);

$my-dark-color: color($my-dark-palette, 'surface');

이제 매개변수를 확장grid-toolbar-theme 하고 수정$background-color$title-text-color 하는 새로운 테마를 만듭니다.

$dark-grid-toolbar-theme: grid-toolbar-theme(
  $background-color: $my-dark-color,
  $title-text-color: color($my-dark-palette, 'secondary'),
  $dropdown-background: $my-dark-color,
);

툴바의 컬럼 액션 메뉴에 테마를 부여하려면 컴포넌트의column-actions-theme 테마를 변경해야 합니다.

$dark-column-actions-theme: column-actions-theme(
  $title-color: color($my-dark-palette, 'secondary'),
  $background-color: color($my-dark-palette, 'surface')
);

열 액션들이 다른 컴포넌트를 사용하고 있고,igx-buttonigx-checkbox 새 툴바 테마에 맞게 테마를 변경해야 하기 때문입니다.

$dark-button-theme: button-theme(
  $outlined-background: color($my-dark-palette, 'secondary'),
  $outlined-hover-background: color($my-dark-palette, 'grays', 100),
  $outlined-hover-text-color: color($my-dark-palette, 'secondary')
);

$dark-checkbox-theme: checkbox-theme(
  $tick-color: $my-dark-color,
);

마지막 단계는 새로 생성된 테마를 포함하는 것입니다.

@include css-vars($dark-grid-toolbar-theme);
@include css-vars($dark-column-actions-theme);
@include css-vars($dark-checkbox-theme);
@include css-vars($dark-button-theme);

Note

만약 컴포넌트가 ViewEncapsulation을 사용Emulated 한다면, 이 캡슐화를penetrate 통해::ng-deep 그리드 툴바 컴포넌트 내 컴포넌트를 스타일링하는 것이 필요합니다:

@include css-vars($dark-grid-toolbar-theme);

:host {
  ::ng-deep {
    @include css-vars($dark-column-actions-theme);
    @include css-vars($dark-checkbox-theme);
    @include css-vars($dark-button-theme);
  }
}

Demo

API References

Grid Toolbar 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.

IgxHierarchicalGridComponent events:

toolbarExporting

Styles:

IgxHierarchicalGridComponent Styles

Additional Resources

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

Angular Hierarchical Grid Toolbar

Angular Toolbar Grid Example

Toolbar with child grids

With versions prior to 17.1.0

특징

Title

Actions

Column pinning

Column hiding

Advanced filtering

Data exporting

Note

Note

Exporting Indicator

Custom Content

Note

스타일링

Note

Demo

API References

Additional Resources

테마