Web Components Dimensionamiento de cuadrícula jerárquica

La función de tamaño Ignite UI for Web Components en Web Components cuadrícula jerárquica es un aspecto importante de la creación de interfaces de cuadrícula receptivas y fáciles de usar. La función de tamaño de cuadrícula jerárquica de Web Components permite a los usuarios ajustar el width y height de la cuadrícula para adaptarse a diferentes tamaños de pantalla, contenido o preferencias del usuario. En términos de tamaño de borde y relleno para el IgcHierarchicalGridComponent, se toman en sus cálculos de tamaño de ancho / alto o también se conocen como tamaño de caja de borde. Se aplica en todos los escenarios.

[!Note] If the Border box sizing is overridden by the user we cannot guarantee that the IgcHierarchicalGridComponent will size correctly.

Web Components Hierarchical Grid Width

Si la width entrada no tiene un valor asignado, su valor predeterminado es 100% y el IgcHierarchicalGridComponent intenta llenar el espacio disponible. Puedes comprobar cómo reacciona la cuadrícula en la Percentages sección.

[!Note] Setting manually the width style of the IgcHierarchicalGridComponent itself will result in an unexpected behavior.

Null

El width de la cuadrícula puede aceptar el valor de null, que cuando se establece, representa todas las columnas del DOM. El tamaño de la cuadrícula se ajusta en consecuencia, por lo que no hay una barra de desplazamiento horizontal de la cuadrícula, ya que no se aplica la virtualización de columnas.

Si hay 6 columnas y ninguna de ellas tiene un ancho definido, la cuadrícula tendrá width de 816px, porque a cada columna de forma predeterminada se le ha asignado width de 136px en este escenario. Lo mismo sucederá si las columnas tienen width en porcentajes. Si se representa una barra de desplazamiento vertical o hay funciones que representan columnas adicionales, también se agregará su ancho.

Si hay 6 columnas con un ancho de columna establecido en 200px, encajarán en nuestra ventana y todas serán visibles:

Si hay más columnas o unas con mayor ancho que salen de la vista del navegador, todas se seguirán representando. Tengamos la misma cantidad de columnas pero cada una con un ancho de columna de 300px. Como no todos caben en el área de vista del navegador, se creará una barra de desplazamiento de forma nativa. El siguiente ejemplo muestra este escenario exacto:

Si la cuadrícula tiene un elemento principal de cualquier tipo y no tiene ningún desbordamiento configurado, seguirá mostrando todas las columnas visibles. De lo contrario, si el elemento principal tiene desbordamiento auto o scroll, se representará de forma nativa una barra de desplazamiento para ese elemento principal. El padre tiene una altura mayor para una visualización más fácil en el siguiente ejemplo.

[!Note] Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization.

Pixels

Cuando su IgcHierarchicalGridComponent width entrada se establece en píxeles, establecerá el tamaño total de la cuadrícula en ese valor y será estática. No reaccionará a ningún cambio de tamaño del navegador o cambios en el DOM, aunque este no es el caso del contenido de la cuadrícula:

Cuando el ancho se establece en píxeles para que la cuadrícula represente la barra de desplazamiento horizontal, el ancho del contenido debe exceder el width de la cuadrícula especificado. Por ejemplo, hagamos que el ancho combinado de las columnas supere 1200px. En este caso se representará una barra de desplazamiento horizontal.

En el caso de los escenarios en los que la cuadrícula tiene un elemento primario, depende del estilo primario si se representará en la barra de desplazamiento o no. Todo lo demás relacionado con la propia red se conserva. Si el ancho del elemento principal es menor que el ancho de la cuadrícula y tiene el estilo de desbordamiento establecido en auto o scroll, se representará la barra de desplazamiento de forma nativa. Por ejemplo, si el elemento primario ha width establecido en 1000px y el IgcHierarchicalGridComponent width es quieto 1200px, tendrá un aspecto similar al de las siguientes ilustraciones:

Percentages

Cuando el width de se IgcHierarchicalGridComponent establece en porcentajes, el tamaño de la cuadrícula se ajustará al ancho del elemento principal. Si el elemento padre no tiene el ancho especificado, el tamaño de la IgcHierarchicalGridComponent voluntad se relacionará con la ventana del navegador.

Por ejemplo, si configuramos la entrada width de la cuadrícula en 100% y no hay ningún elemento principal, llenará el 100% del ancho disponible de la ventana del navegador. Si se cambia el tamaño, la cuadrícula también cambiará de tamaño en consecuencia.

Si configuramos el ancho de la cuadrícula al 100% y hay un elemento principal que tiene un ancho específico de 1200px, esto significará que el tamaño de la cuadrícula tendrá un tamaño relativo a ese elemento y su ancho final será 1200px.

Si tenemos un elemento principal con width de 1000px y el width de la cuadrícula está establecido en 150%, el ancho de la cuadrícula calculado será 1500px. En este caso, la cuadrícula seguirá siendo completamente visible, pero si configuramos overflow: auto del padre, ese padre representará la barra de desplazamiento por sí solo.

Web Components Hierarchical Grid Height

De forma predeterminada, si no se define ninguna altura para el IgcHierarchicalGridComponent, se establecerá en 100%. Puedes comprobar cómo reacciona la cuadrícula en función de la estructura del DOM en la Percentages sección.

[!Note] Setting manually the height style of the IgcHierarchicalGridComponent itself will result in an unexpected behavior.

Null

El IgcHierarchicalGridComponent height La entrada puede aceptar null un valor, que cuando se establece, muestra todas las filas sin barra de desplazamiento sin importar cuántas sean. En este caso, no hay virtualización vertical, ya que la cuadrícula representa todas las filas de todos modos.

Si tenemos datos con 14 filas, en este caso la cuadrícula representará las 14 y ajustará el tamaño de la cuadrícula para que todas sean visibles sin ningún espacio vacío dentro de la cuadrícula.

Si en cambio tenemos 24 filas, la cuadrícula seguirá representando todas las filas, pero como son demasiadas, exceden los límites del navegador. Es por eso que el navegador mostrará una barra de desplazamiento vertical de forma predeterminada para que el usuario pueda desplazarse hacia abajo al resto de las filas.

Si hay un elemento principal con height definida, la cuadrícula seguirá representando todas las filas y no se verá afectada. Digamos que el padre tiene height de 650px. Si tiene overflow configurado en auto o scroll, generará una barra de desplazamiento vertical pero la cuadrícula aún no se verá afectada:

[!Note] Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization.

Pixels

Configurando el IgcHierarchicalGridComponent height en píxeles es más sencillo ya que la cuadrícula se ajustará a ese tamaño específico en todas las ocasiones, de manera similar a cómo width se establece en píxeles.

Si configuramos, por ejemplo, la altura 500px con 4 filas para nuestros datos, la cuadrícula tendrá ese tamaño y, dado que 4 filas no son suficientes para llenar el área visible, se espera que tenga un área vacía.

Si el número de filas excede el área visible de la cuadrícula cuando height se establece en píxeles, se representará una barra de desplazamiento vertical. Por ejemplo, una cuadrícula con una altura establecida 500px y 14 filas se representará de la siguiente manera:

Si hay un elemento principal con height definida, a menos que tenga overflow configurado en auto o scroll, la cuadrícula seguirá siendo completamente visible. De lo contrario, se mostrará una barra de desplazamiento.

Percentages

Cuando la height entrada se establece en porcentajes, el tamaño se IgcHierarchicalGridComponent basará en la altura del elemento principal. Si el elemento principal tiene su height conjunto en píxeles o porcentajes, el tamaño de la cuadrícula se ajustará en relación con el tamaño del elemento principal.

Cuando el elemento principal no tiene una altura definida, el navegador no le asigna altura inicialmente y lo dimensiona en función de sus elementos secundarios y su tamaño. Es por eso que no hay forma de que la cuadrícula sepa qué altura de base usar para aplicar el tamaño porcentual en función de ella. Por esta razón renderizará un máximo de 10 filas y si son más filas se renderizará una barra de desplazamiento vertical. De lo contrario, la cuadrícula se ajustará al número de filas representadas. Analizaremos este escenario con más detalle en los siguientes ejemplos.

Tengamos width establecido en 1200px y no se le aplique ningún tamaño al elemento principal:

Si hay menos de 10 filas, la cuadrícula intentará ajustar todas las filas en el área visible sin dejar un espacio vacío entre la última fila y la parte inferior del área visible. Por ejemplo, hagamos que los datos de la cuadrícula consten de 7 filas. La cuadrícula representará las 7 filas sin barra de desplazamiento vertical y sin espacios vacíos dentro de la cuadrícula.

Si hay más de 10 filas, se mostrará una barra de desplazamiento vertical para el resto de las filas y solo 10 filas podrán ser visibles en cualquier momento. En el siguiente ejemplo, solo el número de fila aumenta a 14.

Si establecemos la altura del elemento principal en 800px y la IgcHierarchicalGridComponent altura a, 100% esto significa que la cuadrícula se dimensionará a 100 porcentajes de 800px.

Si el IgcHierarchicalGridComponent height se establece en un número mayor que 100% y el elemento principal tiene altura, para que el elemento principal represente la barra de desplazamiento, nuevamente debe haberse overflow establecido en auto o scroll. De lo contrario, la cuadrícula será completamente visible y tendrá un tamaño relativo al tamaño principal.

Si queremos que el tamaño de la cuadrícula sea del 100% desde la ventana del navegador, necesitaremos establecer las alturas de los elementos de la cuadrícula principal y body en 100%. En este caso, se puede cambiar el tamaño del elemento principal y la cuadrícula se ajustará en consecuencia si se cambia el tamaño del navegador.

Web Components Hierarchical Grid Column Sizing

Dependiendo del tamaño de la cuadrícula en sí, las columnas dentro de ella también pueden tener un tamaño diferente, lo que podría dar lugar a escenarios en los que la cuadrícula muestre una barra de desplazamiento horizontal o no. Las columnas pueden tener el ancho establecido en píxeles, porcentajes o tamaño automático cuando no hay nada configurado. Analizaremos más profundamente estos escenarios en esta sección.

Default

De forma predeterminada, cuando una columna no tiene un ancho específico, intentará ajustar su tamaño automáticamente, de modo que se llene si hay algún espacio vacío disponible en el área de vista de cuadrícula. Las columnas de tamaño automático tienen un ancho mínimo de 136px, por lo que si el área disponible es inferior a 136px para esa columna, el tamaño predeterminado será ese.

Cuando se cambia el tamaño de la cuadrícula en estos escenarios, el ancho de la columna también se actualiza para reflejar los cambios, de modo que llene cualquier nuevo espacio vacío disponible.

Si una columna no tiene especificado width y se IgcHierarchicalGridComponent ha width establecido en null, se dimensionará al mínimo de 136px. Esto significa que para una cuadrícula con width null y 6 columnas que no tienen ancho, cada columna tendrá el tamaño a 136px.

Cuando hay varias columnas de tamaño automático, dividirán el espacio disponible entre sí por igual. Esto significa que si tenemos 6 columnas y hay un área vacía de 1200px, cada una tendrá un tamaño de 200px.

Si hay espacio vacío disponible, de modo que cada columna de tamaño automático tenga menos de 136px, todas las columnas de tamaño automático tendrán de forma predeterminada 136px y la cuadrícula mostrará una barra de desplazamiento horizontal. En el siguiente ejemplo, tengamos 12 columnas de tamaño automático y el width de la cuadrícula establecido en 1000px.

Si una columna no tiene width especificado, pero todas las demás columnas tienen un width en píxeles o porcentajes, esa columna intentará llenar también el espacio disponible. Por ejemplo, si no tenemos el ancho establecido en la primera columna y las otras 5 tienen width de 100px, la primera llenará el resto.

Lo mismo se aplica si varias columnas no tienen width especificado, todas dividirán el espacio disponible entre sí por igual. En la siguiente ilustración, la primera columna tiene width establecido en 100px.

[!Note] Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns.

Pixels

Cuando las columnas se han establecido específicamente width en píxeles, se adhieren a ese tamaño, a menos que se cambien de tamaño manualmente. Dado que la combinación width de las columnas es estática, puede ser menor que la IgcHierarchicalGridComponent width o superarlo.

Si la combinación width de todas las columnas es menor que la IgcHierarchicalGridComponent width, habría un área vacía dentro de la cuadrícula que las columnas no podrían llenar. Este es el comportamiento esperado de la IgcHierarchicalGridComponent. En el siguiente ejemplo, las columnas tienen 150px ancho.

Si la combinación width de todas las columnas es mayor que la IgcHierarchicalGridComponent width, se renderizará una barra de desplazamiento horizontal. En el siguiente ejemplo, cada una de las 6 columnas tiene un ancho de 300px y la cuadrícula tiene un ancho de 1200px, lo que significa que las columnas combinadas tienen un exceso de que se sale de 600px los límites.

Percentages

Cuando las columnas han establecido width en porcentajes, su tamaño se calcula en relación con el tamaño de la cuadrícula. Es similar a cómo funciona el ancho en píxeles, pero también proporciona capacidad de respuesta a las columnas, lo que significa que cuando se cambia el tamaño de la cuadrícula, las columnas también cambiarán de tamaño en consecuencia.

Si el ancho combinado de todas las columnas es inferior al 100%, de manera similar a cuando está en píxeles, podría haber un área vacía de la cuadrícula que las columnas no cubren.

Si el ancho combinado es exactamente 100%, las columnas llenarán todo el espacio disponible de la cuadrícula.

Si el ancho combinado excede 100% para que el usuario pueda ver las columnas fuera de la vista, se representa una barra de desplazamiento horizontal.

Si las columnas se establecen en porcentajes y el width de la cuadrícula se establece en null, se aplicaría width de 136px a cada columna. Esto se debe a que las columnas no se pueden dimensionar en relación con la cuadrícula, ya que no tiene width en sí y depende del tamaño de su contenido cuando su width es null. En el siguiente ejemplo, las 6 columnas tienen width establecido en 50%:

Web Components Hierarchical Grid Child Sizing

Debido a que generalmente IgcHierarchicalGridComponent contiene elementos secundarios, también pueden tener su width y height especificado, con el fin de adaptarse a diferentes escenarios. Dado que los hijos se definen mediante IgcRowIsland plantillas, esto significa que todos los hijos en el mismo nivel e isla tendrán la misma width propiedad y height aplicada a ellos.

Width

El width para los hijos no se comporta de manera muy diferente a sí IgcHierarchicalGridComponent mismo, ya que cada cuadrícula hija también es una instancia de IgcHierarchicalGridComponent.

La única diferencia es que el usuario no puede cambiar el elemento primario de la cuadrícula secundaria. Es por eso que cuando el width se establece en porcentajes, el 100% ancho asignado para el elemento secundario es menor que el de la cuadrícula width principal. Esto es para que sea más fácil distinguir cuando se expande. En la siguiente imagen se muestran los tamaños de cuadrícula secundarios predeterminados, ya que el valor predeterminado es 100% width.

Height

El height de cada niño en el IgcHierarchicalGridComponent se comporta también de manera similar al height de la cuadrícula de nivel raíz.

La diferencia es que para la cuadrícula secundaria, cuando height se establece en porcentajes, se comporta como si el elemento principal tuviera una altura no establecida. Esto significa que, en este escenario, la cuadrícula representará un máximo de 10 filas. Cuando el número de filas de los datos es inferior a 10, la cuadrícula ajustará el tamaño del área de vista para que se ajuste a todas las filas. Si los datos tienen más filas, se representará una barra de desplazamiento vertical y el área de vista se dimensionará a 10 filas de altura.

API References

IgcHierarchicalGridComponent

Additional Resources

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