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 with the asg-on-aurelia-grid-created delegate binding (see below)
  • this is the biggest change, so please make sure to review the code sample below
• delegate binding asg-on-grid-created and asg-on-dataview-created still exists but it is now much easier to get the Slick Grid & DataView objects directly from the asg-on-aurelia-grid-created delegate binding (it's an all in 1 binding that includes Slick objects and Aurelia-Slickgrid Services)
• delegate binding asg-on-grid-state-service-changed renamed to asg-on-grid-state-changed
• 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)
• exportWithFormatter is no longer available directly in the Grid Options, it is now under exportOptions Grid Options (see below)
• i18n is now a Grid Options which is easier to deal with instead of using the generic params (see below)

Editors

• the Grid Option editor is now a complex object with the same structure as the filter Grid Option. This also mean that all the arguments that were previously passed to the generic params are now passed in the editor
  • this also brings TypeScript types and intellisense to collection, collectionFilterBy and collectionSortBy
• along with previous paragraph, Editors import is no longer available, it's been replaced by EditorType which you need pass to your editor definition.
• Custom Editor is now also supported
• see code change 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

onAureliaGridCreated instance

This new instance will contain all the Aurelia-Slickgrid Services (that were previously available as DI). As you can see below, you simply need to remove all DI and get a reference of the service you want through the AureliaGridInstance

AureliaGridInstance interface

Note:

• GridExtraService is now exported as GridService
• GroupingAndColspanService is now exported as GroupingService
• ControlAndPluginService is now exported as PluginService

export interface AureliaGridInstance {
  backendService?: BackendService;
  pluginService: ControlAndPluginService;
  exportService: ExportService;
  filterService: FilterService;
  gridService: GridService;
  gridEventService: GridEventService;
  gridStateService: GridStateService;
  groupingService: GroupingAndColspanService;
  resizerService: ResizerService;
  sortService: SortService;
}

code change

export class MyGridDemo implements OnInit {
+  aureliaGrid: AureliaGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];

- constructor(private GridExtraService) {}

  addNewItem() {
    const newItem = {
      id: newId,
      title: 'Task ' + newId,
      effortDriven: true,
      // ... 
    };
-    this.gridExtraService.addItemToDatagrid(newItem);
+    this.aureliaGrid.gridService.addItemToDatagrid(newItem);
  }

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,
};

editor new structure

-import { Column, Editors, FieldType, Formatters, GridOption } from 'aurelia-slickgrid';
+import { Column, EditorType, FieldType, Formatters, GridOption } from 'aurelia-slickgrid';

this.columnDefinitions = [
  {
    id: 'title', name: 'Title', field: 'title',
    type: FieldType.string,
-    editor: Editors.longText,
+    editor: {
+      type: EditorType.longText
+    },
  }, 
  {
    id: 'title2', name: 'Title, Custom Editor', field: 'title',
    type: FieldType.string,
+    editor: {
      // new CUSTOM EDITOR type added
+      type: EditorType.custom,
+      customEditor: CustomInputEditor
+    },
  }, 
  {
    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
    type: FieldType.string,
-    editor: Editors.multipleSelect,
+    editor: {
+      type: EditorType.multipleSelect,
+      collection: Array.from(Array(12).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
+      collectionSortBy: {
+        property: 'label',
+        sortDesc: true
+      },
+      collectionFilterBy: {
+        property: 'label',
+        value: 'Task 2'
+      }
+    },
-    params: {
-      collection: Array.from(Array(12).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
-      collectionSortBy: {
-        property: 'label',
-        sortDesc: true
-      },
-      collectionFilterBy: {
-        property: 'label',
-        value: 'Task 2'
-      }
-    }
  }
];

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