Web Components Grid para Ignite UI for Web Components para

A barra de ferramentas Ignite UI for Web Components é um contêiner para operações de interface na Web Components Grade. A barra de ferramentas Web Components está localizada no topo do componente Web Components, ou seja, ogrid e ela corresponde ao seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar qualquer conteúdo personalizado ou conjunto de controles pré-definidos da interface. O conjunto padrão para a Web Components Grade 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 Web Components e expõem a API para desenvolvedores.

Os componentes pré-definidosIgcGridToolbarActionsComponent eIgcGridToolbarTitleComponent de interface são adicionados dentro doIgcGridToolbarComponent e tudo isso é necessário para ter uma barra de ferramentas que forneça interações padrão com os recursos correspondentes da Grade:

<igc-grid id="grid" auto-generate="true">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>Grid Toolbar</igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-advanced-filtering><igc-grid-toolbar-advanced-filtering>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-grid>

Note

As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgcGridToolbarActionsComponent 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:

<igc-grid auto-generate="true">
    <igc-grid-toolbar>
    </igc-grid-toolbar>
</igc-grid>

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

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

Title

Definir um título para a barra de ferramentas na sua grade é feito usando oIgcGridToolbarTitleComponent.

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

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

Actions

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

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
    <!-- ... -->
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

Fixação de coluna

OIgcGridToolbarPinningComponent componente fornece a interface padrão para interagir com o fixamento de colunas 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.

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

Ocultação de coluna

EleIgcGridToolbarHidingComponent fornece a interface padrão para interagir com ocultação de colunas. Expõe as mesmas propriedades de entrada para personalizar a interface, como o título do componente, o marcador de posição para a entrada do componente e a altura do próprio menu suspenso.

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            column-list-height="400px">
        </igc-grid-toolbar-hiding>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

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.

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

Data Exporting

Como nas demais ações da barra de ferramentas, a exportação é feita por meio de umIgcGridToolbarExporterComponent dispositivo pronto para uso inicial.

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.

Essas opções vão desde alterar o texto de exibição, ativar/desativar opções no menu suspenso até personalizar o nome do arquivo gerado. Para referência completa, consulte a documentação da API para oToolbarExporter.

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

<igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-exporter export-csv="true" export-excel="true" filename="exported_data">
        </igc-grid-toolbar-exporter>
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>

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

Note

Por padrão, ao exportar para CSV, o exportador exporta usando um separador de vírgula e usa uma extensão '.csv' para o arquivo de saída. Você pode personalizar esses parâmetros de exportação assinando eventos do exportador ou alterando os valores dos campos de opções do exportador. Você também pode cancelar o processo de exportação definindo o campo cancel dos argumentos do evento como 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:

<igc-grid id="toolbarExporter"></igc-grid>

constructor() {
    var toolbarExporter = this.toolbarExporter = document.getElementById('toolbarExporter') as IgcGridToolbarExporterComponent;
    toolbarExporter.addEventListener("toolbarExporting", this.configureExport);
}

public configureExport(evt: CustomEvent<IgcGridToolbarExportEventArgs>) {
    const args = evt.detail;
    const options: IgcExporterOptionsBase = args.options;

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

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 ferramentasshowProgress e usá-la para suas próprias operações de longa duração ou simplesmente como outra forma de indicar uma ação 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:

Custom Content

Se a parte de ações do componente da barra de ferramentas não for suficiente para um caso de uso específico, a própria barra de ferramentas terá uma projeção de conteúdo geral em que os usuários podem fornecer interface do usuário adicional. Se o usuário precisar da respectiva instância de grade para chamadas ou associações de API, ele poderá criar uma variável de referência de modelo.

Aqui está um trecho de exemplo:

<igc-grid id="grid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>title</igx-grid-toolbar-title>
        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <igc-grid-toolbar-actions>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-grid>

O exemplo a seguir demonstra como adicionar um botão adicional à barra de ferramentas para limpar o conjunto de classificação clicando nos cabeçalhos das colunas:

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:

<igc-grid class="grid"></igc-grid>

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

API References

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

grid Events:

ToolbarExporting

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Web Components Grid Toolbar

Web Components Toolbar Grid Example

Note

Características

Title

Actions

Fixação de coluna

Ocultação de coluna

Filtragem avançada

Data Exporting

Note

Exporting Indicator

Custom Content

Styling

Demo

API References

Additional Resources