OData

index

• TypeScript signature
• Usage
• OData v4

Description

OData Backend Service (for Pagination purposes) 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 Slickgrid-Universal, you simply need to modify your gridOptions and add a declaration of backendServiceApi and pass it the service. See below for the signature and an example further down below.

Demo

Demo Page / Demo ViewModel

TypeScript Signature

backendServiceApi: {
  // Backend Service instance (could be OData or GraphQL Service)
  service: BackendService;

  // add any options you might want to provide to the backend service
  options: OdataOption | GraphqlServiceOption;

  // On init (or on page load), what action to perform?
  onInit?: (query: string) => Promise<any>;

  // Before executing the query, what action to perform? For example, start a spinner
  preProcess?: () => void;

  // On Processing, we get the query back from the service, and we need to provide a Promise. For example: this.http.get(myGraphqlUrl)
  process: (query: string) => Promise<any>;

  // After executing the query, what action to perform? For example, stop the spinner
  postProcess: (response: any) => void;

  // Throttle the amount of requests sent to the backend. Default to 500ms
  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.

Grid Definition & call of backendServiceApi

Notes

• Pagination is optional and if not defined, it will use what is set in the Slickgrid-Universal - Global Options
• onInit is optional and is there to initialize (pre-populate) 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 { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';

export class Example {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  constructor(http) {
    this.http = http;

    // define the grid options & columns and then create the grid itself
    this.defineGrid();
  }

  defineGrid() {
    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
      },
      backendServiceApi: {
        service: new GridOdataService(),
        // define all the on Event callbacks
        options: {
          caseType: CaseType.pascalCase,
          top: defaultPageSize
        },
        preProcess: () => this.displaySpinner(true),
        process: (query) => this.getCustomerApiCall(query),
        postProcess: (response) => {
          this.displaySpinner(false);
          this.getCustomerCallback(response);
        }
      }
    };
  }

  // Web API call
  getCustomerApiCall(odataQuery) {
    // regular Http Client call
    return this.http.createRequest(`/api/customers?${odataQuery}`).asGet().send().then(response => response.content);
 
    // or with Fetch Client
    // return this.http.fetch(`/api/customers?${odataQuery}`).then(response => response.json());
  }

  getCustomerCallback(response) {
    // totalItems property needs to be filled for pagination to work correctly
    // however we need to force the Framework to do a dirty check, doing a clone object will do just that
    let countPropName = 'totalRecordCount'; // you can use "totalRecordCount" or any name or "odata.count" when "enableCount" is set
    if (this.isCountEnabled) {
      countPropName = (this.odataVersion === 4) ? '@odata.count' : 'odata.count';
    }
    if (this.metrics) {
      this.metrics.totalItemCount = data[countPropName];
    }

    // once pagination totalItems is filled, we can update the dataset
    this.sgb.paginationOptions.totalItems = data[countPropName];
    this.sgb.dataset = data.items as Customer[];
  }

OData v4

By default the OData version is set to 2 because it was implemented with that version. If you wish to use version 4, then just change the version: 4, there are subtle differences.

this.gridOptions = {      
  backendServiceApi: {
    service: new GridOdataService(),
      options: {
        enableCount: true, // add the count in the OData query, which will return a property named "odata.count" (v2) or "@odata.count" (v4)
        version: 4        // defaults to 2, the query string is slightly different between OData 2 and 4
      },
      process: (query) => this.getCustomerApiCall(query),
      postProcess: (response) => {
        this.metrics = response.metrics;
        this.displaySpinner(false);
        this.getCustomerCallback(response);
      }
  } as OdataServiceApi
};

UI Sample of the OData demo