Descripción general y configuración de la cuadrícula de datos jerárquica

    La Ignite UI for Blazor se utiliza para mostrar y manipular datos tabulares jerárquicos. Vincule rápidamente sus datos con muy poco código o utilice una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilo Excel, ordenación, paginación, creación de plantillas, movimiento de columnas, fijación de columnas, exportación a Excel y CSV, y más. La cuadrícula jerárquica se basa en el componente de cuadrícula plana y extiende su funcionalidad al permitir a los usuarios expandir o contraer las filas de la cuadrícula principal, revelando las cuadrículas secundarias correspondientes, cuando se necesita información más detallada.

    Ejemplo de cuadrícula de datos jerárquica Blazor

    En este ejemplo de cuadrícula Blazor puede ver cómo los usuarios pueden visualizar conjuntos jerárquicos de datos y usar plantillas de celdas para agregar otros componentes visuales.

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

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

    Introducción a Ignite UI for Blazor Hierarchical Grid

    dependencias

    Para comenzar a utilizar la cuadrícula jerárquica Blazor, primero debe instalar el paquete Blazor.

    Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor:

    También debe incluir el siguiente enlace CSS en el archivo index.html de la aplicación para proporcionar los estilos necesarios a la cuadrícula jerárquica:

    <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
    razor

    Luego, puede comenzar a implementar el control agregando los siguientes espacios de nombres:

    @using IgniteUI.Blazor.Controls
    razor

    Módulos de componentes

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule));
    razor

    Uso de la cuadrícula de datos jerárquica Blazor

    El enlace de datos

    IgbHierarchicalGrid se deriva de IgbGrid y comparte la mayor parte de su funcionalidad. La principal diferencia es que permite definir múltiples niveles de jerarquía. Se configuran a través de una etiqueta independiente dentro de la definición de IgbHierarchicalGrid, denominada IgbRowIsland. El componente IgbRowIsland define la configuración de cada cuadrícula secundaria para el nivel en particular. También se admiten varias islas de filas por nivel. La cuadrícula jerárquica admite dos formas de enlazar a los datos:

    Usando datos jerárquicos

    Si la aplicación carga todos los datos jerárquicos como una matriz de objetos que hacen referencia a matrices de objetos secundarios, entonces la cuadrícula jerárquica se puede configurar para leerlos y vincularlos automáticamente. A continuación se muestra un ejemplo de una fuente de datos jerárquica correctamente estructurada:

    public class SingersData : List<SingersDataItem>
    {
        public SingersData()
        {
            this.Add(new SingersDataItem()
            {
                Artist = "Naomí Yepes",
                Photo = "assets/images/hgrid/naomi.png",
                Debut = "2011",
                GrammyNomination = 6,
                GrammyAwards = 0,
                Tours = new List<ToursItem>() {
                new ToursItem() {
                    Tour = "Faithful Tour",
                    StartedOn = new DateTime(),
                    Location = "Worldwide",
                    Headliner = "NO",
                    TouredBy = "Naomí Yepes"
                }
               },
                Albums = new List<AlbumItem>() {
                new AlbumItem() {
                    Album = "Dream Driven",
                    LaunchDate = new DateTime(),
                    BillboardReview= "81",
                    Artist = "Naomí Yepes",
                    Songs = new List<SongItem>() {
                        new SongItem() {
                            Number = "1",
                            Title="Intro",
                            Released = "*",
                            Genre = "Rock",
                            Album ="Dream Driven"
                        }
                    }
                }
               }
            });
        }
    }
    razor

    Cada IgbRowIsland debe especificar la clave de la propiedad que contiene los datos secundarios.

    <IgbHierarchicalGrid Data="SingersData" AutoGenerate="true">
        <IgbRowIsland ChildDataKey="Tours" AutoGenerate="true"></IgbRowIsland>
        <IgbRowIsland ChildDataKey="Albums"AutoGenerate="true">
            <IgbRowIsland ChildDataKey="Songs" AutoGenerate="true"></IgbRowIsland>
        </IgbRowIsland>
    </IgbHierarchicalGrid>
    razor

    Tenga en cuenta que, en lugar de datos, el usuario configura solo childDataKey que IgbHierarchicalGrid necesita leer para establecer los datos automáticamente.

    Uso de carga bajo demanda

    La mayoría de las aplicaciones están diseñadas para cargar la menor cantidad de datos posible inicialmente, lo que se traduce en tiempos de carga más rápidos. En tales casos, IgbHierarchicalGrid se puede configurar para permitir que los servicios creados por el usuario lo alimenten con datos a petición.

    <IgbHierarchicalGrid Id="hGrid" AutoGenerate="true" PrimaryKey="customerId" Height="600px"
        RenderedScript="OnGridRendered">
        <IgbRowIsland ChildDataKey="Orders" PrimaryKey="orderId" AutoGenerate="true" GridCreatedScript="OnGridCreated">
            <IgbRowIsland ChildDataKey="Details" PrimaryKey="productId" AutoGenerate="true" GridCreatedScript="OnGridCreated"></IgbRowIsland>
        </IgbRowIsland>
    </IgbHierarchicalGrid>
    
    In JavaScript
    igRegisterScript("OnGridRendered", () => {
        const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
        grid.isLoading = true;
        getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
            (data) => {
                grid.isLoading = false;
                grid.data = data;
                grid.markForCheck();
            });
    }, false)
    
    igRegisterScript("OnGridCreated", (args) => {
        const context = args.detail;
        const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders";
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false,
          };
          context.grid.isLoading = true;
          getData(dataState).then((data) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
          });
    }, false)
    
    const DATA_URL = `https://data-northwind.indigo.design/`;
    
    function getData(dataState) {
        return fetch(buildUrl(dataState))
            .then((result) => result.json());
    }
    
    function buildUrl(dataState) {
        let qS = "";
        if (dataState) {
            if (dataState.rootLevel) {
                qS += `${dataState.key}`;
            } else {
                qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
            }
        }
        return `${DATA_URL}${qS}`;
    }
    razor

    Ocultar/Mostrar indicadores de expansión de fila

    Si tiene una manera de proporcionar información sobre si una fila tiene elementos secundarios antes de expandirse, puede usar la HasChildrenKey propiedad input. De esta manera, podría proporcionar una propiedad booleana de los objetos de datos que indique si se debe mostrar un indicador de expansión.

    <IgbHierarchicalGrid Data="data" PrimaryKey="ID" HasChildrenKey="hasChildren">
    </IgbHierarchicalGrid>
    razor

    Tenga en cuenta que no es necesario establecer la HasChildrenKey propiedad. En caso de que no lo proporcione, se mostrarán indicadores de expansión para cada fila.

    Además, si desea mostrar/ocultar el indicador de encabezado, expandir/contraer todo, puede usar la ShowExpandAll propiedad. Esta interfaz de usuario está deshabilitada de forma predeterminada por motivos de rendimiento y no se recomienda habilitarla en cuadrículas con datos grandes o cuadrículas con carga a petición.

    Características

    Las características de cuadrícula se pueden habilitar y configurar a través del marcado IgbRowIsland: se aplican a cada cuadrícula que se crea para ella. Al cambiar las opciones en tiempo de ejecución a través de la instancia de la isla de filas, se cambian para cada una de las cuadrículas que ha generado.

    <IgbHierarchicalGrid Data="localData" AutoGenerate="false"
        AllowFiltering="true" Height="600px" Width="800px">
        <IgbColumn Field="ID" Pinned="true" Filterable="true"></IgbColumn>
        <IgbColumnGroup Header="Information">
            <IgbColumn Field="ChildLevels"></IgbColumn>
            <IgbColumn Field="ProductName" HasSummary="true"></IgbColumn>
        </IgbColumnGroup>
        <IgbRowIsland ChildDataKey="childData" AutoGenerate="false" RowSelection="GridSelectionMode.Multiple">
            <IgbColumn Field="ID" HasSummary="true" DataType="number"></IgbColumn>
            <IgbColumnGroup Header="Information2">
                <IgbColumn Field="ChildLevels"></IgbColumn>
                <IgbColumn Field="ProductName"></IgbColumn>
            </IgbColumnGroup>
            <IgbPaginator PerPage="5"></IgbPaginator>
        <IgbRowIsland>
        <IgbPaginator></IgbPaginator>
    </IgbHierarchicalGrid>
    razor

    Las siguientes características de grid funcionan a nivel de grid, lo que significa que cada instancia de grid las administra independientemente del resto de grids:

    • Clasificación
    • Filtración
    • Paginación
    • Encabezados de varias columnas
    • Ocultación
    • Fijar
    • Moviente
    • resúmenes
    • Buscar

    Las funciones de selección y navegación funcionan globalmente para toda la cuadrícula jerárquica

    • Selección La selección no permite que las celdas seleccionadas estén presentes en dos cuadrículas secundarias diferentes a la vez.
    • Navegación Al navegar hacia arriba/abajo, si el elemento siguiente/anterior es una cuadrícula secundaria, la navegación continuará en la cuadrícula secundaria relacionada, marcando la celda relacionada como seleccionada y enfocada. Si la celda secundaria está fuera del puerto de visualización visible actual, se desplaza a la vista para que la celda seleccionada siempre esté visible.

    Botón Contraer Todo

    La cuadrícula jerárquica permite a los usuarios contraer convenientemente todas las filas actualmente expandidas presionando el botón "Contraer todo" en la esquina superior izquierda. Además, cada cuadrícula secundaria que contiene otras cuadrículas y es una cuadrícula jerárquica en sí misma, también tiene un botón de este tipo; de esta manera, el usuario puede contraer solo una cuadrícula determinada en la jerarquía:

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar el fondo del encabezado y el color del texto, primero debe configurar una clase para la cuadrícula:

     <IgbHierarchicalGrid Class="grid"></IgbHierarchicalGrid>
    razor

    Luego configure las propiedades CSS--header-background y--header-text-color para esa clase:

    .grid {
        --header-background: #494949;
        --header-text-color: #FFF;
    }
    css

    Manifestación

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Limitaciones conocidas

    Limitación Descripción
    Agrupar por La función Agrupar por no es compatible con la cuadrícula jerárquica.

    Referencias de API

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