Descripción general y configuración de la cuadrícula de árbol de Blazor

La cuadrícula de árbol Blazor es un componente de interfaz de usuario que combina la funcionalidad de una cuadrícula de datos (tabla) con una vista de árbol, lo que permite que los datos jerárquicos se muestren fácilmente en un formato tabular. A diferencia de una cuadrícula normal, una cuadrícula de árbol permite que las filas se expandan y contraigan, revelando filas secundarias anidadas debajo de filas principales, lo que la hace útil para representar datos estructurados como exploradores de archivos, organigramas, tareas de proyectos o categorías de productos.

Ignite UI for Blazor Tree Grid se utiliza para visualizar y manipular datos jerárquicos o planos con facilidad. 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 y movimiento de columnas. La visualización de datos tabulares nunca ha sido más fácil y atractiva gracias a la UI Tree Grid basada en Material Table.

Blazor Tree Grid Example

En este ejemplo, puede ver cómo los usuarios pueden manipular datos jerárquicos o planos. Hemos incluido opciones de filtrado y clasificación, fijación y ocultación, selección de filas, exportación a Excel y CSV.

Example

Getting Started with Ignite UI for Blazor Tree Grid

Dependencies

Comenzar con nuestra biblioteca Blazor Grid y Blazor Tree Grid en particular es el primer paso para crear aplicaciones potentes y ricas en datos que muestren información jerárquica de una manera clara e interactiva. La cuadrícula de árbol Blazor le permite presentar estructuras de datos primarios y secundarios en un formato tabular familiar, completo con características como expansión de filas, ordenación, filtrado, edición y virtualización para un alto rendimiento con conjuntos de datos grandes.

To get started with the Blazor tree grid, first you need to install the IgniteUI.Blazor package.

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

• Empezando
• Agregar paquete Nuget

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

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

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

@using IgniteUI.Blazor.Controls

Component Modules

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule));

Usage

La cuadrícula de árbol comparte muchas características con la cuadrícula, pero también agrega la capacidad de mostrar sus datos jerárquicamente. Para lograr esto, la cuadrícula de árbol nos proporciona un par de formas de definir las relaciones entre nuestros objetos de datos: usando una colección secundaria para cada objeto de datos o usando claves primarias y externas para cada objeto de datos.

Tree Cells

Independientemente de qué opción se utilice para construir la jerarquía de la cuadrícula de árbol (colección secundaria o claves primarias y externas), las filas de la cuadrícula de árbol se construyen con dos tipos de celdas:

• GridCell: celda ordinaria que contiene un valor.
• TreeGridCell: celda de árbol que contiene un valor, un indicador de expansión/contraer y un elemento div de sangría, que se basa en el nivel de la fila de la celda. Se puede acceder al nivel de un componente de fila a través de la propiedad de level de su treeRow interno.

[!Note] Each row can have only one tree cell, but it can have multiple (or none) ordinary cells.

Initial Expansion Depth

Inicialmente, la cuadrícula de árbol expandirá todos los niveles de nodo y los mostrará. Este comportamiento se puede configurar mediante la ExpansionDepth propiedad. De forma predeterminada, su valor es Infinito, lo que significa que todos los niveles de nodo se expandirán. Puede controlar la profundidad de expansión inicial estableciendo esta propiedad en un valor numérico. Por ejemplo, 0 mostrará solo los nodos de nivel raíz, 1 mostrará los nodos de nivel raíz y sus nodos secundarios, etc.

Child Collection

Cuando usamos la opción de colección secundaria, cada objeto de datos contiene una colección secundaria, que se rellena con elementos del mismo tipo que el objeto de datos principal. De esta manera, cada registro en la cuadrícula de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, la propiedad de datos de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección definida jerárquicamente.

Para este ejemplo, usemos la siguiente estructura de colección:

public class EmployeesNestedDataItem
{
    public double ID { get; set; }
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public List<EmployeesItem> Employees { get; set; }
}
public class EmployeesItem
{
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
}

Ahora comencemos importando nuestra Data colección y vinculándola a nuestra cuadrícula de árbol.

 <IgbTreeGrid
    AutoGenerate="false"
    ChildDataKey="Employees"
    Data="EmployeesNestedData"
    Name="treeGrid"
    @ref="treeGrid">
        <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="Age" DataType="GridColumnDataType.Number"> </IgbColumn>
</IgbTreeGrid>

Para que la cuadrícula de árbol construya la jerarquía, tendremos que establecer su ChildDataKey propiedad en el nombre de la colección secundaria que se usa en cada uno de nuestros objetos de datos. En nuestro caso, será la colección Employees. Además, podemos deshabilitar la generación automática de columnas y definirlas manualmente haciéndolas coincidir con las propiedades reales de nuestros objetos de datos. (La colección Employees se usará automáticamente para la jerarquía, por lo que no es necesario incluirla en las definiciones de las columnas).

Ahora podemos habilitar las funciones de selección de filas y paginación de la cuadrícula de árbol mediante y RowSelection agregar el IgbPaginator elemento. También podemos habilitar los resúmenes, las funciones de filtrado, clasificación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true HasSummary=true> </IgbColumn>
    <IgbPaginator></IgbPaginator>
</IgbTreeGrid>

Finalmente, podemos habilitar la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultar columnas, fijar columnas y exportar usando IgbGridToolbar, IgbGridToolbarHiding, IgbGridToolbarPinning e IgbGridToolbarExporter respectivamente.

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true > </IgbColumn>
    <IgbPaginator></IgbPaginator>
    <IgbGridToolbar>
        <IgbGridToolbarTitle> Employees </IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
            <IgbGridToolbarExporter></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

Puede ver el resultado del código de arriba al principio de este artículo en la sección Ejemplo de cuadrícula de árbol.

Primary and Foreign keys

Cuando utilizamos la opción de claves primarias y externas, cada objeto de datos contiene una clave primaria y una clave externa. La clave principal es el identificador único del objeto de datos actual y la clave externa es el identificador único de su objeto principal. En este caso, la propiedad data de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección plana.

public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

En los datos de ejemplo anteriores, todos los registros tienen un ID, un ParentID y algunas propiedades adicionales como Name, JobTitle y Age. Como se mencionó anteriormente, el ID de los registros debe ser único ya que será nuestro PrimaryKey. El ParentID contiene el ID del nodo principal y se puede establecer como un ForeignKey. Si una fila tiene un ParentID que no coincide con ninguna fila de la cuadrícula de árbol, significa que esta fila es una fila raíz.

La relación padre-hijo se configura mediante las propiedades y ForeignKey la cuadrícula de PrimaryKey árbol.

Aquí está la plantilla del componente que demuestra cómo configurar la cuadrícula de árbol para mostrar los datos definidos en la colección plana anterior:

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             Name="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number"></IgbColumn>
</IgbTreeGrid>

Además, habilitaremos la función de selección de filas de la cuadrícula de árbol mediante el uso de la propiedad rowSelection y también las funciones de filtrado, ordenación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
             Name="treeGrid"
             @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true> </IgbColumn>
</IgbTreeGrid>

Y aquí está el resultado final:

Persistence and Integration

La sangría de la celda de la cuadrícula de árbol persiste en otras entidades de cuadrícula de árbol, como el filtrado, la ordenación y la paginación.

• Cuando Sorting se aplica en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas de nivel raíz se ordenarán independientemente de sus respectivos elementos secundarios. Sus respectivas colecciones secundarias también se ordenarán de forma independiente, y así sucesivamente.
• La primera columna (la que tiene un VisibleIndex de 0) es siempre la columna del árbol.
• La columna que termina con un VisibleIndex de 0 después de operaciones como el anclaje de columnas, la ocultación de columnas y el movimiento de columnas se convierte en la columna de árbol.
• Las hojas de cálculo de Excel exportadas reflejan la jerarquía agrupando los registros tal como están agrupados en la propia cuadrícula de árbol. Todos los estados expandidos de los registros también se conservarán y reflejarán.
• Al exportar a CSV, los niveles y los estados expandidos se ignoran y todos los datos se exportan como planos.

Blazor Tree Grid Styling Configuration

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 algunos de los colores, primero debe establecer una clase para la cuadrícula:

<IgbTreeGrid Class="tree-grid">

Luego configure las propiedades CSS relacionadas para esa clase:

.tree-grid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}

API References

• IgbTreeGrid
• IgbColumn
• IgbGridToolbar
• IgbTreeGridRecord

Additional Resources

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

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub