Blazor Tree Grid for Ignite UI for Blazor for

A barra de ferramentas Ignite UI for Blazor é um contêiner para operações de interface do usuário na grade de árvore Blazor. A barra de ferramentas Blazor está localizada na parte superior do componente Blazor, ou seja, o e corresponde ao IgbTreeGrid 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 de Árvore Blazor 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 Blazor e expõem a API para desenvolvedores.

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

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarAdvancedFiltering>
            </IgbGridToolbarAdvancedFiltering>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
            <IgbGridToolbarPinning>
            </IgbGridToolbarPinning>
            <IgbGridToolbarExporter>
            </IgbGridToolbarExporter>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

[!Note] As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgbGridToolbarActions 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:

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
    </IgbGridToolbar>
</IgbTreeGrid>

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.

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

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

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

<IgbGridToolbar>
    <IgbGridToolbarTitle>Grid toolbar title</IgbGridToolbarTitle>
</IgbGridToolbar>

Actions

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <!--...-->
    </IgbGridToolbarActions>
</IgbGridToolbar>

Fixação de coluna

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarPinning Title="Grid pinned columns" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarPinning>
    </IgbGridToolbarActions>
</IgbGridToolbar>

Ocultação de coluna

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

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarHiding Title="Grid column hiding" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarHiding>
    </IgbGridToolbarActions>
</IgbGridToolbar>

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.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
    </IgbGridToolbarActions>
</IgbGridToolbar>

Data Exporting

Assim como o restante das ações da barra de ferramentas, a exportação é fornecida por meio de uma IgbGridToolbarExporter 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 Blazor:

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarExporter ExportCSV="true" ExportExcel="true" Filename="exported_data"></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
</IgbGridToolbar>

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:

<IgbTreeGrid ToolbarExportingScript="ConfigureExport"></IgbTreeGrid>

// In Javascript
igRegisterScript("ConfigureExport", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}, false);

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:

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:

<IgbTreeGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>title</IgbGridToolbarTitle>
        @*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        *@
        <IgbGridToolbarActions>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

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:

<IgbTreeGrid class="grid"></IgbTreeGrid>

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;
}

Características

Title

Actions

Fixação de coluna

Ocultação de coluna

Filtragem avançada

Data Exporting

Exporting Indicator

Custom Content

Styling

Demo

API References

Additional Resources

Blazor Tree Grid Toolbar

Blazor Toolbar Grid Example

Características

Title

Actions

Fixação de coluna

Ocultação de coluna

Filtragem avançada

Data Exporting

Exporting Indicator

Custom Content

Styling

Demo

API References

Additional Resources