계층적 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 계층형 그리드를 시작하려면 먼저 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

데이터 바인딩

​IgbHierarchicalGrid는 IgbGrid에서 파생되었으며 대부분의 기능을 공유합니다. 주요 차이점은 여러 계층 구조를 정의할 수 있다는 점입니다. 이들은 IgbHierarchicalGrid 정의 내의 별도의 태그인 IgbRowIsland를 통해 구성됩니다. 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

​data사용자가 IgbHierarchicalGrid가 읽어야 할 데이터childDataKey만 자동으로 설정하는 대신 설정하는 것이 중요합니다.

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

행이 확장되기 전에 자식이 있는지 정보를 제공할 수 있는 방법이 있다면, 입력 속성을 사용할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)에 대해 전역적으로 작동합니다

• 선택 선택에서는 두 개의 서로 다른 하위 그리드에 대해 선택한 셀이 동시에 표시되는 것을 허용하지 않습니다.
• 탐색 탐색 ↑ + ↓ 할 때 next/prev 요소가 자식 그리드인 경우 탐색은 관련 자식 그리드에서 계속되어 관련 셀을 선택되고 포커스가 있는 것으로 표시됩니다. 하위 셀이 현재 표시되는 뷰 포트 외부에 있으면 선택한 셀이 항상 표시되도록 스크롤됩니다.

Collapse All Button

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

Styling

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

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

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

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

Demo

Known Limitations

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

API References

• IgbHierarchicalGrid
• IgbRowIsland
• IgbGrid
• IgbColumn
• Cell

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

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브