Blazor Hierarchical Grid Column Hiding

O Ignite UI for Blazor tem uma interface do usuário interna que oculta colunas, que pode ser usada por meio da barra de ferramentas Blazor Grade Hierárquica para alterar o estado visível das colunas. Os desenvolvedores têm a flexibilidade de definir a interface do usuário de ocultação de coluna em qualquer lugar da página, conforme necessário. O recurso Blazor Hierarchical Grid Column Hiding é especialmente útil quando se deseja diminuir o tamanho da grade e eliminar a necessidade de tabulação em campos redundantes.

Blazor Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

Vamos começar criando nosso IgbHierarchicalGrid e vinculando-o aos nossos dados. Também habilitaremos a filtragem e a classificação das colunas.

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String" Sortable="true"></IgbColumn>
    <IgbColumn Field="Photo" Header="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
</IgbHierarchicalGrid>

Toolbar's Column Hiding UI

A interface do usuário de ocultação de coluna interna é colocada dentro de uma DropDown barra de ferramentas do IgbHierarchicalGrid. Podemos mostrar/ocultar a interface do usuário de ocultação de coluna usando esse menu suspenso exato.

Para isso, tudo o que precisamos fazer é definir o e o IgbGridToolbarActions IgbGridToolbarHiding interior do IgbHierarchicalGrid. Também adicionaremos um título à nossa barra de ferramentas usando o e um estilo personalizado para o IgbGridToolbarTitle wrapper da nossa Grade Hierárquica.

<IgbHierarchicalGrid Data="SingersData">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

O nos IgbHierarchicalGrid fornece algumas propriedades úteis quando se trata de usar a interface do usuário de ocultação de coluna da barra de ferramentas.

Ao usar a Title propriedade, definiremos o título que é exibido dentro do botão suspenso na barra de ferramentas.

<IgbHierarchicalGrid Data=SingersData>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de ocultação de coluna Blazor.

Disable hiding of a column

Podemos facilmente impedir que o usuário possa ocultar colunas por meio da interface do usuário de ocultação de coluna simplesmente definindo sua DisableHiding propriedade como true.

<IgbHierarchicalGrid>
    <IgbColumn Field="Artist" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="GrammyAwards" Sortable=true DisableHiding=true></IgbColumn>

    <IgbRowIsland>
        <IgbColumn Field="Album" Sortable=true DisableHiding=true></IgbColumn>
    </IgbRowIsland>
</IgbHierarchicalGrid>

Styling

A grade pode ser ainda mais personalizada definindo algumas das variáveis CSS disponíveis. Para conseguir isso, usaremos uma classe que primeiro atribuiremos à grade:

<IgbHierarchicalGrid class="hierarchical-grid"></IgbHierarchicalGrid>

Em seguida, defina as variáveis CSS relacionadas para os componentes relacionados. Aplicaremos os estilos também apenas no igx-column-actions, para que o resto da grade não seja afetado:

#hierarchicalGrid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

Demo

API References

Neste artigo, aprendemos como usar a interface do usuário de ocultação de coluna interna na barra de ferramentas do . IgbHierarchicalGrid A coluna que oculta a interface do usuário tem mais algumas APIs para explorar, listadas abaixo.

ColumnActionsComponent

Componentes adicionais com APIs relativas que foram usadas:

IgbColumn properties:

DisableHiding

IgbGridToolbar properties:

showProgress

IgbGridToolbar methods:

IgbHierarchicalGrid events:

ColumnVisibilityChanged

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.