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>

    You can subscribe to the columnResized event of the igx-tree-grid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgxColumnComponent object, are exposed through the event arguments.

    <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ínimas e máximas permitidas de coluna. Isso é feito por meio das minWidth entradas e maxWidth do igx-column. 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 por minWidth e maxWidth.

    <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 valor de célula visível mais longo no momento, incluindo o próprio cabeçalho. Esse comportamento é habilitado por padrão, nenhuma configuração adicional é necessária. No entanto, a coluna não será dimensionada automaticamente caso maxWidth seja definida nessa coluna e a nova largura exceda esse maxWidth valor. Neste caso, a coluna será dimensionada de acordo com o valor predefinido maxWidth.

    Você também pode dimensionar automaticamente uma coluna dinamicamente usando o método exposto autosize() ativado IgxColumnComponent.

    @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 definida para tamanho automático na inicialização, definindo width como '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

    To get started with the styling of the Tree Grid column resize line, we need to import the index file, where all the theme functions and component mixins live:

    @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 conseguir isso é criar um novo tema que estenda o e aceite muitos parâmetros, grid-theme bem 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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter 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 Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.