React Tree Grid Toolbar

    Ignite UI for React Toolbar는 React 트리 그리드의 UI 작업을 위한 컨테이너입니다. React 도구 모음은 React 구성 요소의 맨 위에 있습니다. IgrTreeGrid 그리고 가로 크기와 일치합니다. 도구 모음 컨테이너는 사용자 지정 콘텐츠 또는 미리 정의된 UI 컨트롤 집합을 호스팅할 수 있습니다. React 트리 그리드의 기본 설정은 다음과 같습니다.

    • 열 숨기기
    • 열 고정
    • 엑셀 내보내기
    • 고급 필터링

    툴바와 미리 정의된 UI 구성 요소는 React 이벤트를 지원하고 개발자에게 API를 제공합니다.

    React 툴바 그리드 예제

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    사전 정의된 IgrGridToolbarActions UI IgrGridToolbarTitle 구성 요소는 내부 IgrGridToolbar에 추가되며 이는 모두 해당 그리드 기능과의 기본 상호 작용을 제공하는 도구 모음이 필요한 데 필요합니다.

    <IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
            Tree Grid Toolbar
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions>
            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning></IgrGridToolbarPinning>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
            <IgrGridToolbarExporter></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>
tsx

    위의 코드 조각에서 볼 수 있듯이 사전 정의된 Actions UI 구성 요소는 IgrGridToolbarActions 컨테이너에 래핑됩니다. 이렇게 하면 도구 모음 제목이 도구 모음 왼쪽에 정렬되고 작업이 도구 모음 오른쪽에 정렬됩니다.

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

    <IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
    </IgrGridToolbar>
</IgrTreeGrid>
tsx

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

    특징

    도구 모음은 그리드 전체에 영향을 미치는 논리/상호 작용을 분리하는 데 유용합니다.

    위에 표시된 대로 그리드에서 데이터 제어, 열 숨기기, 열 고정, 고급 필터링 및 내보내기를 위한 기본 구성 요소를 제공하도록 구성할 수 있습니다.

    이러한 기능은 Ignite UI for React Suite의 카드 구성 요소와 유사한 패턴을 따라 서로 독립적으로 사용하도록 설정할 수 있습니다.

    아래에는 도구 모음의 주요 기능과 각 기능에 대한 예제 코드가 나열되어 있습니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    제목

    ​IgrGridToolbarTitle 사용하여 그리드의 도구 모음 제목을 설정합니다.

    사용자는 간단한 텍스트부터 보다 복잡한 템플릿까지 무엇이든 제공할 수 있습니다.

    <IgrGridToolbar>
    <IgrGridToolbarTitle>
        Grid toolbar title
    </IgrGridToolbarTitle>
</IgrGridToolbar>
tsx

    행위

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

    <IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    열 고정

    ​IgrGridToolbarPinning 구성 요소는 그리드의 열 고정과 상호 작용하기 위한 기본 UI를 제공합니다.

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

    <IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarPinning title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    열 숨기기

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

    <IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarHiding title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    고급 필터링

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

    <IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    데이터 내보내기

    나머지 도구 모음 작업과 마찬가지로 내보내기는 기본적으로 IgrGridToolbarExporter를 통해 제공됩니다.

    도구 모음 내보내기 구성 요소는 UI와 내보내기 환경을 모두 사용자 지정하기 위한 여러 입력 속성을 노출합니다.

    표시 텍스트 변경부터 드롭다운 옵션 활성화/비활성화, 생성된 파일 이름 사용자 정의까지 다양합니다. 자세한 내용은 ToolbarExporter에 대한 API 문서를 참조하세요.

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

    <IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarExporter exportCSV={true} exportExcel={true} filename="exported_data"></IgrGridToolbarExporter>
    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    내보낸 파일 이름을 변경하는 것 외에도 사용자는 ToolbarExporting 이벤트를 기다리고 이벤트 속성에서 옵션 항목을 사용자 정의하여 내보내기 옵션을 추가로 구성할 수 있습니다.

    기본적으로 CSV로 내보낼 때 내보내기는 쉼표 구분 기호를 사용하여 내보내고 출력 파일에 '.csv' 확장자를 사용합니다. 내보내기 이벤트를 구독하거나 내보내기 옵션 필드의 값을 변경하여 이러한 내보내기 매개변수를 사용자 정의할 수 있습니다. 이벤트 인수의 취소 필드를 true로 설정하여 내보내기 프로세스를 취소할 수도 있습니다.

    다음 코드 조각은 도구 모음 내보내기 이벤트를 구독하고 내보내기 옵션을 구성하는 방법을 보여줍니다.

    const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
    const args = evt.detail;
    const options: IgrExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;
    (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}

<IgrTreeGrid onToolbarExporting={configureExport}>
</IgrTreeGrid>
tsx

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    지표 내보내기

    기본 도구 모음 내보내기 구성 요소를 사용하는 경우 내보내기 작업이 발생할 때마다 작업이 진행되는 동안 도구 모음에 진행률 표시기가 표시됩니다.

    또한 사용자는 도구 모음 showProgress 속성을 설정하고 장기 실행 작업에 사용하거나 그리드에서 발생하는 작업을 나타내는 또 다른 방법으로 사용할 수 있습니다.

    아래 샘플에는 진행률 표시줄을 볼 수 있도록 데이터 내보내기에 필요한 시간을 늘리기 위해 상당한 양의 데이터가 사용됩니다. 또한 그리드에서 장기 실행 작업을 시뮬레이션하는 또 다른 버튼이 있습니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <IgrTreeGrid className="grid"></IgrTreeGrid>
tsx

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css

    데모

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    API 참조

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

    IgrTreeGrid Events:

    • ToolbarExporting

    추가 리소스

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