OData

OData Backend Service to get data from a backend server with the help of OData.

Note

Use it when you need to support Pagination (that is when your dataset is rather large, more than 5k rows) with a OData endpoint. If your dataset is small (less than 5k rows), then go with a regular grid with the "dataset.bind" property. SlickGrid can easily handle million of rows using a DataView object, but personally when the dataset is known to be large, I usually use a backend service (OData or GraphQL) and when it's small I go with a regular grid.

Implementation

To connect a backend service into Angular-Slickgrid, you simply need to modify your gridOptions and add a declaration of onBackendEventApi and pass it the service. See below for the signature and an example further down below.

Demo

Demo Page / Demo Component

TypeScript Signature

onBackendEventApi: {
  onInit?: (query: string) => Promise<any> | Observable<any>;
  preProcess?: () => void;
  process: (query: string) => Promise<any> | Observable<any>;
  postProcess: (response: any) => void;
  service: BackendService;
  filterTypingDebounce?: number;
}

As you can see, you mainly need to define which service to use (GridODataService or GraphQLService) and finally add the process and postProcess callback.

App Module

Modify your app.module.ts to include the GridOdataService

import { AngularSlickgridModule, GridOdataService } from 'angular-slickgrid';
// ...

@NgModule({
  declarations: [
    AppComponent,
    // ...
  ],
  imports: [
    AppRoutingRoutingModule,
    // ...
    AngularSlickgridModule
  ],
  providers: [GridOdataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Grid Definition & call of onBackendEventApi

Notes

• Pagination is optional and if not defined, it will use what is set in the Angular-Slickgrid - Global Options
• onInit is optional and is there to initialize the grid with data on first page load (typically the same call as process)
  • you could load the grid yourself outside of the gridOptions which is why it's optional
• filterTypingDebounce is a timer (in milliseconds) that waits for user input pause before querying the backend server
  • this is meant to throttle the amount of requests sent to the backend (we don't really want to query every keystroke)
  • 700ms is the default when not provided

Code

import { Component, Injectable, OnInit } from '@angular/core';
import { GridOdataService } from 'angular-slickgrid';

@Injectable()

export class MyComponent implements OnInit {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  constructor(private http: HttpClient, private odataService: GridOdataService) {
    this.odataService.initOptions({
      caseType: CaseType.pascalCase,
      top: defaultPageSize
    });
  }
  ngOnInit(): void {
    this.columnDefinitions = [
      // your column definitions
    ];

    this.gridOptions = {
      enableFiltering: true,
      enablePagination: true,
      pagination: {
        pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
        pageSize: defaultPageSize,
        totalItems: 0
      },
      onBackendEventApi: {
        preProcess: () => this.displaySpinner(true),
        process: (query) => this.getCustomerApiCall(query),
        postProcess: (response) => {
          this.displaySpinner(false);
          this.getCustomerCallback(response);
        },
        filterTypingDebounce: 700,
        service: this.odataService
      }
    };
  }

  // Web API call
  getCustomerApiCall(odataQuery) {
    return this.http.get(`/api/getCustomers?${odataQuery}`).toPromise();
  }

UI Sample of the OData demo