📚
Slickgrid-Universal
Live DemoGitHubOther Frameworks
  • Introduction
  • Getting Started
    • Quick start
    • Salesforce (LWC)
    • Vanilla Installation
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header Menu & Header Buttons
    • Pagination
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Translate Service
    • with Single Locale
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Migrations
    • Migration Guide to 1.x (2021-12-11)
    • Migration Guide to 2.x (2022-10-17)
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
  1. Backend Services

Custom Backend Service

Previouswith Single LocaleNextOData

Last updated 1 year ago

Intro

The lib currently supports OData and GraphQL with built-in Services, if you want to use and create a different and Custom Backend Service, then follow the steps below.

Instructions

To create your own Custom Backend Service, I suggest you take the code of the and then rewrite the internal of each methods. The thing to remember is that you have to implement the BackendService as defined in the GraphqlService (export class GraphqlService implements BackendService).

You typically want to implement your service following these TypeScript interfaces

At the end of it, you'll have a Custom Backend Service that will be instantiated just like the GraphQL or OData that I've created, it should look similar to this (also note, try to avoid passing anything in the constructor of your Service to keep it usable by everyone)

class MyComponent {
  gridInit() {
    this.gridOptions = {
      backendServiceApi: {
        service: new YourCustomBackendService(),
        options: {
          // custom service options that extends "backendServiceOption" interface
        },
        preProcess: () => !this.isDataLoaded ? this.displaySpinner(true) : '',
        process: (query) => this.getCountries(query),
        postProcess: (result) => {
          this.displaySpinner(false);
          this.isDataLoaded = true;
        }
      } as YourCustomBackendServiceApi
    };
  }
}

If you need to reference your Service for other purposes then you better instantiated in a separate variable and then just pass it to the service property of the backendServiceApi.

class MyComponent {
  myCustomService = new YourCustomBackendService();

  gridInit {
    this.gridOptions = {
        backendServiceApi: {
          service: this.myCustomService,
          // ...
        } as YourCustomBackendServiceApi
    };
  }
}

If your Service is for a well known DB or API framework, then it might be possible to add your Service to the lib itself, however it should be added to the new monorepo lib in the list of . Since that is a monorepo lib, users will have the ability to use and download only the package they need.

GraphqlService
backendService.interface.ts
backendServiceApi.interface.ts
backendServiceOption.interface.ts
Slickgrid-Universal
slickgrid-universal/packages