Angular Tree Grid Column Resizing

Con el cambio de tamaño de columna de 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é vigente. El nuevo ancho de columna de la cuadrícula se aplica una vez que finaliza la operación de arrastre.

Angular Tree Grid Column Resizing Example

El cambio de tamaño de columna también está habilitado a nivel de columna, lo que significa que igx-tree-grid puede tener una combinación de columnas redimensionables y no redimensionables. Esto se hace mediante la entrada resizable de la igx-column.

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

Puede suscribirse al evento columnResized de igx-tree-grid para implementar alguna lógica personalizada cuando se cambia el tamaño de una columna. Tanto el ancho de columna anterior como el nuevo, así como el objeto IgxColumnComponent, se exponen a través de los argumentos del 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

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-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

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 puede configurar los anchos de columna mínimos y máximos permitidos. Esto se hace a través de las entradas minWidth y maxWidth de la igx-column. En este caso, la operación de arrastre del indicador de cambio de tamaño está restringida para notificar al usuario que no se puede cambiar el tamaño de la columna fuera de los límites definidos por minWidth y maxWidth.

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

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

Auto-size columns on double click

Se puede cambiar el tamaño de cada columna automáticamente haciendo doble clic en el lado derecho del encabezado; la columna se ajustará al valor de celda más largo actualmente visible, incluido el encabezado mismo. Este comportamiento está habilitado de forma predeterminada, no se necesita configuración adicional. Sin embargo, la columna no tendrá un tamaño automático en caso de que se establezca maxWidth en esa columna y el nuevo ancho exceda ese valor de maxWidth. En este caso, el tamaño de la columna se ajustará al valor maxWidth preestablecido.

También puede ajustar automáticamente el tamaño de una columna de forma dinámica utilizando el método autosize() expuesto en IgxColumnComponent.

@ViewChild('treeGrid') treeGrid: IgxTreeGridComponent;

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

Auto-size columns on initialization

Cada columna se puede configurar para que tenga un tamaño automático en la inicialización estableciendo width en '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 Tree Grid, 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';

El método más sencillo para lograr esto es crear un nuevo tema que extienda el grid-theme y acepte muchos parámetros, así como el parámetro $resize-line-color.

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

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep.

:host {
    ::ng-deep {
        @include grid($custom-grid-theme);
    }
}

Defining a color palette

En lugar de codificar los valores de color, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

igx-palette genera una paleta de colores basada en el color primario y secundario especificado:

$primary-color: #0288D1;
$secondary-color: #BDBDBD;

$custom-theme-palette: palette($primary: $primary-color, $secondary: $secondary-color);

Y luego, con igx-color, podemos recuperar fácilmente el color de la paleta.

$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $resize-line-color: color($custom-theme-palette, 'secondary', 500)
);

Note

igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using Schemas

Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

Amplíe el esquema predefinido proporcionado para cada componente, en este caso, el esquema light-grid:

// Extending the light grid schema
$light-grid-schema: extend($_light-grid,
    (
        resize-line-color: (
           color: ('secondary', 500)
            ),
        header-background: (
           color: ("primary", 100)
            ),
        header-text-color: (
           color: ("primary", 600)
            )
    )
);

Para aplicar nuestro esquema personalizado, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo al tema del componente respectivo:

// Extending the global light-schema
$custom-light-grid-schema: extend($light-schema,(
    igx-grid: $light-grid-schema
));

// Specifying the palette and schema of the custom grid theme
$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $schema: $custom-light-grid-schema
);

No olvide incluir el tema de la misma manera que se demostró anteriormente.

Demo

Note

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

API References

Additional Resources

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

Angular Tree Grid Column Resizing