React Grade hierárquica para Ignite UI for React para

A barra de ferramentas Ignite UI for React é um contêiner para operações de interface do usuário na grade hierárquica React. A barra de ferramentas React está localizada na parte superior do componente React, ou seja, o e corresponde ao IgrHierarchicalGrid seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar qualquer conteúdo personalizado ou conjunto de controles de interface do usuário predefinidos. O conjunto padrão para a Grade Hierárquica React inclui:

Ocultação de coluna
Fixação de coluna
Exportação do Excel
Filtragem avançada

A barra de ferramentas e os componentes de interface do usuário predefinidos dão suporte a eventos React e expõem a API para desenvolvedores.

Os componentes predefinidos IgrGridToolbarActions e IgrGridToolbarTitle de interface do usuário são adicionados dentro do e tudo isso IgrGridToolbar é necessário para ter uma barra de ferramentas que forneça interações padrão com os recursos de grade correspondentes:

<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.

Obviamente, cada uma dessas interfaces do usuário pode ser adicionada independentemente uma da outra ou pode não ser adicionada. Dessa forma, o contêiner da barra de ferramentas será renderizado vazio:

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

Para obter uma visão abrangente de cada um dos componentes padrão da interface do usuário, continue lendo a seção Recursos abaixo.

Devido a certas limitações em como as grades filhas de an IgrHierarchicalGrid são implementadas e como o escopo de DI funciona, para definir um componente da barra de ferramentas dentro do IgrRowIsland, use a ToolbarTemplate propriedade input. Isso permite que as grades filhas criem suas próprias instâncias separadas da barra de ferramentas:

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

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

Características

A barra de ferramentas é ótima para separar lógica / interações que afetam a grade como um todo.

Conforme mostrado acima, ele pode ser configurado para fornecer componentes padrão para controle, ocultação de coluna, fixação de coluna, filtragem avançada e exportação de dados da grade.

Esses recursos podem ser ativados independentemente uns dos outros, seguindo um padrão semelhante ao componente de cartão do pacote Ignite UI for React.

Abaixo estão listados os principais recursos da barra de ferramentas com código de exemplo para cada um deles.

Title

A definição de um título para a barra de ferramentas em sua grade é obtida usando o IgrGridToolbarTitle.

Os usuários podem fornecer qualquer coisa, desde texto simples até modelos mais complexos.

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

Actions

É IgrGridToolbarActions onde os usuários podem colocar ações/interações em relação à grade pai. Assim como acontece com a parte do título da barra de ferramentas, os usuários podem fornecer qualquer coisa dentro dessa parte do modelo, incluindo os componentes de interação da barra de ferramentas padrão.

<IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>

Fixação de coluna

O IgrGridToolbarPinning componente fornece a interface do usuário padrão para interagir com a fixação de coluna na grade.

O componente é configurado para funcionar imediatamente com a grade pai contendo a barra de ferramentas, bem como várias propriedades de entrada para personalizar a interface do usuário, como o título do componente, o espaço reservado para a entrada do componente e a altura da própria lista suspensa.

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

Ocultação de coluna

O IgrGridToolbarHiding fornece a interface do usuário padrão para interagir com a ocultação de colunas. Expõe as mesmas propriedades de entrada para personalizar a interface do usuário, como o título do componente, o espaço reservado para a entrada do componente e a altura da própria lista suspensa.

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

Filtragem avançada

O componente Filtragem Avançada da Barra de Ferramentas fornece a interface do usuário padrão para o recurso Filtragem Avançada. O componente expõe uma maneira de alterar o texto padrão do botão.

<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).

Assim como o restante das ações da barra de ferramentas, a exportação é fornecida por meio de uma IgrGridToolbarExporter caixa pronta para uso.

O componente exportador da barra de ferramentas expõe várias propriedades de entrada para personalizar a interface do usuário e a experiência de exportação.

Isso varia de alterar o texto de exibição a ativar/desativar opções no menu suspenso e personalizar o nome do arquivo gerado. Para referência completa, consulte a documentação da API para o ToolbarExporter.

Aqui está um trecho mostrando algumas das opções que podem ser personalizadas por meio do modelo React:

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

Além de alterar o nome do arquivo exportado, o usuário pode configurar ainda mais as opções do exportador aguardando o ToolbarExporting evento e personalizando a entrada de opções nas propriedades do evento.

[!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.

O snippet de código a seguir demonstra a assinatura do evento de exportação da barra de ferramentas e a configuração das opções do exportador:

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>

O exemplo a seguir demonstra como personalizar os arquivos exportados:

Exporting Indicator

Ao usar o componente exportador da barra de ferramentas padrão, sempre que uma operação de exportação ocorrer, a barra de ferramentas mostrará um indicador de progresso enquanto a operação estiver em andamento.

Além disso, os usuários podem definir a propriedade da barra de ferramentas showProgress e usá-la para suas próprias operações de longa duração ou apenas como outra maneira de significar uma ação que está ocorrendo na grade.

O exemplo abaixo usa uma quantidade significativa de dados, a fim de aumentar o tempo necessário para a exportação de dados para que a barra de progresso possa ser vista. Além disso, possui outro botão que simula uma operação de longa duração na grade:

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

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

Em seguida, defina as propriedades CSS relacionadas para essa classe:

.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

O serviço Grid Toolbar tem mais algumas APIs para explorar, listadas abaixo.

IgrHierarchicalGrid Events:

ToolbarExporting

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

React barra de ferramentas de grade hierárquica

Toolbar with Child Grids