Blog Developers

Integration with Backend Services in Angular Grid

Zdravko Kolev / Monday, November 25, 2024

In modern web applications, efficiently managing large datasets is crucial for delivering optimal performance and great user experience. One of the best practices to achieve this is by implementing remote paging in your Web API, which allows clients to fetch only the required data on demand. In this article, then, we will explore how to extend your Web API to support remote paging capabilities and integrate it seamlessly with Ignite UI's igxGrid component or any other component that can consume remote data.

So, let’s get straight to the point to understand how all this works.

Why Extend the Web API Based on the OData Specification Best Practices?

From the code itself, you will notice that it covers several characteristics of OData. Particularly when it comes to handling query parameters for pagination and sorting. However, it also incorporates elements that extend beyond the traditional OData implementation.

Wondering why? OData (Open Data Protocol) is a standardized framework for building and consuming RESTful APIs, offering significant advantages like interoperability and standardization. By following OData specifications, different applications can communicate more effectively, which is extremely beneficial in enterprise settings where multiple systems interact.

Additionally, OData's rich querying capabilities enable clients to filter, sort, and paginate data without server-side modifications, enhancing flexibility. It supports various data sources and formats, such as JSON and XML, making it a versatile choice for diverse application requirements.

OData Specifics

By having separate endpoints (GetCustomersWithSkip and GetCustomersWithPage), the code implements different pagination styles (skip/top vs. page index/size). OData would typically offer a single unified endpoint that accepts its query parameters, providing a more standardized interface.

OData v3 exposes both separate requests for data and the total record count, as well as providing the total count within the same object result. Here are the relevant endpoints:

OData v4 continues this trend by providing the total records count as part of the same object result as well as through a separate request.

  • Fetching Data with Skip
  • System Query Options ($top and $skip) - You can use the following queries to control the number of results:

GET https://services.odata.org/TripPinRESTierService/People?$top=2
GET https://services.odata.org/TripPinRESTierService/People?$skip=18

For detailed information, refer to the OData v4 documentation.

The Difference Between Skip/Top Approach and Page Index/Size Approach

Understanding the difference between the skip/top and page index/size approaches is essential for implementing remote paging effectively.

Skip and Top

  • Skip: Number of records to skip before starting to fetch data.
  • Top: Maximum number of records to fetch.
  • Use Case: Best for scenarios where you want to control pagination explicitly without calculating total pages.

var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, skip: 10, top: 20, orderBy: "CustomerName asc");

Page Index and Size

  • Page Index: Indicates the current page of results (0-based).
  • Size: Specifies how many records to return per page.
  • Use Case: More intuitive for users as it naturally aligns with the concept of pages.

var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, pageIndex: 1, size: 20, orderBy: "CustomerName asc");

Extending the Service to Support OrderBy

To enhance your API, consider extending it to support the ordering of results. You can do it by adding an orderBy parameter to your requests, allowing clients to specify the fields and sorting directions. This flexibility can significantly improve user experience in data presentation.

Code Example:

[HttpGet("GetCustomersWithOrderBy")] 
public ActionResult<PagedResultDto<CustomerDto>> GetCustomersWithOrderBy( 
    [FromQuery][Attributes.SwaggerOrderByParameter] string? orderBy) 
{ 
    try 
    { 
        var customers = this.customerService.GetAllAsQueryable(); 
        var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(customers, orderBy: orderBy); 
        return Ok(pagedResult); 
    } 
    catch (Exception error) 
    { 
        logger.LogError(error.Message); 
        return StatusCode(500); 
    } 
}

Full code available here, view.

How Does Remote Paging Work in igxGrid?

First and foremost, Ignite UI is a complete library of hundreds of UI components for building high-performance, data-rich, and scalable web apps. It includes the fastest Angular Data Grid on the market, 120+ high-performance charts, and other exclusive controls and features, such as Hierarchical Grid, multi-row layout, advanced filtering, and more. For more information, you can compare our Angular components against those of other vendors.

The igxGrid component in Ignite UI is designed to work seamlessly with remote paging. It dynamically fetches data as users navigate through pages, ensuring that only the necessary records are loaded. This results in improved performance and a more responsive interface.

When configured properly, igxGrid will send requests for specific pages, utilizing either the skip/top or page index/size approach based on your API design.

Here’s more about remote paging in Ignite UI for Angular Grid.

component.ts

public ngAfterViewInit() {
    // Initialize Grid
    this.grid1.isLoading = true;
    this.data$ = this.northwindService.remoteData$;
    this.totalRecords$ = this.northwindService.dataLength$;

    // Load Grid data
    this.paginateGrid();

    this.data$.pipe(takeUntil(this.destroy$)).subscribe(() => {
      this.isLoading = false;
    });
...

public paginateGrid() {
    this.isLoading = true;
    const { skip, top } = this.calculatePagination(this.grid1.page, this._perPage);
    this.northwindService.getData(skip, top);
  }

private calculatePagination(page: number, perPage: number) {
    const skip = page * perPage;
    const top = perPage;
    return { skip, top };
  }

Here is the angular remote service.

You can also explore this Angular Paging Demo Application.

And check out our GitHub repository with the code.

How to Configure Grid Remote Paging in App Builder

There’s now a faster and more straightforward way to configure remote paging with App Builder. This is a cloud-based, low-code platform for building modern-day web apps. This drag & drop tool works as a single source of truth, bringing 60+ real UI components, ensuring seamless data binding, integrating a full design system – Indigo.Design, while speeding up the development time by 80%. Eliminating error-prone hand coding, App Builder is the only RAD tool on the market that generates clean, production-ready Angular, Blazor, Web Components, and React code in a click from Sketch and Figma design files or apps built from scratch.

Here’s how to configure remote paging in App Builder:

  • Select Remote Paging Mode: In your grid configuration, enable remote paging.
  • Set Up API Endpoints: Specify the endpoints for data retrieval and total record counts.
  • Define Query Parameters: Configure the query parameters for pagination, such as skip, top, pageIndex, and size.
  • Bind the Grid to Data: Connect the grid to the returned data context, ensuring it reflects the paginated data.

For visual guidance, refer to the documentation provided within the App Builder.

Conclusion

Integrating backend services with Ignite UI’s igxGrid for remote paging can significantly enhance the performance and usability of your web applications. By utilizing OData standards and properly configuring your Web API, you can create a seamless experience for users interacting with large datasets. This setup not only improves loading times but also provides flexibility in how data is accessed and displayed.

Ignite UI for Angular