Web Components 그리드 원격 데이터 운영

By default, the IgcGridComponent uses its own logic for performing data operations.

이러한 작업은 원격으로 수행하고, 특정 입력과 이벤트를 활용하여 데이터를IgcGridComponent 제공할 수 있습니다.IgcGridComponent

Infinite Scroll

A popular design for scenarios requiring fetching data by chunks from an end-point is the so-called infinite scroll. For data grids, it is characterized by continuous increase of the loaded data triggered by the end-user scrolling all the way to the bottom. The next paragraphs explain how you can use the available API to easily achieve infinite scrolling in IgcGridComponent.

To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the StartIndex and ChunkSize properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point.

The first thing to do is fetch the first chunk of the data. Setting the totalItemCount property is important, as it allows the grid to size its scrollbar correctly.

Additionally, you have to subscribe to the DataPreLoad output, so that you can provide the data needed by the grid when it tries to display a different chunk, rather than the currently loaded one. In the event handler, you have to determine whether to fetch new data or return data, that's already cached locally.

Infinite Scroll Demo

Remote Paging

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

export class RemotePagingService {
    public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
    constructor() {}

    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
        .then((result) => result.json())
        .catch((error) => console.error(error.message));
    }

    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
        let qS = "";
        if (baseUrl) {
                qS += `${baseUrl}`;
        }

        // Add pageIndex and size to the query string if they are defined
        if (pageIndex !== undefined) {
            qS += `?pageIndex=${pageIndex}`;
            if (pageSize !== undefined) {
                qS += `&size=${pageSize}`;
            }
        } else if (pageSize !== undefined) {
            qS += `?perPage=${pageSize}`;
        }

        return `${qS}`;
    }
}

After declaring the service, we need to create a component, which will be responsible for the IgcGridComponent construction and data subscription.

먼저 페이지와 페이지당 표시되는 레코드의 양을 변경할 때 원격 서비스가 올바른 양의 데이터를 가져올 수 있도록 관련 이벤트에 바인딩해야 합니다

  constructor() {
      this.grid = document.getElementById('grid') as IgcGridComponent;
      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;

      this._bind = () => {
        window.addEventListener("load", () => {
          this.loadData(this.page,this.perPage);
        });

        this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
          this.perPage = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);

        this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
          this.page = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);
      }

      this._bind();
  }

또한 데이터를 로드하는 방법을 설정하고 그에 따라 UI를 업데이트해야 합니다.

  private loadData(pageIndex?: number, pageSize?: number): void {
    this.grid.isLoading = true;

    RemotePagingService.getDataWithPaging(pageIndex,pageSize)
    .then((response: CustomersWithPageResponseModel) => {
      this.totalRecordsCount = response.totalRecordsCount;
      this.pager.perPage = pageSize;
      this.pager.totalRecords = this.totalRecordsCount;
      this.page = response.pageNumber;
      this.data = response.items;
      this.grid.isLoading = false;
      this.updateUI(); // Update the UI after receiving data
    })
    .catch((error) => {
      console.error(error.message);
      // Stop loading even if error occurs. Prevents endless loading
      this.grid.isLoading = false;
      this.updateUI();
    })
  }

    private updateUI(): void {
    if (this.grid && this.data) { // Check if grid and data are available
        this.grid.data = this.data;
    }
  }

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

Grid Remote Paging Demo

Known Issues and Limitations

그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:
행 선택
행 확장/축소
행 편집
행 고정

API References

Additional Resources

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