Blazor 계층적 그리드 원격 데이터 작업

기본적으로 는 IgbHierarchicalGrid 데이터 작업을 수행하기 위해 자체 논리를 사용합니다.

이러한 작업을 원격으로 수행하고 에 의해 노출되는 특정 입력 및 이벤트를 활용하여 결과 데이터를 에 IgbHierarchicalGrid 공급할 수 있습니다 IgbHierarchicalGrid.

Remote Paging

Blazor Server는 이미 원격 인스턴스이므로 다른 플랫폼의 데모와 달리 데이터가 이미 원격이므로 데이터에 대해 다른 원격 인스턴스를 설정할 필요가 없습니다. 원격 페이징을 수행하려면 데이터 클래스에 몇 가지 메소드를 설정하기만 하면 됩니다

        public Task<List<NwindDataItem>> GetData(int index, int perPage)
        {
            var itemsToReturn = items.Skip(index).Take(perPage).ToList();
            return Task.FromResult(itemsToReturn);
        }

        public Task<int> GetDataLength()
        {
            return Task.FromResult(items.Count);
        }
razor

서비스를 선언한 후 구성 및 데이터 구독을 담당할 구성 요소를 만들어야 합니다 IgbHierarchicalGrid.

먼저 그리드에 일부 데이터를 로드해야 합니다. 타이밍 문제를 피하기 위해 그리드가 렌더링된 후에 수행하는 것이 가장 좋습니다.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Paginate(0, PerPage);
            totalRecordsCount = await NwindDataService.GetDataLength();
            StateHasChanged();
        }
    }
razor

그런 다음 페이징 이벤트를 사용자 지정 메서드에 바인딩하기만 하면 원격 페이징이 설정됩니다.

<IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount"></IgbPaginator>

....

@code {
        private async void OnPerPageChange(IgbNumberEventArgs e)
    {
        PerPage = e.Detail;
        await Paginate(0, e.Detail);
    }

    private async void OnPageChange(IgbNumberEventArgs e)
    {
        await Paginate(e.Detail, PerPage);
    }
    ...
        private async Task Paginate(double page, double perPage)
    {
        this.page = page;
        double skip = this.page * PerPage;
        double top = PerPage;

        try
        {
            data = await NwindDataService.GetData(Convert.ToInt32(skip), Convert.ToInt32(perPage));
            isLoading = false;
            UpdateUI();
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error fetching data: {ex.Message}");
        }
    }
}
razor

자세한 내용은 아래에서 전체 데모를 확인하십시오.

Grid Remote Paging Demo

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.

Known Issues and Limitations

그리드에 PrimaryKey 설정되어 있지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃게 됩니다. 요청이 완료되었습니다:

행 선택
행 확장/축소
행 편집
행 고정

API References

Additional Resources

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