계층적 그리드 로드 온디맨드

    Ignite UI for Blazor IgbHierarchicalGrid 서버에서 최소한의 데이터만 검색하여 요청함으로써 빠른 렌더링을 허용하여 사용자가 결과를 뷰에서 보고 가능한 한 빨리 표시되는 데이터와 상호 작용할 수 있도록 합니다. 처음에는 루트 그리드의 데이터만 검색하여 렌더링하고, 사용자가 자식 그리드가 포함된 행을 확장한 후에만 해당 자식 그리드에 대한 데이터를 수신합니다. 이 메커니즘은 Load on Demand라고도 하며, 모든 원격 데이터와 작동하도록 쉽게 구성할 수 있습니다.

    이 항목에서는 이미 사용 가능한 원격 서비스와 통신하는 원격 서비스 공급자를 만들어 요청 시 로드를 구성하는 방법을 보여 줍니다. 다음은 작업 데모이며 나중에 단계별로 살펴보고 생성 과정을 설명합니다.

    Blazor Hierarchical Grid Load On Demand Example

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Remote Service Provider

    먼저 계층적 그리드에 필요한 데이터를 얻을 수 있도록 서비스 공급자를 준비합니다.

    기본 데이터 가져오기

    브라우저가 제공하는 전역 기능을 사용하여 fetch() HTTP 프로토콜을 통해 백엔드 서비스와 통신할 것입니다. 그렇게하면 데이터를 얻으려면 서비스에서 다음과 같은 간단한 방법이 필요합니다.

    function getData(dataState) {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}
razor

    보시다시피 buildUrl() 우리가받은 데이터를 기반으로 URL을 생성하는 방법이 될 것입니다. Promise는 비동기적으로 실행되기 때문에 반환합니다. 그렇게하면 나중에 구독하고 응용 프로그램에서 추가로 처리하여 그리드에 전달할 수 있습니다.

    요청 URL 작성

    다음으로 GET 요청에 대한 URL을 작성하는 방법을 정의합니다. 여기에서 기본 그리드에 대한 데이터뿐만 아니라 그 안의 모든 자식 그리드에 대한 데이터도 얻을 수 있습니다. 우리는 사용할 것입니다 Customers 데이터 출처 여기 루트 수준과 사용을 위해 Orders 그리고 Details 낮은 수준의 경우. 모델은 응용 프로그램마다 다르지만 다음 모델을 사용합니다.

    가장 먼저 필요한 것은 원하는 그리드에 대한 데이터를 가져올 위치, 상위 행의 기본 키 및 고유 ID를 결정하는 테이블입니다 key.

    우리는 이 모든 것을 객체에서 dataState 정의할 것입니다. 예를 들면 다음과 같습니다.

    const dataState: {
    key: string;
    parentID: any;
    parentKey: string;
    rootLevel: boolean;
} = {
    //...
};

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

    결과

    마지막으로 원격 서비스는 다음과 같습니다.

    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

    Hierarchical Grid Setup

    다음으로 계층적 그리드를 설정하고 이를 원격 서비스 공급자에 연결하겠습니다.

    템플릿 정의

    먼저 우리는 우리가 기대하는 계층 수준으로 계층적 그리드 템플릿을 정의할 것입니다. 우리는 고객에 대한 루트 그리드 PrimaryKey가 customerId 첫 번째 수준의 orderId 주문과 주문 세부 정보에 대한 주문이라는 것을 알고 있습니다 productId. 각 데이터베이스 테이블과 해당 키를 알면 초기 템플릿을 정의할 수 있습니다.

    <IgbHierarchicalGrid Id="hGrid" PrimaryKey="customerId" Height="600px">
    <IgbColumn Field="customerId" Hidden="true"></IgbColumn>
    <IgbColumn Field="companyName" Header="Company Name"></IgbColumn>
    <IgbColumn Field="contactName" Header="Contact Name"></IgbColumn>
    <IgbColumn Field="contactTitle" Header="Contact Title"></IgbColumn>
    <IgbColumn Field="address.country" Header="Country"></IgbColumn>
    <IgbColumn Field="address.phone" Header="Phone"></IgbColumn>
    <IgbRowIsland ChildDataKey="Orders" PrimaryKey="orderId">
        <IgbColumn Field="orderId" Hidden="true"></IgbColumn>
        <IgbColumn Field="shipAddress.country" Header="Ship Country"></IgbColumn>
        <IgbColumn Field="shipAddress.city" Header="Ship City"></IgbColumn>
        <IgbColumn Field="shipAddress.street" Header="Ship Address"></IgbColumn>
        <IgbColumn Field="orderDate" Header="Order Date" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbRowIsland ChildDataKey="Details" PrimaryKey="productId">
            <IgbColumn Field="productId" Hidden="true"></IgbColumn>
            <IgbColumn Field="quantity" Header="Quantity"></IgbColumn>
            <IgbColumn Field="unitPrice" Header="Unit Price"></IgbColumn>
            <IgbColumn Field="discount" Header="Discount"></IgbColumn>
        </IgbRowIsland>
    </IgbRowIsland>
</IgbHierarchicalGrid>
razor

    하지만 템플릿에는 한 가지 빠진 것이 있는데, 그것은 루트 수준 계층적 그리드에 대한 데이터이며, 결국 그 자식입니다.

    참조를 사용할 Id="hGrid" 수 있으므로 나중에 코드의 서비스에서 데이터를 가져온 후 루트 그리드의 데이터를 쉽게 설정할 것입니다.

    확장된 자식에 대한 데이터를 설정하는 것은 약간 다릅니다. 행이 처음으로 확장되면 새 자식 IgbHierarchicalGrid이 렌더링되고 새로 생성된 그리드에 대한 참조를 가져와 데이터를 설정해야 합니다. 따라서 각 IgbRowIsland 구성 요소는 해당 특정 행 아일랜드에 대해 새 자식 그리드가 생성될 때 발생하는 이벤트를 제공합니다 GridCreated. 이를 사용하여 새 그리드에 필요한 참조를 가져오고, 서비스에서 해당 데이터를 요청하고, 적용할 수 있습니다.

    루트 수준, 행 아일랜드의 키, 상위 행의 기본 키 및 고유 식별자인 경우에만 정보가 필요하도록 서비스를 구축했기 때문에 모든 행 아일랜드에 대해 하나의 방법을 사용할 수 있습니다. 이 모든 정보는 이벤트 인수에서 직접 액세스하거나 이벤트 트리거를 담당하는 행 아일랜드에서 액세스할 수 있습니다.

    사용할 OnGridCreated 메서드의 이름을 지정해 보겠습니다.

    이벤트는 GridCreated 속성, 행 island as owner에 대한 참조 및 새 자식 grid 속성을 제공하기 parentID 때문에 첫 번째 인수로 전달됩니다. 부모 행 primaryKey에 대한 정보만 누락되었지만 행 아일랜드 ChildDataKey를 기반으로 쉽게 확인할 수 있습니다.

    이러한 변경 내용이 추가된 템플릿 파일은 다음과 같습니다.

    <IgbHierarchicalGrid Id="hGrid" PrimaryKey="customerId" Height="600px">
    <IgbColumn Field="customerId" Hidden="true"></IgbColumn>
    <IgbColumn Field="companyName" Header="Company Name"></IgbColumn>
    <IgbColumn Field="contactName" Header="Contact Name"></IgbColumn>
    <IgbColumn Field="contactTitle" Header="Contact Title"></IgbColumn>
    <IgbColumn Field="address.country" Header="Country"></IgbColumn>
    <IgbColumn Field="address.phone" Header="Phone"></IgbColumn>
    <IgbRowIsland ChildDataKey="Orders" PrimaryKey="orderId" GridCreatedScript="OnGridCreated">
        <IgbColumn Field="orderId" Hidden="true"></IgbColumn>
        <IgbColumn Field="shipAddress.country" Header="Ship Country"></IgbColumn>
        <IgbColumn Field="shipAddress.city" Header="Ship City"></IgbColumn>
        <IgbColumn Field="shipAddress.street" Header="Ship Address"></IgbColumn>
        <IgbColumn Field="orderDate" Header="Order Date" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbRowIsland ChildDataKey="Details" PrimaryKey="productId" GridCreatedScript="OnGridCreated">
            <IgbColumn Field="productId" Hidden="true"></IgbColumn>
            <IgbColumn Field="quantity" Header="Quantity"></IgbColumn>
            <IgbColumn Field="unitPrice" Header="Unit Price"></IgbColumn>
            <IgbColumn Field="discount" Header="Discount"></IgbColumn>
        </IgbRowIsland>
    </IgbRowIsland>
</IgbHierarchicalGrid>
razor

    우리 서비스 연결하기

    이제 마지막 단계 중 하나는 이전에 만든 서비스를 계층적 그리드에 연결하는 것입니다.

    데이터를 설정하기 위해 루트 그리드에 대한 참조를 얻을 것입니다. 서비스에서 데이터를 요청하고 할당하기 전에 그리드가 렌더링되었는지 확인하기 위해 이벤트를 사용합니다 Rendered. 부모가 없기 때문에 우리는 그것이 rootLevel​ ​사실 이고 그것의 getData 열쇠를 우리의 서비스에 전달할 수 있습니다. Promise를 반환하므로 구독해야 합니다.

    igRegisterScript("OnGridRendered", () => {
    const grid = document.getElementById("hGrid");

    getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
        (data) => {
            grid.data = data;
            grid.markForCheck();
        });
}, false)
razor

    다음으로, 생성된 새 자식 그리드에 대한 데이터를 요청하는 메서드만 만들 OnGridCreated 면 됩니다.

    루트 수준 그리드 데이터를 가져오는 것과 비슷하며, 이번에는 and parentKey와 같은 parentID 더 많은 정보를 전달해야 합니다. rootLevel 모든 자식에 대해 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,
    };

    getData(dataState).then((data) => {
        context.grid.data = data;
        context.grid.markForCheck();
    });
}, false)
razor

    이것으로 응용 프로그램 설정이 거의 완료되었습니다. 이 마지막 단계는 사용자에게 데이터가 계속 로드 중임을 알려 사용자 경험을 개선하는 것을 목표로 하므로 그 동안 빈 그리드를 볼 필요가 없습니다. 그렇기 때문에 그리드가 IgbHierarchicalGrid 비어 있는 동안 표시할 수 있는 로딩 표시기를 지원합니다. 새 데이터가 수신되면 로딩 표시기가 숨겨지고 데이터가 렌더링됩니다.

    로딩 표시 설정

    이 IgbHierarchicalGrid를 설정하여 로딩 표시기를 표시할 수 있습니다. IsLoading 속성을 참 데이터가 없는 동안. 처음에는 루트 그리드에 대해 설정해야 하며 새 자식 그리드를 만들 때도 데이터가 로드될 때까지 설정해야 합니다. 우리는 항상 그것을 설정할 수 있습니다. 참 템플릿에 있지만 서비스를 설정하여 서비스가 빈 배열을 반환하는 경우 그리드에 데이터가 없다는 것을 숨기고 표시하려고 합니다. 거짓.

    이 경우 구성의 최종 버전은 다음과 같습니다.

    igRegisterScript("OnGridRendered", () => {
    const grid = document.getElementById("hGrid");

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

    API References

    Additional Resources

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