Web Components Virtualización y rendimiento de redes jerárquicas

En Ignite UI for Web Components, el IgcHierarchicalGridComponent control virtualiza su contenido tanto vertical como horizontalmente.

Web Components Ejemplo de virtualización y rendimiento de cuadrícula jerárquica

const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${URL}${qS}`;
}ts

import { IgcGridCreatedEventArgs, IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import { getData } from './RemoteService';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

export class Sample {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });

        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;
        getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
            hierarchicalGrid.isLoading = false;
            hierarchicalGrid.data = data;
            hierarchicalGrid.markForCheck();
        });
    }

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };

        context.grid.isLoading = true;

        getData(dataState).then((data: any[]) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
        });
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Sample | Ignite UI | Web Components | infragistics</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
  <link rel="stylesheet" href="/src/index.css" type="text/css" />

</head>

<body>
  <div id="root">
    <div class="container sample">
      <div class="container fill">

        <igc-hierarchical-grid id="hGrid" primary-key="customerId" height="600px">
          <igc-column field="customerId" hidden="true"></igc-column>
          <igc-column field="companyName" header="Company Name"></igc-column>
          <igc-column field="contactName" header="Contact Name"></igc-column>
          <igc-column field="contactTitle" header="Contact Title"></igc-column>
          <igc-column field="address.country" header="Country"></igc-column>
          <igc-column field="address.phone" header="Phone"></igc-column>
          
          <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId">
            <igc-column field="orderId" hidden="true"></igc-column>
            <igc-column field="shipAddress.country" header="Ship Country"></igc-column>
            <igc-column field="shipAddress.city" header="Ship City"></igc-column>
            <igc-column field="shipAddress.street" header="Ship Address"></igc-column>
            <igc-column field="orderDate" header="Order Date" data-type="date"></igc-column>

            <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId">
              <igc-column field="productId" hidden="true"></igc-column>
              <igc-column field="quantity" header="Quantity"></igc-column>
              <igc-column field="unitPrice" header="Unit Price"></igc-column>
              <igc-column field="discount" header="Discount"></igc-column>
            </igc-row-island>
          </igc-row-island>
        </igc-hierarchical-grid>

      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Habilitando la virtualización

Ahora IgcHierarchicalGridComponent optimiza el renderizado del DOM y el consumo de memoria al renderizar solo lo que está visible actualmente en el puerto de vista e intercambiar los datos mostrados mientras el usuario desplaza los datos horizontalmente/verticalmente. Los IgcHierarchicalGridComponent valores predeterminados y predeterminados width height habilitarán 100% 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 los IgcHierarchicalGridComponent y/o height, width lo null que significa que la dimensión relacionada estará determinada por el tamaño total de los elementos que contienen. 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 configurando la IgcHierarchicalGridComponent opción s columnWidth, que se aplicará a todas las columnas que no tengan establecido el ancho explícito.

En la mayoría de los casos, si se deja que la cuadrícula aplique su comportamiento predeterminado dejando las dimensiones sin establecer, se producirá el diseño deseado. Para los anchos de IgcHierarchicalGridComponent columna, se determina por el recuento de columnas, las columnas con ancho establecido y el ancho calculado del contenedor. La cuadrícula intentará encajar todas las columnas dentro del espacio disponible siempre que el ancho que intente asignar no sea inferior a 136 (px). En tales casos, las columnas con ancho sin asignar 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 es 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 contenedor de fila IgcHierarchicalGridComponent tiene un desbordamiento establecido en oculto. Cambia 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 jerárquica 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áles de los elementos deben estar en la vista cuando se desplaza a una ubicación aleatoria en el IgcHierarchicalGridComponent 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

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