Grid 도구 모음

Ignite UI for Angular의 Grid는 기본적으로 UI 조작을 위한 컨테이너인 IgxGridToolbarComponent를 제공합니다. 도구 모음은 Grid 상단에 있으며 Grid의 가로 크기와 일치합니다. 도구 모음 컨테이너는 열 숨기기, 열 핀 고정, Excel 내보내기 등 Grid 기능과 관련된 다양한 UI 컨트롤을 제공합니다.

데모


Grid의 showToolbar 속성을 사용하여 도구 모음을 표시하려면 true로 설정합니다. 도구 모음은 텍스트 제목의 왼쪽 정렬을 지원하며 Grid의 toolbarTitle 속성을 사용하여 내용을 설정합니다. 다음의 코드 조각은 도구 모음을 활성화하고 제목을 설정하는 방법을 보여줍니다:

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title">
</igx-grid>

기능

도구 모음은 열 숨기기, 열 핀 고정, 데이터를 MS Excel 및 CSV로 내보내기 할 수 있도록 구성할 수 있습니다. 대응하는 불 속성을 true로 설정하여 각 기능을 독립적으로 활성화할 수 있습니다:

  • 열 숨기기는 columnHidingtrue로 설정
  • 열 핀 고정은 columnPinningtrue로 설정
  • MS Excel 내보내기는 Grid의 exportExcel 속성을 true로 설정
  • CSV 내보내기는 Grid의 exportCsv 속성을 true로 설정

각 버튼의 텍스트를 설정하는 속성에 대해서는 이하의 API 부분에 열거되어 있습니다.


다음 코드 조각은 도구 모음의 모든 기능을 활성화하는 방법을 보여줍니다:

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title"
    [columnHiding]="true"
    [columnPinning]="true"
    [exportExcel]="true"
    [exportCsv]="true"
    exportText="Export"
    exportExcelText="Export to Excel"
    exportCsvText="Export to CSV">
</igx-grid>

MS Excel로 내보내기 및 CSV로 내보내기 기능은 공급자로 각각 IgxExcelExporterServiceIgxCsvExporterService를 사용합니다. 이들 중 하나를 사용해야 하는 경우에는 app.module.ts 파일의 공급자 배열에서 지정해야 합니다. 예를 들면, 다음의 코드 조각은 모든 내보내기 서비스를 포함하는 방법을 보여줍니다:

// app.module.ts

...
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService, IgxCsvExporterService ]
})

export class AppModule {}

내보내기 사용자 정의

단순히 도구 모음 기능을 켜거나 끄는 것 외에도 내보내기 처리는 사용자가 내보내기 처리를 초기화할 때 생성되는 onToolbarExporting 이벤트에서 상세 설정할 수 있습니다. 이 이벤트는 내보내기와 내보내기 옵션을 모두 보여줍니다.

Note

기본적으로 CSV로 내보내기를 할 때 내보내기는 쉼표 구분 기호를 사용하여 내보내기를 하며 출력 파일에는 '.csv' 확장자를 사용합니다. 내보내기 이벤트에 서브스크라이브하거나 내보내기 옵션 필드 값을 변경하여 내보내기 매개 변수를 사용자 정의할 수 있습니다. 또한, 이벤트 인수의 취소 필드를 true로 설정하여 내보내기 처리를 취소할 수 있습니다.

다음 코드 조각은 onToolbarExporting 이벤트에 서브스크라이브하는 방법과 기본 내보내기 처리를 취소하는 방법을 보여줍니다.

<igx-grid ... (onToolbarExporting)="toolbarExportingHandler($event)"></igx-grid>
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

...

public toolbarExportingHandler(args) {
    // You can customize the exporting from this event
    const options: IgxExporterOptionsBase = args.options ;
    options.fileName = "Custom Title";

    if (options instanceof IgxExcelExporterOptions) {
        const excelOptions = options as IgxExcelExporterOptions;
        excelOptions.columnWidth = 10;
    } else {
        const csvOptions = options as IgxCsvExporterOptions;
        csvOptions.fileType = CsvFileTypes.TSV;
        csvOptions.valueDelimiter = "\t";
    }

    args.exporter.onColumnExport.subscribe((columnArgs: IColumnExportingEventArgs) => {

        // Don't export image fields
        columnArgs.cancel = columnArgs.header === "Athlete" ||
                            columnArgs.header === "Country";


    });
}

다음 샘플에서는 내보내기 파일을 사용자 지정하는 방법을 보여줍니다.


사용자 콘텐츠 템플릿

도구 모음에 특정 애플리케이션 UI(예: 사용자 버튼 등)를 추가해야 하는 경우, ng-template을 작성하고 igxToolbarCustomContent 지시문으로 표시할 수 있습니다. 다음 코드 조각은 이러한 사용자 템플릿을 정의하는 방법을 보여줍니다:

<igx-grid [showToolbar]="true" ...>

    ...

    <ng-template igxToolbarCustomContent let-grid="grid">
        <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="grid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template>
</igx-grid>
Note

igxToolbarCustomContent 지시문의 컨텍스트에는 2가지 속성이 있습니다: grid - 도구 모음이 포함된 IgxGridComponent에 대한 참조 및 toolbar - IgxGridToolbarComponent에 대한 참조

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


API 참조

그리드 도구 모음 서비스에는 아래에 나열된 몇 가지 API가 추가로 포함되어 있습니다.

IgxGridToolbarComponent

IgxGridComponent 속성:

IgxGridComponent 이벤트:

스타일:

추가 리소스

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