Hierarchical Data Grid Overview and Configuration

The Ignite UI for Blazor Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel and CSV, and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed.

Blazor Hierarchical Data Grid Example

In this Blazor grid example you can see how users can visualize hierarchical sets of data and use cell templating to add other visual components.

Getting Started with Ignite UI for Blazor Hierarchical Grid

Dependencies

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

Consulte estes tópicos sobre como adicionar o pacote IgniteUI.Blazor:

• Começando
• Adicionando o pacote Nuget

You also need to include the following CSS link in the index.html file of your application to provide the necessary styles to the hierarchical grid:

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

Depois, você pode começar a implementar o controle adicionando os seguintes namespaces:

@using IgniteUI.Blazor.Controls

Component Modules

// in Program.cs file

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

Using the Blazor Hierarchical Data Grid

Data Binding

The IgbHierarchicalGrid derives from IgbGrid and shares most of its functionality. The main difference is that it allows multiple levels of hierarchy to be defined. They are configured through a separate tag within the definition of IgbHierarchicalGrid, called IgbRowIsland. The IgbRowIsland component defines the configuration for each child grid for the particular level. Multiple row islands per level are also supported. The Hierarchical Grid supports two ways of binding to data:

Using hierarchical data

Se o aplicativo carregar todos os dados hierárquicos como uma matriz de objetos que fazem referência a matrizes filhas de objetos, a Grade Hierárquica poderá ser configurada para lê-los e vinculá-los automaticamente. Aqui está um exemplo de uma fonte de dados hierárquica estruturada corretamente:

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"
                    }
                }
            }
           }
        });
    }
}

Each IgbRowIsland should specify the key of the property that holds the children data.

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

[!NOTE] Note that instead of data the user configures only the childDataKey that the IgbHierarchicalGrid needs to read to set the data automatically.

Using Load-On-Demand

Most applications are designed to load as little data as possible initially, which results in faster load times. In such cases IgbHierarchicalGrid may be configured to allow user-created services to feed it with data on demand.

<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}`;
}

Hide/Show row expand indicators

If you have a way to provide information whether a row has children prior to its expanding, you could use the HasChildrenKey input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed.

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

Note that setting the HasChildrenKey property is not required. In case you don't provide it, expansion indicators will be displayed for each row.

Additionally if you wish to show/hide the header expand/collapse all indicator you can use the ShowExpandAll property. This UI is disabled by default for performance reasons and it is not recommended to enable it in grids with large data or grids with load on demand.

Características

The grid features could be enabled and configured through the IgbRowIsland markup - they get applied for every grid that is created for it. Changing options at runtime through the row island instance changes them for each of the grids it has spawned.

<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>

Os seguintes recursos de grade funcionam em um nível por grade, o que significa que cada instância de grade os gerencia independentemente do restante das grades:

• Classificação
• Filtragem
• Paginação
• Cabeçalhos de várias colunas
• Escondendo
• Fixação
• Movente
• Resumos
• Procurar

The Selection and Navigation features work globally for the whole Hierarchical Grid

• Seleção A seleção não permite que as células selecionadas estejam presentes para duas grades filho diferentes ao mesmo tempo.
• Navegação Ao navegar para cima/para baixo, se o elemento next/prev for uma grade filho, a navegação continuará na grade filho relacionada, marcando a célula relacionada como selecionada e focada. Se a célula filho estiver fora da porta de exibição visível atual, ela será rolada para a exibição para que a célula selecionada esteja sempre visível.

Collapse All Button

A grade hierárquica permite que os usuários recolham convenientemente todas as suas linhas atualmente expandidas pressionando o botão "Recolher tudo" no canto superior esquerdo. Além disso, cada grade filha que contém outras grades e é uma grade hierárquica em si, também possui esse botão - dessa forma, o usuário pode recolher apenas uma determinada grade na hierarquia:

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change the header background and text color, you need to set a class for the grid first:

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

Em seguida, defina as--header-background propriedades e--header-text-color CSS para essa classe:

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

Demo

Known Limitations

Limitação	Descrição
Agrupar por	O recurso Agrupar por não é suportado pela grade hierárquica.

API References

• IgbHierarchicalGrid
• IgbRowIsland
• IgbGrid
• IgbColumn
• Cell

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Blazor Fóruns
• Ignite UI for Blazor GitHub