계층적 Data Grid 개요 및 구성

Ignite UI for Blazor 계층적 데이터 그리드는 계층적 테이블 형식 데이터를 표시하고 조작하는 데 사용됩니다. 아주 적은 코드로 데이터를 빠르게 바인딩하거나 다양한 이벤트를 사용하여 다양한 동작을 사용자 지정할 수 있습니다. 이 구성 요소는 데이터 선택, Excel 스타일 필터링, 정렬, 페이징, 템플릿, 열 이동, 열 고정, Excel 및 CSV로 내보내기 등과 같은 다양한 기능을 제공합니다. 계층적 그리드는 플랫 그리드 컴포넌트를 기반으로 하며, 사용자가 부모 그리드의 행을 확장하거나 축소할 수 있도록 하여 기능을 확장하고, 더 자세한 정보가 필요할 때 해당 자식 그리드를 표시합니다.

Blazor Hierarchical Data Grid Example

이 Blazor 표 예제에서는 사용자가 계층적 데이터 집합을 시각화하고 셀 템플릿을 사용하여 다른 시각적 구성 요소를 추가하는 방법을 확인할 수 있습니다.

Getting Started with Ignite UI for Blazor Hierarchical Grid

Dependencies

Blazor 계층적 그리드를 시작하려면 먼저 Ignite UI for Blazor 패키지를 설치해야 합니다.

IgniteUI.Blazor 패키지 추가에 대한 다음 항목을 참조하십시오.

또한 응용 프로그램의 index.html 파일에 다음 CSS 링크를 포함하여 계층적 그리드에 필요한 스타일을 제공해야 합니다.

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

그런 다음 다음 네임스페이스를 추가하여 컨트롤 구현을 시작할 수 있습니다.

@using IgniteUI.Blazor.Controls

Component Modules

// in Program.cs file

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

Using the Blazor Hierarchical Data Grid

Data Binding

IgbHierarchicalGrid는 IgbGrid에서 파생되며 대부분의 기능을 공유합니다. 주요 차이점은 여러 수준의 계층 구조를 정의할 수 있다는 것입니다. IgbRowIsland 라는 IgbHierarchicalGrid 정의 내에서 별도의 태그를 통해 구성됩니다. IgbRowIsland 구성 요소는 특정 수준의 각 자식 그리드에 대한 구성을 정의합니다. 수준당 여러 행 고립영역도 지원됩니다. 계층적 그리드는 데이터에 바인딩하는 두 가지 방법을 지원합니다.

Using hierarchical data

애플리케이션이 전체 계층 데이터를 개체의 하위 배열을 참조하는 개체 배열로 로드하는 경우 계층 그리드는 이를 읽고 자동으로 바인딩하도록 구성할 수 있습니다. 다음은 적절하게 구조화된 계층적 데이터 원본의 예입니다.

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

각 IgbRowIsland는 자식 데이터를 보유하는 속성의 키를 지정해야 합니다.

<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

대부분의 응용 프로그램은 초기에 가능한 한 적은 데이터를 로드하도록 설계되어 로드 시간이 더 빨라집니다. 이러한 경우 사용자가 만든 서비스가 요청 시 데이터를 제공할 수 있도록 IgbHierarchicalGrid를 구성할 수 있습니다.

<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

행을 확장하기 전에 자식이 있는지 여부에 대한 정보를 제공하는 방법이 있는 경우 input 속성을 사용할 HasChildrenKey 수 있습니다. 이렇게 하면 데이터 개체에서 확장 표시기를 표시해야 하는지 여부를 나타내는 부울 속성을 제공할 수 있습니다.

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

속성을 설정할 HasChildrenKey 필요는 없습니다. 제공하지 않으면 각 행에 확장 표시기가 표시됩니다.

또한 머리글 확장/축소 표시기를 ShowExpandAll 표시하거나 숨기려면 속성을 사용할 수 있습니다. 이 UI는 성능상의 이유로 기본적으로 사용하지 않도록 설정되며, 대용량 데이터가 있는 그리드 또는 요청 시 로드가 있는 그리드에서는 사용하지 않는 것이 좋습니다.

특징

그리드 기능은 IgbRowIsland 태그를 통해 활성화하고 구성할 수 있으며, 생성된 모든 그리드에 적용됩니다. 행 섬 인스턴스를 통해 런타임에 옵션을 변경하면 생성된 각 그리드에 대해 옵션이 변경됩니다.

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

다음 그리드 기능은 그리드 수준별로 작동합니다. 즉, 각 그리드 인스턴스가 나머지 그리드와 독립적으로 해당 기능을 관리합니다.

정렬
필터링
페이징
다중 열 헤더
숨김
고정
움직이는
요약
찾다

Selection(선택) 및 Navigation(탐색) 기능은 전체 계층적 그리드(Hierarchical Grid)에 대해 전역적으로 작동합니다

선택 선택에서는 두 개의 서로 다른 하위 그리드에 대해 선택한 셀이 동시에 표시되는 것을 허용하지 않습니다.
탐색 위/아래로 탐색할 때 다음/이전 요소가 하위 그리드인 경우 관련 하위 그리드에서 탐색이 계속되며 관련 셀이 선택되고 초점이 맞춰진 것으로 표시됩니다. 하위 셀이 현재 표시되는 뷰 포트 외부에 있는 경우 선택한 셀이 항상 표시되도록 뷰로 스크롤됩니다.

Collapse All Button

계층적 그리드를 사용하면 사용자는 왼쪽 상단 모서리에 있는 "모두 축소" 버튼을 눌러 현재 확장된 모든 행을 편리하게 축소할 수 있습니다. 또한 다른 그리드를 포함하고 계층적 그리드 자체인 모든 하위 그리드에도 다음과 같은 버튼이 있습니다. 이 방법으로 사용자는 계층 구조에서 지정된 그리드만 축소할 수 있습니다.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 헤더 배경과 텍스트 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

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

그런 다음 해당 클래스에 대해--header-background 및--header-text-color CSS 속성을 설정합니다.

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

Demo

Known Limitations

한정	설명
그룹화 기준	그룹화 기준 기능은 계층형 그리드에서 지원되지 않습니다.

API References

HierarchicalGrid
RowIsland
IgbGrid
IgbColumn
IgbCell

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.