Blazor Grid Remote Data Operations

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

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

    무한 스크롤

    끝점에서 청크 단위로 데이터를 가져와야 하는 시나리오에 널리 사용되는 디자인은 소위 무한 스크롤입니다. 데이터 그리드의 경우 최종 사용자가 맨 아래까지 스크롤할 때 트리거되는 로드된 데이터가 지속적으로 증가하는 것이 특징입니다. 다음 단락에서는 사용 가능한 API를 사용하여 무한 스크롤을 IgbGrid 쉽게 수행하는 방법을 설명합니다.

    무한 스크롤을 구현하려면 데이터를 청크로 가져와야 합니다. 이미 가져온 데이터는 로컬에 저장되어야 하며 청크의 길이와 청크 수를 결정해야 합니다. 또한 그리드에서 마지막으로 표시되는 데이터 행 인덱스를 추적해야 합니다. 이런 방식으로 StartIndex 및 ChunkSize 속성을 사용하면 사용자가 위로 스크롤하여 이미 가져온 데이터를 표시해야 하는지 아니면 아래로 스크롤하여 끝점에서 더 많은 데이터를 가져와야 하는지 결정할 수 있습니다.

    가장 먼저 할 일은 데이터의 첫 번째 청크를 가져오는 것입니다. TotalItemCount이 속성을 설정하면 그리드에서 스크롤 막대의 크기를 올바르게 조정할 수 있으므로 중요합니다.

    @code {
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var grid = this.grid;
                grid.IsLoading = true;
                double dataViewSize = 480.0 / 50.0;
                this.PageSize = Convert.ToInt32(Math.Floor(dataViewSize * 1.5));
                var data = await GetDataRemote(1, this.PageSize);
                this.CachedData = data;
                this.LocalData = this.CachedData;
                grid.TotalItemCount = (this.PageSize * this.Page) + 1;
                double pageCount = Math.Ceiling((double)this.TotalItems / (double)this.PageSize);
                this.TotalPageCount = (int)pageCount;
                grid.IsLoading = false;
                StateHasChanged();
            }

        }
}
razor

    또한 그리드가 현재 로드된 청크가 아닌 다른 청크를 표시하려고 할 때 그리드에 필요한 데이터를 제공할 수 있도록 출력을 구독 DataPreLoad 해야 합니다. 이벤트 처리기에서 새 데이터를 가져올지 아니면 이미 로컬에 캐시된 데이터를 반환할지 여부를 결정해야 합니다.

    <IgbGrid AutoGenerate="false"
         Height="480px"
         Name="grid"
         Id="grid"
         Data="LocalData"
         @ref="grid"
         DataPreLoad="OnDataPreLoad">
    <IgbColumn Name="ID"
               Field="ProductID"
               Header="ID">
    </IgbColumn>

    <IgbColumn Name="ProductName"
               Field="ProductName"
               Header="Product Name">
    </IgbColumn>

    <IgbColumn Name="QuantityPerUnit"
               Field="QuantityPerUnit"
               Header="Quantity Per Unit">
    </IgbColumn>

    <IgbColumn Name="UnitPrice"
               Field="UnitPrice"
               Header="Unit Price">
    </IgbColumn>

    <IgbColumn Name="OrderDate"
               Field="OrderDate"
               Header="Order Date">
    </IgbColumn>

    <IgbColumn Name="Discontinued"
               Field="Discontinued"
               Header="Discontinued">
    </IgbColumn>

</IgbGrid>
@code {
        private IgbGrid grid;
        public async void OnDataPreLoad(IgbForOfStateEventArgs e)
        {
            int chunkSize = (int)e.Detail.ChunkSize;
            int startIndex = (int)e.Detail.StartIndex;
            int totalCount = (int)this.grid.TotalItemCount;

            bool isLastChunk = totalCount == startIndex + chunkSize;
            // when last chunk reached load another page of data
            if (isLastChunk)
            {
                if (this.TotalPageCount == this.Page)
                {
                    this.LocalData = this.CachedData.Skip(startIndex).Take(chunkSize).ToList();
                    return;
                }

                // add next page of remote data to cache
                this.grid.IsLoading = true;
                this.Page++;
                var remoteData = await GetDataRemote(this.Page, this.PageSize);
                this.CachedData.AddRange(remoteData);

                var data = this.CachedData.Skip(startIndex).Take(chunkSize);
                this.LocalData = data.ToList();
                this.grid.IsLoading = false;
                this.grid.TotalItemCount = Math.Min(this.Page * this.PageSize, this.TotalItems);
            }
            else
            {
                var data = this.CachedData.Skip(startIndex).Take(chunkSize).ToList();
                this.LocalData = data;
            }
        }
}
razor

    무한 스크롤 데모

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    원격 페이징

    페이징 기능은 원격 데이터로 작동할 수 있습니다. 이를 시연하기 위해 먼저 데이터 가져오기를 담당할 서비스를 선언하겠습니다. 페이지 수를 계산하려면 모든 데이터 항목의 수가 필요합니다. 이 로직은 우리 서비스에 추가될 예정입니다.

    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

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

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

        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

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

    그리드 원격 페이징 데모

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    알려진 문제 및 제한 사항

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

    API 참조

    추가 리소스

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