Cambio de tamaño de columnas de cuadrícula jerárquica Angular

    Con el cambio de tamaño de la columna de la cuadrícula diferido, el usuario verá un indicador de cambio de tamaño temporal mientras la operación de cambio de tamaño de arrastre Angular esté en vigencia. El nuevo ancho de la columna de la cuadrícula se aplica una vez que finaliza la operación de arrastre.

    Angular Hierarchical Grid Column Resizing Example

    Column resizing is also enabled per-column level, meaning that the igx-hierarchical-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]="'Artist'" [resizable]="true"></igx-column>

    You can subscribe to the columnResized event of the igx-hierarchical-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-hierarchical-grid class="hgrid" [data]="localdata" (columnResized)="onResize($event)" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
        <igx-column field="Artist" [resizable]="true"></igx-column>
        ...
</igx-hierarchical-grid>

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

    Resizing columns in pixels/percentages

    Dependiendo del escenario del usuario, el ancho de la columna se puede definir en píxeles, porcentajes o una combinación de ambos. Todos estos escenarios son compatibles con la función de cambio de tamaño de columna. De forma predeterminada, si una columna no tiene el ancho establecido, se ajusta al espacio disponible con el ancho establecido en píxeles.

    Esto significa que es posible la siguiente configuración:

      <igx-hierarchical-grid class="hgrid" [data]="localdata" (columnResized)="onResize($event)" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
        <igx-column field="Artist" [resizable]="true" [width]="'10%'"></igx-column>
        <igx-column field="GrammyNominations" [resizable]="true" [width]="'100px'"></igx-column>
        <igx-column field="GrammyAwards" [resizable]="true"></igx-column>
        ...
</igx-hierarchical-grid>
    Note

    Hay una ligera diferencia en la forma en que funciona el cambio de tamaño para las columnas configuradas en píxeles y porcentajes.

    Píxeles

    Cambiar el tamaño de las columnas con ancho en píxeles funciona sumando o restando directamente la cantidad horizontal del movimiento del mouse del tamaño de la columna.

    Porcentajes

    Al cambiar el tamaño de las columnas con ancho en porcentajes, la cantidad horizontal del movimiento del mouse en píxeles se traduce aproximadamente a su porcentaje relativo al ancho de la cuadrícula. Las columnas siguen respondiendo y cualquier cambio de tamaño futuro de la cuadrícula también se reflejará en las columnas.

    Restrict column resizing

    También puedes configurar los anchos mínimos y máximos permitidos de columna. Esto se hace a través de lasminWidth entradas ymaxWidth de laigx-column. En este caso, la operación de arrastre del indicador de redimensionamiento está restringida para notificar al usuario que la columna no puede redimensionarse fuera de los límites definidos porminWidth y.maxWidth​

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

    Se permite mezclar los tipos de valores de ancho de columna mínimo y máximo (píxeles o porcentajes). Si los valores establecidos para mínimo y máximo se establecen en porcentajes, el tamaño de columna respectivo se limitará a esos tamaños exactos similares a los píxeles.

    Esto significa que son posibles las siguientes configuraciones:

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

    o

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

    Auto-size columns on double click

    Cada columna puede ser dimensionada automáticamente haciendo doble clic en el lado derecho de la cabecera; la columna se dimensionará hasta el valor de celda visible más largo actualmente, incluyendo la cabecera en sí. Este comportamiento está activado por defecto, no se necesita ninguna configuración adicional. Sin embargo, la columna no se dimensionará automáticamente simaxWidth se establece en esa columna y el nuevo ancho supera esemaxWidth valor. En este caso, la columna se dimensionará según el valor preestablecidomaxWidth.

    También puedes dimensionar una columna dinámicamente usando el método de exposiciónautosize() activadoIgxColumnComponent.

    @ViewChild('hierarchicalGrid') hierarchicalGrid: IgxHierarchicalGridComponent;

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

    Auto-size columns on initialization

    Each column can be set to auto-size on initialization by setting width to 'auto':

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

    Cuando la columna se inicializa por primera vez en la vista, resuelve su ancho al tamaño de la celda o encabezado visible más largo. Tenga en cuenta que las celdas que están fuera de las filas visibles no se incluyen. Este enfoque optimiza más el rendimiento que la inicialización de publicaciones con tamaño automático y se recomienda especialmente en los casos en los que necesita ajustar el tamaño automáticamente de una gran cantidad de columnas.

    Estilismo

    Para comenzar con el estilo de la línea de cambio de tamaño de la columna de la cuadrícula jerárquica, necesitamos importar el archivo de índice, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

    The simplest approach to achieve this is to create a new theme that extends the grid-theme and accepts many parameters as well as the $resize-line-color parameter.

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

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    El último paso es incluir los mixins de componentes con su respectivo tema:

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

    Demo

    Note

    La muestra no se verá afectada por el tema global seleccionado deChange Theme.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.