-
-
Notifications
You must be signed in to change notification settings - Fork 19
OData
OData Backend Service (for Pagination purposes) to get data from a backend server with the help of OData.
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.
To connect a backend service into Aurelia-Slickgrid
, 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.
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.
- 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 asprocess
)- you could load the grid yourself outside of the
gridOptions
which is why it's optional
- you could load the grid yourself outside of the
-
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
import { autoinject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-http-client';
import { GridOdataService } from 'aurelia-slickgrid';
@autoinject()
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 Aurelia to do a dirty check, doing a clone object will do just that
this.gridOptions.pagination.totalItems = response.totalRecordCount;
this.gridOptions = Object.assign({}, this.gridOptions);
this.dataset = response.items as Customer[];
}
Contents
- Aurelia-Slickgrid Wiki
- Installation
- Styling
- Interfaces/Models
- Testing Patterns
- Column Functionalities
- Global Grid Options
- Localization
- Events
- Grid Functionalities
- Auto-Resize / Resizer Service
- Resize by Cell Content
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Column Picker
- Composite Editor Modal
- Context Menu
- Custom Tooltip
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid Menu
- Grid State & Presets
- Grouping & Aggregators
- Header Menu & Header Buttons
- Header Title Grouping
- Pinning (frozen) of Columns/Rows
- Row Colspan
- Row Detail
- Row Selection
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services