Angular Tree Grid Column Resizing

    Com o redimensionamento da coluna de grade adiada, o usuário verá um indicador de redimensionamento temporário enquanto a operação de redimensionamento de arrastar Angular estiver em vigor. A nova largura da coluna de grade é aplicada quando a operação de arrastar é concluída.

    Angular Tree Grid Column Resizing Example

    Column resizing is also enabled per-column level, meaning that the igx-tree-grid can have a mix of resizable and non-resizable columns. This is done via the resizable input of the igx-column.

    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

    Você pode assinar ocolumnResized evento de paraigx-tree-grid implementar alguma lógica personalizada quando uma coluna for redimensionada. Tanto as larguras das colunas anteriores quanto as novas, assim como oIgxColumnComponent objeto, são expostas por meio dos argumentos do evento.

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'Title'" [resizable]="true" [width]="'100px'"></igx-column>
    <igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
</igx-tree-grid>

    public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

    Resizing columns in pixels/percentages

    Dependendo do cenário do usuário, a largura da coluna pode ser definida em pixels, porcentagens ou uma combinação de ambos. Todos esses cenários são compatíveis com o recurso Redimensionamento de Coluna. Por padrão, se uma coluna não tiver largura definida, ela se ajustará ao espaço disponível com largura definida em pixels.

    Isso significa que a seguinte configuração é possível:

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'Title'" [resizable]="true" [width]="'10%'"></igx-column>
    <igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
    <igx-column [field]="'Age'" dataType="number" [resizable]="true"></igx-column>
</igx-tree-grid>
    Note

    Há uma pequena diferença na forma como o redimensionamento funciona para colunas definidas em pixels e porcentagens.

    Pixels

    O redimensionamento de colunas com largura em pixels funciona adicionando ou subtraindo diretamente a quantidade horizontal do movimento do mouse do tamanho da coluna.

    Percentagens

    Ao redimensionar colunas com largura em porcentagens, a quantidade horizontal do movimento do mouse em pixels se traduz aproximadamente em sua quantidade percentual em relação à largura da grade. As colunas permanecem responsivas e qualquer redimensionamento de grade futuro ainda refletirá nas colunas também.

    Restrict column resizing

    Você também pode configurar as larguras mínima e máxima das colunas permitidas. Isso é feito viaminWidth as entradas emaxWidth dosigx-column o. Nesse caso, a operação de arrastar do indicador de redimensionamento é restrita para notificar o usuário de que a coluna não pode ser redimensionada fora dos limites definidos porminWidth emaxWidth.

    <igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

    É permitido misturar os tipos de valor de largura mínima e máxima da coluna (pixels ou porcentagens). Se os valores definidos para mínimo e máximo forem definidos como porcentagens, o respectivo tamanho da coluna será limitado aos tamanhos exatos semelhantes aos pixels.

    Isso significa que as seguintes configurações são possíveis:

    <igx-column [field]="'ID'" width="10%" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

    ou

    <igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'5%'" [maxWidth]="'15%'"></igx-column>

    Auto-size columns on double click

    Cada coluna pode ser dimensionada automaticamente clicando duas vezes no lado direito do cabeçalho – a coluna será dimensionada para o maior valor da célula atualmente visível, incluindo o próprio cabeçalho. Esse comportamento é ativado por padrão, não é necessária nenhuma configuração adicional. No entanto, a coluna não será dimensionada automaticamente casomaxWidth seja definida nessa coluna e a nova largura exceda essemaxWidth valor. Nesse caso, a coluna será dimensionada de acordo com o valor pré-definidomaxWidth.

    Você também pode dimensionar automaticamente uma coluna dinamicamente usando o método expostoautosize() emIgxColumnComponent.

    @ViewChild('treeGrid') treeGrid: IgxTreeGridComponent;

let column = this.treeGrid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

    Auto-size columns on initialization

    Cada coluna pode ser configurada para tamanho automático na inicialização definindowidth para 'auto':

    <igx-column width='auto'>...

    Quando a coluna é inicializada pela primeira vez na exibição, ela resolve sua largura para o tamanho da célula ou cabeçalho visível mais longo. Observe que as células que estão fora das linhas visíveis não estão incluídas. Essa abordagem é mais otimizada para desempenho do que o dimensionamento automático após a inicialização e é recomendada especialmente nos casos em que você precisa dimensionar automaticamente um grande número de colunas.

    Estilização

    Para começar com o estilo da linha de redimensionamento da coluna Tree Grid, precisamos importar o arquivo de índice, onde todas as funções do tema e mixins de componentes residem:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    A abordagem mais simples para alcançar isso é criar um novo tema que estenda egrid-theme aceite muitos parâmetros, assim como o$resize-line-color parâmetro.

    $custom-grid-theme: grid-theme(
  $resize-line-color: #0288d1
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

    O último passo é incluir os mixins de componentes com seu respectivo tema:

    @include css-vars($custom-grid-theme);

    Demo

    Note

    A amostra não será afetada pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.