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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
El cambio de tamaño de columna también está habilitado a nivel de columna, lo que significa que igx-hierarchical-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]="'Artist'" [resizable]="true"></igx-column>
html
Puede suscribirse al evento columnResized
de igx-hierarchical-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-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>
html
public onResize(event) {
this.col = event.column;
this.pWidth = event.prevWidth;
this.nWidth = event.newWidth;
}
typescript
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>
html
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]="'Artist'" width="100px" [resizable]="true"
[minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
html
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>
html
o
<igx-column [field]="'Artist'" width="100px" [resizable]="true"
[minWidth]="'60px'" [maxWidth]="'15%'"></igx-column>
html
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('hierarchicalGrid') hierarchicalGrid: IgxHierarchicalGridComponent;
let column = this.hierarchicalGrid.columnList.filter(c => c.field === 'Artist')[0];
column.autosize();
typescript
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'>...
html
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';
scss
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
);
scss
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette
funciones y color
. Consulte el Palettes
tema para obtener orientación detallada sobre cómo usarlos.
El último paso es incluir los mixins de componentes con su respectivo tema:
@include css-vars($custom-grid-theme);
scss
Demo
La muestra no se verá afectada por el tema global seleccionado en Change Theme
.
API References
Additional Resources
- Descripción general de la cuadrícula jerárquica
- Virtualización y rendimiento
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Selección