Dimensionamiento de cuadrícula Angular

There are many different ways to size the IgxHierarchicalGrid in order to accommodate a lot of scenarios that the users can have. While some are straight forward, others might be more complex and that is why we will take each one and look into them in more depth. We will go through setting width and height separately since there are some differences e.g. when using percentages for each.

Cuando se trata del tamaño del borde y del relleno para IgxHierarchicalGrid, se tienen en cuenta en sus cálculos de tamaño de ancho/alto o también se conocen como tamaño del cuadro de borde. Se aplica en todos los escenarios.

Note

Si el usuario anula el tamaño del cuadro de borde, no podemos garantizar que IgxHierarchicalGrid tenga el tamaño correcto.

Width

If the width input does not have value assigned, its default value is 100% and the IgxHierarchicalGrid tries to fill the available space. You can check how the grid reacts to it in the Percentages section.

Note

Setting manually the width style of the IgxHierarchicalGrid itself will result in an unexpected behavior.

Null

La cuadrículawidth puede aceptar un valor denull, que al estar activado, renderiza todas las columnas del DOM. La cuadrícula se dimensiona en consecuencia, de modo que no hay barra de desplazamiento horizontal de cuadrícula, ya que no se aplica virtualización de columnas.

• Si hay 6 columnas y ninguna tiene ancho definido, la cuadrícula tendráwidth de816px, porque cada columna por defecto ha asignadowidth a de136px en este escenario. Lo mismo ocurrirá si las columnas tienenwidth porcentajes. Si se renderiza la barra de desplazamiento vertical o hay características que renderizan columnas adicionales, también se añadirá su anchura.

  

• Si hay 6 columnas con el ancho de columna configurado a200px, cabrán en nuestra ventana y todas serán visibles:

  

• Si hay más columnas o otras de mayor ancho que salen de la vista del navegador, todas seguirán renderizándose. Pongamos la misma cantidad de columnas pero cada una con un ancho de columna de300px. Como no todos caben en el área de vista del navegador, se creará una barra de desplazamiento de forma nativa. El siguiente ejemplo muestra exactamente este escenario:

  

• Si la cuadrícula tiene un elemento padre de cualquier tipo y no tiene ningún overflow activado, seguirá mostrando todas las columnas visibles. De lo contrario, si el elemento padre tiene desbordamientoauto oscroll se renderizará nativamente una barra de desplazamiento para ese elemento padre. El padre tiene mayor altura para facilitar la visualización en el siguiente ejemplo.

  

Note

Debido a este comportamiento, si los datos de la cuadrícula contienen demasiadas columnas, podría tener un impacto significativo en el rendimiento del navegador, ya que todas las columnas se representarían sin virtualización.

Pixels

When the IgxHierarchicalGrid width input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content:

• Cuando el ancho se establece en píxeles para que la cuadrícula muestre la barra de desplazamiento horizontal, su ancho de contenido debe superar la cuadrículawidth especificada. Por ejemplo, pongamos que el ancho combinado de las columnas1200px se exceda. En este caso, se renderizará una barra de desplazamiento horizontal.

  

• For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to auto or scroll, it will render scrollbar natively. For example, if the parent has width set to 1000px and the IgxHierarchicalGrid width is still 1200px, it will look similar to the following illustrations:

  

Percentages

When the width of the IgxHierarchicalGrid is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the IgxHierarchicalGrid will size relative to the browser window.

• Por ejemplo, si configuramos la entrada de la cuadrículawidth en100% y no hay elemento padre, ocupará el 100% del ancho disponible de la ventana del navegador. Si se redimensiona, la cuadrícula también se ajustará en consecuencia.

  

• Si establecemos el ancho de la cuadrícula en100% y hay un elemento padre que tiene un ancho específico de1200px, esto significará que la cuadrícula tendrá un tamaño relativo a ese elemento y su ancho final será1200px.

  

• Si tenemos un elemento padre conwidth de1000px y tenemos las cuadrículaswidth configuradas en150%, el ancho calculado de la malla será1500px. En este caso, la cuadrícula seguirá renderizándose completamente visible, pero si activamosoverflow: auto el padre, ese padre renderizará la barra de desplazamiento por sí solo.

  

Height

By default if no height is defined for the IgxHierarchicalGrid, it will be set to 100%. You can check how the grid reacts depending on the DOM structure in the Percentages section.

Note

Setting manually the height style of the IgxHierarchicalGrid itself will result in an unexpected behavior.

Null

The IgxHierarchicalGrid height input can accept null value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.

• 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 padre con definidoheight, la cuadrícula seguirá renderizando todas las filas y no se verá afectada. Digamos que el padre o madre tieneheight de.650px Si tieneoverflow configurado enauto oscroll, se mostrará una barra de desplazamiento vertical pero la cuadrícula seguirá sin afectarse:

  

Note

Debido a este comportamiento, si los datos de la cuadrícula contienen demasiadas filas, podría tener un impacto significativo en el rendimiento del navegador, ya que todas las filas se representarían sin virtualización.

Pixels

Setting the IgxHierarchicalGrid height in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how width is set in pixels.

• Si establecemos, por ejemplo, la altura500px con 4 filas para nuestros datos, la cuadrícula se mantendrá a ese tamaño y, dado que 4 filas no son suficientes para llenar el área visible, se espera que haya algo de área vacía.

  

• Si el número de filas supera el área visible de la cuadrícula cuandoheight está configurado a píxeles, se renderizará una barra de desplazamiento vertical. Por ejemplo, una cuadrícula con500px altura fijada y 14 filas se renderizará de la siguiente manera:

  

• Si hay un elemento padre conheight definido, a menos que estéoverflow configurado comoauto oscroll, la cuadrícula seguirá siendo completamente visible. Si no, se mostrará una barra de desplazamiento.

  

Percentages

When the height input is set to percentages the IgxHierarchicalGrid will size based on the parent element height. If the parent element has its height set in pixels or percentages, the grid will size relative to the size of the parent.

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.

Pongamoswidth que el1200px elemento padre no tenga ningún tamaño aplicado:

• Si hay menos de 10 filas, la cuadrícula intentará ajustar todas las filas en el área visible sin tener 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.

  

• If we set the parent element height to 800px and the IgxHierarchicalGrid to 100% height this means that the grid will be sized to 100 percentages of 800px.

  

• If the IgxHierarchicalGrid height is set to a number bigger than 100% and the parent element has height, for the parent to render scrollbar it again needs to have overflow set to auto or scroll. Otherwise the grid will be fully visibly and size relative to the parent size.

  

• Si queremos que la cuadrícula tenga un tamaño desde100% la ventana del navegador, tendríamos que establecer tantobody la altura de los elementos de la cuadrícula como la de los padres100%. En este caso, el elemento padre puede dimensionarse y la cuadrícula se dimensionará en consecuencia si el navegador se redimensiona.

  

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

Por defecto, cuando una columna no tiene un ancho especificado, intentará autodimensionarse, para que se llene si hay espacio vacío disponible en el área de vista de cuadrícula. Las columnas de tamaño automático tienen un ancho mínimo de136px, así que si el área disponible es menor que136px para esa columna, por defecto será ese tamaño.

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.

• If a column does not have specified width and the IgxHierarchicalGrid has width set to null, it will be sized to the minimum of 136px. This means that for a grid with width null and 6 columns that don't have width, each column will be sized to 136px.

  

• Cuando hay varias columnas autodimensionadas, estas dividirán el espacio disponible entre sí por igual. Esto significa que si tenemos 6 columnas y hay un área vacía de1200px, cada una tendrá un tamaño a200px.

  

• Si hay espacio vacío disponible, de modo que cada columna con tamaño automático será menor,136px todas las columnas con tamaño automático se asignarán por defecto136px y la cuadrícula mostrará la barra de desplazamiento horizontal. En el siguiente ejemplo, pongamos 12 columnas autodimensionadas y la cuadrículawidth configurada en1000px.

  

• Si una columna no tienewidth especificado, pero todas las demás columnas tienen píxeleswidth o porcentajes, esa columna intentará también rellenar el espacio disponible. Por ejemplo, si no tenemos ancho fijado en la primera columna y los otros 5 tienenwidth of100px, el primero llenará el resto.

  

• Lo mismo aplica si nowidth se especifica varias columnas, todas dividirán el espacio disponible entre sí por igual. En la siguiente ilustración, la primera columna tienewidth configurada para100px.

  

Note

Las columnas destacadas, como la columna de la casilla de verificación del selector de filas, etc., llenan el espacio adicional que se tiene en cuenta al dimensionar automáticamente las columnas.

Pixels

When columns have set specific width in pixels, they stick to that size, unless they are resized manually. Since the combined width of the columns is static, it can be less than the IgxHierarchicalGrid width or exceed it.

• If the combined width of all columns is less than the IgxHierarchicalGrid width, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the IgxHierarchicalGrid. In the next example the columns have 150px width.

  

• If the combined width of all columns is bigger than the actual IgxHierarchicalGrid width, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of 300px and grid has width of 1200px, which means that the columns combined have excess of 600px that goes out of bounds.

  

Auto

Cuando las columnas se ajustan aauto su tamaño, se ajusta para que encaje en la palabra más larga de la columna. Es posible que haya zonas vacías si hay celdas con valores muy cortos, mientras que otras celdas tienen celdas muy largas. En este escenario, todas las celdas de la columna se ajustarían para tomar el ancho de la celda con el valor más largo.

Percentages

Cuando las columnas tienen porcentajes definidoswidth, 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 los píxeles, pero también proporciona respuesta a las columnas, lo que significa que cuando la cuadrícula se redimensiona, las columnas también se redimensionan en consecuencia.

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

  

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

  

• Si el ancho combinado supera100% el tamaño para que el usuario pueda ver las columnas fuera de la vista, se renderiza una barra de desplazamiento horizontal.

  

• Si las columnas están en porcentajes y la cuadrículawidth está configurada en ,null se aplicaríawidth a cada136px columna. Esto se debe a que las columnas no pueden dimensionarse relativamente a la cuadrícula, ya que nowidth tiene su tamaño propio y depende de que su contenido se dimensione cuandowidth lo estánull. En el siguiente ejemplo, las 6 columnas tienenwidth configurado a50%:

  

---

Child Grid Sizing

Because the IgxHierarchicalGrid usually contains children, they can also have their width and height specified, in order to accommodate different scenarios. Since the children are defined using row island template, this means that all children in the same level and island will have the same width and height property applied to them.

Width

The width for the children does not behave much different than the IgxHierarchicalGrid itself, since each child grid is instance of IgxHierarchicalGrid as well.

The only difference is that the user cannot change the parent element of the child grid. That's why when the width is set to percentages, the 100% width allocated for the child is smaller than the parent grid width. This is so that it is easier to distinguish when it is expanded. The following image displays the default child grid sizes, since it defaults to 100% width.

Height

The height of each child in the IgxHierarchicalGrid behaves also similarly to the height of the root level grid.

The difference is that for the child grid, when height is set to percentages, it behaves as if the parent element has unset height. This means that in this scenario, the grid will render maximum of 10 rows. When the number of rows in the data is less than 10, the grid will size the view area to fit all the rows. If the data has more rows, a vertical scrollbar will be rendered and the view area will be sized to 10 rows height.

---

Grid Cell Spacing Control

​IgxHierarchicalGrid adapta automáticamente su espaciado interno en función de la configuración de tamaño. Puede personalizar aún más el relleno y los márgenes en el encabezado de la cuadrícula y las celdas del cuerpo utilizando las propiedades personalizadas de CSS para el control del espaciado.

Global Grid Spacing

Para reducir o aumentar el espaciado en todas las celdas de cuadrícula de la aplicación:

/* Reduce all grid spacing by 20% */
igx-grid {
    --ig-spacing: 0.8;
}

/* Increase spacing for better touch accessibility */
igx-grid {
    --ig-spacing: 1.2;
}

Grid-Specific Spacing

Para ajustar el espaciado de una instancia de cuadrícula específica:

/* Make a particular grid more compact */
.my-compact-grid {
    --ig-spacing: 0.6;
}

/* Give a specific grid more breathing room */
.my-spacious-grid {
    --ig-spacing: 1.4;
}

Directional Spacing Control

Puede controlar el espaciado horizontal y vertical de forma independiente:

/* Reduce only horizontal spacing (left/right padding) */
.my-grid {
    --ig-spacing-inline: 0.5;
    --ig-spacing-block: 1.0; /* Keep vertical spacing normal */
}

/* Adjust vertical spacing for tighter row spacing */
.my-grid {
    --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */
    --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */
}

Size-Specific Spacing

Se pueden aplicar diferentes multiplicadores de espaciado en función de la densidad de visualización de la cuadrícula:

.my-grid {
    /* Compact density gets very tight spacing */
    --ig-spacing-small: 0.5;

    /* Medium density uses normal spacing */
    --ig-spacing-medium: 1.0;

    /* Comfortable density gets extra spacing */
    --ig-spacing-large: 1.3;
}

Header vs Body Cell Spacing

Aunque las propiedades de espaciado afectan tanto a las células del encabezado como del cuerpo, puede dirigirse a ellas específicamente si es necesario:

/* Reduce padding in header cells specifically */
.my-grid igx-grid-header {
    --ig-spacing: 0.7;
}

/* Adjust spacing in data cells */
.my-grid igx-grid-cell {
    --ig-spacing: 0.9;
}

Note

Estos ajustes de espaciado funcionan junto con la densidad de visualización de la cuadrícula. Los multiplicadores de espaciado se aplican a los valores de espaciado base que ya están determinados por si la cuadrícula está en modo de densidad compacta, acogedora o cómoda.

API References

• IgxHierarchicalGridComponent API_IgxGridRow API
• IgxHierarchicalGridComponent Styles

Additional Resources

• Descripción general de la cuadrícula jerárquica
• Virtualización y rendimiento

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub