OData

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

Implementation

To connect a backend service into Aurelia-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 ViewModel

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.

Grid Definition & call of onBackendEventApi

Notes

• Pagination is optional and if not defined, it will use what is set in the Aurelia-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 { inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-http-client';
import { GridOdataService } from 'aurelia-slickgrid';

@inject(HttpClient, GridOdataService)
export class Example {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];
  http;
  odataService;

  constructor(http, odataService) {
    this.http = http;
    this.odataService = odataService;

    // initialize some options, we can choose how the WebAPI will return it's value (camelCase or PascalCase)
    this.odataService.initOptions({
      caseType: CaseType.pascalCase,
      top: defaultPageSize
    });

    // 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
      },
      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.createRequest(`/api/getCustomers?${odataQuery}`).asGet().send();
  }

UI Sample of the OData demo