Web Components Hierarchical Grid Column Hiding

    O Ignite UI for Web Components tem uma interface do usuário interna que oculta colunas, que pode ser usada por meio da barra de ferramentas Web Components 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 Web Components Hierarchical Grid Column Hiding é especialmente útil quando se deseja diminuir o tamanho da grade e eliminar a necessidade de tabulação em campos redundantes.

    Web Components Hierarchical Grid Column Hiding Example

    Hierarchical Grid Setup

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

    <igc-hierarchical-grid auto-generate="false" primary-key="ID" allow-filtering="true" name="hierarchicalGrid1" id="hierarchicalGrid1">
    <igc-column field="Artist" header="Artist" data-type="string" sortable="true"></igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"></igc-column>
    <igc-column field="Debut" header="Debut" data-type="number" hidden="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" sortable="true"> </igc-column>
</igc-hierarchical-grid>

    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 IgcHierarchicalGridComponent. 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 IgcGridToolbarActions​ ​IgcGridToolbarHiding interior do IgcHierarchicalGridComponent.

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

    O nos IgcHierarchicalGridComponent 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.

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

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

    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.

    <igc-hierarchical-grid>
    <igc-column field="Artist" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyAwards" data-type="String" sortable="true" disable-hiding="true"></igc-column>

    <igc-row-island>
        <igc-column field="Album" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

    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:

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

    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:

    .hierarchical-grid {
    /* 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 . IgcHierarchicalGridComponent 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:

    IgcColumnComponent properties:

    IgcGridToolbar properties:

    • showProgress

    IgcGridToolbar methods:

    IgcHierarchicalGridComponent events:

    • ColumnVisibilityChanged

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.