Migration from 1.x to 2.x - ghiscoding/aurelia-slickgrid GitHub Wiki
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
bindingasg-on-grid-created
andasg-on-dataview-created
still exists but it is now much easier to get the Slick Grid & DataView objects directly from theasg-on-aurelia-grid-created
delegate
binding (it's an all in 1 binding that includes Slick objects and Aurelia-Slickgrid Services)delegate
bindingasg-on-grid-state-service-changed
renamed toasg-on-grid-state-changed
GridExtraUtil
no longer exist, it was containing only 1 functiongetColumnDefinitionAndData()
that got moved into theGridService
and renamed togetColumnFromEventArguments
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 theeditor
options (see below)
Grid Options
- For consistencies, all Grid Menu
showX
flags were renamed tohideX
to align with some of the SlickGridhideX
(see below) exportWithFormatter
is no longer available directly in the Grid Options, it is now underexportOptions
Grid Options (see below)i18n
is now a Grid Options which is easier to deal with instead of using the genericparams
(see below)
Editors
- the Grid Option
editor
is now a complex object with the same structure as thefilter
Grid Option. This also mean that all the arguments that were previously passed to the genericparams
are now passed in theeditor
- this also brings TypeScript types and intellisense to
collection
,collectionFilterBy
andcollectionSortBy
- this also brings TypeScript types and intellisense to
- along with previous paragraph,
Editors
import is no longer available, it's been replaced byEditorType
which you need pass to youreditor
definition. - Custom Editor is now also supported
- see code change below
Filters
- Select Filter (
FilterType.select
) withselectOptions
got renamed tocollection
(see below) - previously we had
searchTerms
(array) andsearchTerm
(singular), but the lattersearchTerm
was dropped in favor of using onlysearchTerms
to remove duplicate logic code (see below).
Backend Service API
- For
BackendServiceApi
, theservice
property now as to contain anew
instance of the Backend Service that you want to use (GraphqlService
orGridOdataService
). See explanation below - All 3
onX
service methods were renamed toprocessOnX
to remove confusion withonX
Event Emitters with the same names. (see below)- this will probably not concern you, unless you built your own custom Backend Service API
BackendService
methodinitOptions
got removed and replaced byinit
which has a different argument signature
@deprecated code removed
- removed
onBackendEventApi
which was replaced bybackendServiceApi
- removed Select Filter
selectOptions
, replaced bycollection
- removed
FormElementType
which was replaced byFilterType
- removed
initOptions
function frombackendServiceApi
, which was replaced byinit
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 asGridService
GroupingAndColspanService
is now exported asGroupingService
ControlAndPluginService
is now exported asPluginService
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);
}
new
Backend Service API - service with 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'
- }
- }
}
];
selectOptions
removed
SingleSelect & MultipleSelect Filters, 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
}
}
];
searchTerm
removed in favor of an array of searchTerms
Filter 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
}
}
];
showX
renamed to hideX
Grid Menu Since these flags are now inverse, please do not forget to also inverse your boolean
value. Here is the entire list
showClearAllFiltersCommand
renamed tohideClearAllFiltersCommand
showClearAllSortingCommand
renamed tohideClearAllSortingCommand
showExportCsvCommand
renamed tohideExportCsvCommand
showExportTextDelimitedCommand
renamed tohideExportTextDelimitedCommand
showRefreshDatasetCommand
renamed tohideRefreshDatasetCommand
showToggleFilterCommand
renamed tohideToggleFilterCommand
onX
methods renamed to processOnX
Backend Service Here is the entire list
onFilterChanged
was renamed toprocessOnFilterChanged
onPaginationChanged
was renamed toprocessOnPaginationChanged
onSortChanged
was renamed toprocessOnSortChanged