Virtualización y rendimiento Blazor Tree Grid
En Ignite UI for Blazor, el control IgbTreeGrid
virtualiza su contenido tanto vertical como horizontalmente.
Habilitando la virtualización
El IgbTreeGrid
ahora optimiza la representación del DOM y el consumo de memoria al representar solo lo que está visible actualmente en la ventana de visualización e intercambiar los datos mostrados mientras el usuario desplaza los datos horizontalmente/verticalmente. El IgbTreeGrid
Es decir, que Width
y Height
El valor predeterminado es 100%
lo que permitirá la virtualización si el contenido mostrado no cabe dentro del espacio disponible y se requieren barras de desplazamiento vertical u horizontal.
Sin embargo, también es posible establecer explícitamente el parámetro IgbTreeGrid
Es decir, que Width
y/o Height
Para null
lo que significa que la dimensión relacionada estará determinada por el tamaño total de los elementos que contiene. A continuación, no se mostrará ninguna barra de desplazamiento y todos los elementos se representarán a lo largo de la dimensión respectiva (columnas si Width
es null
y filas si Height
es null
).
El tamaño de los fragmentos de datos está determinado por:
- La altura de la fila para la virtualización vertical (fila). Esto está determinado por la opción
RowHeight
y es 50 (px) de forma predeterminada. - Los anchos de columna individuales en píxeles para la virtualización horizontal (columna). Se pueden determinar estableciendo el ancho explícito para cada componente de columna o estableciendo la
IgbTreeGrid
opción sColumnWidth
, que se aplicará a todas las columnas que no tengan un ancho explícito establecido.
En la mayoría de los casos, si se deja que la cuadrícula aplique su comportamiento predeterminado dejando las dimensiones sin definir, se producirá el diseño deseado. En el caso de los anchos de IgbTreeGrid
columna, viene determinado por el número de columnas, las columnas con anchura establecida y la anchura calculada del contenedor. La cuadrícula intentará ajustar todas las columnas dentro del espacio disponible, siempre y cuando el ancho que intente asignar no sea inferior a 136 (px). En tales casos, las columnas con ancho no asignado recibirán el ancho mínimo de 136 (px) y se mostrará una barra de desplazamiento horizontal. La cuadrícula se virtualizará horizontalmente.
Establecer explícitamente los anchos de las columnas en porcentajes (%) creará, en la mayoría de los casos, una cuadrícula que no está virtualizada horizontalmente ya que no tendrá una barra de desplazamiento horizontal.
Limitaciones de virtualización
- En Mac OS, la barra de desplazamiento horizontal no está visible cuando la opción del sistema "Mostrar barras de desplazamiento solo al desplazarse" está configurada en true (que es el valor predeterminado). Esto se debe a que el
IgbTreeGrid
contenedor de fila tiene un desbordamiento establecido en oculto. Cambie la opción a "Siempre" y aparecerá la barra de desplazamiento.
Preguntas más frecuentes
¿Por qué es necesario tener dimensiones en la cuadrícula de árbol para que la virtualización funcione?
Sin información sobre los tamaños del contenedor y los elementos antes de representarlos, establecer el ancho o el alto de una barra de desplazamiento o determinar cuál de los elementos debe estar en la vista cuando se desplaza a una ubicación aleatoria en el IgbTreeGrid
es erróneo. Cualquier suposición sobre cuáles podrían ser las dimensiones reales podría conducir a un comportamiento antinatural de la barra de desplazamiento y, en última instancia, a una experiencia subóptima para el usuario final. Esta es la razón por la que se aplica la configuración de las dimensiones relacionadas para que la virtualización surta efecto.
Referencias de API
Recursos adicionales
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.