Migration from 1.x to 2.x

Migration Changes Guide from version 1.x to 2.x

Services

• Aurelia-Slickgrid Services are no longer Singleton and are no longer available as Dependency Injection (DI) anymore, they are instead available in the Aurelia Grid Instance that can be obtained by the onAureliaGridCreated Event Aggregator (or Event Dispatch)
  • not finalized, we will see when we get there (discussion is all in #36 )
• GridExtraService got renamed to GridService
• GroupingAndColspanService got renamed to GroupingService
• ControlAndPluginService got renamed to PluginService
  • not finalized this might end up being split into 2 Services
• GridExtraUtil no longer exist, it was containing only 1 function getColumnDefinitionAndData() that got moved into the GridService and renamed to getColumnFromEventArguments

Column Definitions

• all the Editors options were previously passed through the generic params property. To bring more TypeScript Types, all of these options got moved into the editor options (see below)

Grid Options

• For consistencies, all Grid Menu showX flags were renamed to hideX to align with some of the SlickGrid hideX (see (below](/ghiscoding/aurelia-slickgrid/wiki/Migration-from-1.x-to-2.x#grid-menu-showx-renamed-to-hidex))
• exportWithFormatter is no longer available directly in the Grid Options, it is now under exportOptions Grid Options (see below)
• add i18n directly into the Grid Options instead of using the generic params (see below)

Filters

• Select Filter (FilterType.select) with selectOptions got renamed to collection (see below)
• previously we had searchTerms (array) and searchTerm (singular), but the latter searchTerm was dropped in favor of using only searchTerms to remove duplicate logic code (see below).

Backend Service API

• For BackendServiceApi, the service property now as to contain a new instance of the Backend Service that you want to use (GraphqlService or GridOdataService). See explanation below
• All 3 onX service methods were renamed to processOnX to remove confusion with onX Event Emitters with the same names. (see below)
  • this will probably not concern you, unless you built your own custom Backend Service API
• BackendService method initOptions got removed and replaced by init which has a different argument signature

@deprecated code removed

• removed onBackendEventApi which was replaced by backendServiceApi
• removed Select Filter selectOptions, replaced by collection
• removed FormElementType which was replaced by FilterType
• removed initOptions function from backendServiceApi, which was replaced by init with a different signature

Code Refactoring Samples & Extra Explanations

Backend Service API - service with new

export class MyGrid {
-  constructor(private graphqlService: GraphqlService, private i18n: I18N) {
+  constructor(private i18n: I18N) {
  }
    this.gridOptions = {
      backendServiceApi: {
-        service: this.graphqlService,
+        service: new GraphqlService(),
        preProcess: () => this.displaySpinner(true),
        process: (query) => this.getCustomerApiCall(query),
        postProcess: (result: GraphqlResult) => this.displaySpinner(false)
      },
      params: {
        i18: this.translate
      }
    };

exportWithFormatter flag

Previously available directly in the grid options but is now accessible only from the exportOptions property

this.gridOptions = {
-  exportWithFormatter: true
  exportOptions: {
+    exportWithFormatter: false,
  }
};

i18n now directly in Grid Options

this.gridOptions = {
  enableTranslate: true,
-  params: {
-    i18n: this.translate
-  },
+  i18n: this.translate,
};

SingleSelect & MultipleSelect Filters, selectOptions removed

This was already renamed long time ago but was still available. It is now removed, if you have any references simply change selectOptions to collection

// column definitions
this.columnDefinitions = [
  { 
     id: 'isActive', name: 'Is Active', field: 'isActive', 
     type: FieldType.boolean,
     filterable: true,
     filter: {
-       selectOptions: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ],
+       collection: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ],
       type: FilterType.multipleSelect,
       searchTerms: [], // default selection
     }
  }
];

Filter searchTerm removed in favor of an array of searchTerms

If you used the singular searchTerm in your project, simply change it to an array of searchTerms, for example

// column definitions
this.columnDefinitions = [
  { 
     id: 'isActive', name: 'Is Active', field: 'isActive', 
     type: FieldType.boolean,
     filterable: true,
     filter: {
       collection: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ],
       type: FilterType.multipleSelect,
-       searchTerm: true, // default selection
+       searchTerms: [true], // default selection
     }
  }
];

Grid Menu showX renamed to hideX

Since these flags are now inverse, please do not forget to also inverse your boolean value. Here is the entire list

• showClearAllFiltersCommand renamed to hideClearAllFiltersCommand
• showClearAllSortingCommand renamed to hideClearAllSortingCommand
• showExportCsvCommand renamed to hideExportCsvCommand
• showExportTextDelimitedCommand renamed to hideExportTextDelimitedCommand
• showRefreshDatasetCommand renamed to hideRefreshDatasetCommand
• showToggleFilterCommand renamed to hideToggleFilterCommand

Backend Service onX methods renamed to processOnX

Here is the entire list

• onFilterChanged was renamed to processOnFilterChanged
• onPaginationChanged was renamed to processOnPaginationChanged
• onSortChanged was renamed to processOnSortChanged