React 계층형 그리드 툴바

The Ignite UI for React Toolbar in is a container for UI operations in the React Hierarchical Grid. The React toolbar is located at the top of the React component, i.e., the IgrHierarchicalGrid and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the React Hierarchical Grid includes:

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

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

The predefined IgrGridToolbarActions and IgrGridToolbarTitle UI components are added inside the IgrGridToolbar and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

<IgrHierarchicalGrid>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
           Hierarchical Grid Toolbar
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions>
            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning></IgrGridToolbarPinning>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
            <IgrGridToolbarExporter></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

[!Note] As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgrGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

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

<IgrHierarchicalGrid>
    <IgrGridToolbar>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

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

Toolbar with Child Grids

Due to certain limitations in how the child grids of an IgrHierarchicalGrid are implemented and how DI scope works, to define a toolbar component inside the IgrRowIsland, use the ToolbarTemplate input property. This allows child grids to create their own separate toolbar instances:

const rowIslandToolbarTemplate = (ctx: IgrGridToolbarTemplateContext) => {
    return (
        <IgrGridToolbar>
            <IgrGridToolbarActions>
                <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
                <IgrGridToolbarHiding></IgrGridToolbarHiding>
                <IgrGridToolbarPinning></IgrGridToolbarPinning>
                <IgrGridToolbarExporter></IgrGridToolbarExporter>
            </IgrGridToolbarActions>
        </IgrGridToolbar>
    );
}

<IgrHierarchicalGrid>
    ...
    <IgrRowIsland toolbarTemplate={rowIslandToolbarTemplate}>
    </IgrRowIsland>
</IgrHierarchicalGrid>

특징

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

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

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

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

Title

Setting a title for the toolbar in your grid is achieved by using the IgrGridToolbarTitle.

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

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

Actions

The IgrGridToolbarActions is where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

<IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>

열 고정

The IgrGridToolbarPinning component provides the default UI for interacting with column pinning in the grid.

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

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

열 숨기기

The IgrGridToolbarHiding provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

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

고급 필터링

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

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

Data Exporting

[!Note] When exporting the IgrHierarchicalGrid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data).

As with the rest of the toolbar actions, exporting is provided through a IgrGridToolbarExporter out of the box.

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

These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter.

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

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

In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

[!Note] By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to 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 === 'Photo';
    });
}

<IgrHierarchicalGrid onToolbarExporting={configureExport}>
</IgrHierarchicalGrid>

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

Exporting Indicator

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

Moreover, users can set the toolbar showProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

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

Styling

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

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

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

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

Demo

Known Limitations

[!Note] Currently, defining a toolbar component directly inside the IgrRowIsland is not supported. Use the ToolbarTemplate property instead.

API References

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

• IgrGridToolbarAdvancedFiltering
• IgrGridToolbar
• IgrGridToolbarExporter
• IgrGridToolbarHiding
• IgrGridToolbarPinning
• IgrGridToolbarTitle

IgrHierarchicalGrid Events:

• ToolbarExporting

Additional Resources

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

• Ignite UI for React Forums
• Ignite UI for React GitHub