+
+
+
+
+
+
+
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example15.ts b/aurelia-slickgrid/src/examples/slickgrid/example15.ts
new file mode 100644
index 000000000..b669b6727
--- /dev/null
+++ b/aurelia-slickgrid/src/examples/slickgrid/example15.ts
@@ -0,0 +1,208 @@
+import { autoinject } from 'aurelia-framework';
+import { AureliaGridInstance, Column, FieldType, Filters, Formatters, GridOption, GridState, GridStateChange } from '../../aurelia-slickgrid';
+
+function randomBetween(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+const LOCAL_STORAGE_KEY = 'gridState';
+const NB_ITEMS = 500;
+
+@autoinject()
+export class Example15 {
+ title = 'Example 15: Grid State & Presets using Local Storage';
+ subTitle = `
+ Grid State & Preset (Wiki docs)
+
+
+
Uses Local Storage to persist the Grid State and uses Grid Options "presets" to put the grid back to it's previous state
+
+
to demo this, simply change any columns (position reorder, visibility, size, filter, sort), then refresh your browser with (F5)
+
+
Local Storage is just one option, you can use whichever is more convenient for you (Local Storage, Session Storage, DB, ...)
+
+`;
+
+ aureliaGrid: AureliaGridInstance;
+ columnDefinitions: Column[];
+ gridOptions: GridOption;
+ dataset: any[];
+
+ constructor() {
+ const presets = JSON.parse(localStorage[LOCAL_STORAGE_KEY] || null);
+
+ // use some Grid State preset defaults if you wish
+ // presets = presets || this.useDefaultPresets();
+
+ this.defineGrid(presets);
+ }
+
+ attached() {
+ // populate the dataset once the grid is ready
+ this.getData();
+ }
+
+ detached() {
+ this.saveCurrentGridState();
+ }
+
+ aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+ this.aureliaGrid = aureliaGrid;
+ }
+
+ /** Clear the Grid State from Local Storage and reset the grid to it's original state */
+ clearGridStateFromLocalStorage() {
+ localStorage[LOCAL_STORAGE_KEY] = null;
+ this.aureliaGrid.gridService.resetGrid(this.columnDefinitions);
+ }
+
+ /* Define grid Options and Columns */
+ defineGrid(gridStatePresets?: GridState) {
+ // prepare a multiple-select array to filter with
+ const multiSelectFilterArray = [];
+ for (let i = 0; i < NB_ITEMS; i++) {
+ multiSelectFilterArray.push({ value: i, label: i });
+ }
+
+ this.columnDefinitions = [
+ {
+ id: 'title',
+ name: 'Title',
+ field: 'title',
+ filterable: true,
+ sortable: true,
+ type: FieldType.string,
+ minWidth: 45,
+ filter: {
+ model: Filters.compoundInput
+ }
+ },
+ {
+ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
+ type: FieldType.string,
+ filter: {
+ model: Filters.input
+ }
+ },
+ {
+ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
+ minWidth: 55,
+ filterable: true,
+ filter: {
+ collection: multiSelectFilterArray,
+ searchTerms: [1, 33, 50], // default selection
+ model: Filters.multipleSelect,
+ // we could add certain option(s) to the "multiple-select" plugin
+ filterOptions: {
+ maxHeight: 250,
+ width: 175
+ }
+ }
+ },
+ {
+ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, sortable: true,
+ filterable: true, filter: { model: Filters.compoundInput }
+ },
+ {
+ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true,
+ type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
+ },
+ {
+ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark,
+ type: FieldType.boolean,
+ sortable: true,
+ filterable: true,
+ filter: {
+ collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+ model: Filters.singleSelect,
+
+ // we could add certain option(s) to the "multiple-select" plugin
+ filterOptions: {
+ autoDropWidth: true
+ },
+ }
+ }
+ ];
+
+ this.gridOptions = {
+ autoResize: {
+ containerId: 'demo-container',
+ sidePadding: 15
+ },
+ enableFiltering: true
+ };
+
+ // reload the Grid State with the grid options presets
+ // but make sure the colums array is part of the Grid State before using them as presets
+ if (gridStatePresets) {
+ this.gridOptions.presets = gridStatePresets;
+ }
+ }
+
+ getData() {
+ // mock a dataset
+ this.dataset = [];
+ for (let i = 0; i < NB_ITEMS; i++) {
+ const randomDuration = Math.round(Math.random() * 100);
+ const randomYear = randomBetween(2000, 2025);
+ const randomYearShort = randomBetween(10, 25);
+ const randomMonth = randomBetween(1, 12);
+ const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth;
+ const randomDay = randomBetween(10, 28);
+ const randomPercent = randomBetween(0, 100);
+ const randomHour = randomBetween(10, 23);
+ const randomTime = randomBetween(10, 59);
+
+ this.dataset[i] = {
+ id: i,
+ title: 'Task ' + i,
+ description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field
+ duration: randomDuration,
+ percentComplete: randomPercent,
+ percentCompleteNumber: randomPercent,
+ start: new Date(randomYear, randomMonth, randomDay), // provide a Date format
+ usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset
+ utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}Z`,
+ effortDriven: (i % 3 === 0)
+ };
+ }
+ }
+
+ /** Dispatched event of a Grid State Changed event (which contain a "change" and the "gridState") */
+ gridStateChanged(gridStateChanges: GridStateChange) {
+ console.log('Client sample, Grid State changed:: ', gridStateChanges);
+ localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridStateChanges.gridState);
+ }
+
+ /** Save Grid State in LocaleStorage */
+ saveCurrentGridState() {
+ const gridState: GridState = this.aureliaGrid.gridStateService.getCurrentGridState();
+ console.log('Client sample, current Grid State:: ', gridState);
+ localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridState);
+ }
+
+ useDefaultPresets() {
+ // use columnDef searchTerms OR use presets as shown below
+ return {
+ columns: [
+ { columnId: 'description', width: 170 }, // flip column position of Title/Description to Description/Title
+ { columnId: 'title', width: 55 },
+ { columnId: 'duration' },
+ { columnId: 'complete' },
+ { columnId: 'start' },
+ { columnId: 'usDateShort' },
+ { columnId: 'utcDate' },
+ // { columnId: 'effort-driven' }, // to HIDE a column, simply ommit it from the preset array
+ ],
+ filters: [
+ { columnId: 'duration', searchTerms: [2, 22, 44] },
+ // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
+ { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
+ // { columnId: 'effort-driven', searchTerms: [true] }
+ ],
+ sorters: [
+ { columnId: 'duration', direction: 'DESC' },
+ { columnId: 'complete', direction: 'ASC' }
+ ],
+ };
+ }
+}
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.html b/aurelia-slickgrid/src/examples/slickgrid/example3.html
index 3d0218ff6..216ada762 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example3.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example3.html
@@ -28,13 +28,19 @@
${title}
Updated Item: ${updatedObject | stringify}
- ${alertWarning}
+ ${alertWarning}
-
+
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.ts b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
index ec84baa7b..a919f45bc 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example3.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
@@ -1,31 +1,23 @@
+import { autoinject } from 'aurelia-framework';
+import { I18N } from 'aurelia-i18n';
import {
- I18N
-} from 'aurelia-i18n';
-import {
- autoinject,
- bindable
-} from 'aurelia-framework';
-import {
+ AureliaGridInstance,
Column,
Editors,
FieldType,
Formatters,
- GridExtraService,
- GridExtraUtils,
GridOption,
OnEventArgs,
- OperatorType,
- ResizerService
+ OperatorType
} from '../../aurelia-slickgrid';
+import { CustomInputEditor } from './custom-inputEditor';
// using external non-typed js libraries
declare var Slick: any;
@autoinject()
export class Example3 {
- @bindable() gridObj: any;
- @bindable() dataview: any;
- title = 'Example 3: Editors';
+ title = 'Example 3: Editors / Delete';
subTitle = `
Grid with Inline Editors and onCellClick actions (Wiki docs).
@@ -39,6 +31,8 @@ export class Example3 {
`;
private _commandQueue = [];
+ aureliaGrid: AureliaGridInstance;
+ gridObj: any;
gridOptions: GridOption;
columnDefinitions: Column[];
dataset: any[];
@@ -47,7 +41,7 @@ export class Example3 {
alertWarning: any;
selectedLanguage: string;
- constructor(private gridExtraService: GridExtraService, private i18n: I18N, private resizer: ResizerService) {
+ constructor(private i18n: I18N) {
// define the grid options & columns and then create the grid itself
this.defineGrid();
this.selectedLanguage = this.i18n.getLocale();
@@ -58,11 +52,9 @@ export class Example3 {
this.getData();
}
- detached() {
- // unsubscrible any Slick.Event you might have used
- // a reminder again, these are SlickGrid Event, not Event Aggregator events
- this.gridObj.onCellChange.unsubscribe();
- this.gridObj.onClick.unsubscribe();
+ aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+ this.aureliaGrid = aureliaGrid;
+ this.gridObj = aureliaGrid && aureliaGrid.slickGrid;
}
/* Define grid Options and Columns */
@@ -75,11 +67,11 @@ export class Example3 {
minWidth: 30,
maxWidth: 30,
// use onCellClick OR grid.onClick.subscribe which you can see down below
- onCellClick: (args: OnEventArgs) => {
+ onCellClick: (e: Event, args: OnEventArgs) => {
console.log(args);
this.alertWarning = `Editing: ${args.dataContext.title}`;
- this.gridExtraService.highlightRow(args.row, 1500);
- this.gridExtraService.setSelectedRow(args.row);
+ this.aureliaGrid.gridService.highlightRow(args.row, 1500);
+ this.aureliaGrid.gridService.setSelectedRow(args.row);
}
}, {
id: 'delete',
@@ -88,32 +80,47 @@ export class Example3 {
formatter: Formatters.deleteIcon,
minWidth: 30,
maxWidth: 30,
- // use onCellClick OR grid.onClick.subscribe which you can see down below
- /*
- onCellClick: (args: OnEventArgs) => {
- console.log(args);
- this.alertWarning = `Deleting: ${args.dataContext.title}`;
- }
- */
+ // use onCellClick OR grid.onClick.subscribe which you can see down below
+ /*
+ onCellClick: (e: Event, args: OnEventArgs) => {
+ console.log(args);
+ this.alertWarning = `Deleting: ${args.dataContext.title}`;
+ }
+ */
}, {
id: 'title',
name: 'Title',
field: 'title',
sortable: true,
type: FieldType.string,
- editor: Editors.longText,
+ editor: {
+ model: Editors.longText
+ },
minWidth: 100,
- onCellChange: (args: OnEventArgs) => {
+ onCellChange: (e: Event, args: OnEventArgs) => {
console.log(args);
this.alertWarning = `Updated Title: ${args.dataContext.title}`;
}
+ }, {
+ id: 'title2',
+ name: 'Title, Custom Editor',
+ field: 'title',
+ sortable: true,
+ type: FieldType.string,
+ editor: {
+ model: CustomInputEditor
+ },
+ minWidth: 70
}, {
id: 'duration',
name: 'Duration (days)',
field: 'duration',
sortable: true,
type: FieldType.number,
- editor: Editors.integer,
+ editor: {
+ model: Editors.float,
+ params: { decimalPlaces: 2 }
+ },
minWidth: 100
}, {
id: 'complete',
@@ -121,10 +128,8 @@ export class Example3 {
field: 'percentComplete',
formatter: Formatters.multiple,
type: FieldType.number,
- editor: Editors.singleSelect,
- minWidth: 100,
- params: {
- formatters: [Formatters.collection, Formatters.percentCompleteBar],
+ editor: {
+ model: Editors.singleSelect,
collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })),
collectionSortBy: {
property: 'label',
@@ -135,6 +140,10 @@ export class Example3 {
value: 0,
operator: OperatorType.notEqual
}
+ },
+ minWidth: 100,
+ params: {
+ formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar],
}
}, {
id: 'start',
@@ -144,7 +153,9 @@ export class Example3 {
sortable: true,
minWidth: 100,
type: FieldType.date,
- editor: Editors.date
+ editor: {
+ model: Editors.date
+ },
}, {
id: 'finish',
name: 'Finish',
@@ -153,14 +164,18 @@ export class Example3 {
sortable: true,
minWidth: 100,
type: FieldType.date,
- editor: Editors.date
+ editor: {
+ model: Editors.date
+ },
}, {
id: 'effort-driven',
name: 'Effort Driven',
field: 'effortDriven',
formatter: Formatters.checkmark,
type: FieldType.number,
- editor: Editors.checkbox,
+ editor: {
+ model: Editors.checkbox,
+ },
minWidth: 70
}, {
id: 'prerequisites',
@@ -169,8 +184,8 @@ export class Example3 {
minWidth: 100,
sortable: true,
type: FieldType.string,
- editor: Editors.multipleSelect,
- params: {
+ editor: {
+ model: Editors.multipleSelect,
collection: Array.from(Array(12).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
collectionSortBy: {
property: 'label',
@@ -193,27 +208,15 @@ export class Example3 {
},
editable: true,
enableCellNavigation: true,
- enableCheckboxSelector: false,
- rowSelectionOptions: {
- // True (Single Selection), False (Multiple Selections)
- // Default to True when no "rowSelectionOptions" provided
- selectActiveRow: true
- },
enableExcelCopyBuffer: true,
editCommandHandler: (item, column, editCommand) => {
this._commandQueue.push(editCommand);
editCommand.execute();
},
- params: {
- i18n: this.i18n
- }
+ i18n: this.i18n,
};
}
- dataviewChanged(dataview) {
- this.dataview = dataview;
- }
-
getData() {
// mock a dataset
const mockedDataset = [];
@@ -238,42 +241,29 @@ export class Example3 {
this.dataset = mockedDataset;
}
- gridObjChanged(grid) {
- grid.onBeforeEditCell.subscribe((e, args) => {
- console.log('before edit', e);
- e.stopImmediatePropagation();
- });
- grid.onBeforeCellEditorDestroy.subscribe((e, args) => {
- console.log('before destroy');
- e.stopPropagation();
- });
+ onCellChanged(e, args) {
+ console.log('onCellChange', args);
+ this.updatedObject = args.item;
+ }
- grid.onCellChange.subscribe((e, args) => {
- console.log('onCellChange', args);
- this.updatedObject = args.item;
- this.resizer.resizeGrid(100);
- });
+ onCellClicked(e, args) {
+ const metadata = this.aureliaGrid.gridService.getColumnFromEventArguments(args);
+ console.log(metadata);
- // You could also subscribe to grid.onClick
- // Note that if you had already setup "onCellClick" in the column definition, you cannot use grid.onClick
- grid.onClick.subscribe((e, args) => {
- const column = GridExtraUtils.getColumnDefinitionAndData(args);
- console.log('onClick', args, column);
- if (column.columnDef.id === 'edit') {
- this.alertWarning = `open a modal window to edit: ${column.dataContext.title}`;
+ if (metadata.columnDef.id === 'edit') {
+ this.alertWarning = `open a modal window to edit: ${metadata.dataContext.title}`;
- // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
- this.gridExtraService.highlightRow(args.row, 1500);
+ // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
+ this.aureliaGrid.gridService.highlightRow(args.row, 1500);
- // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
- // this.gridExtraService.setSelectedRow(args.row);
+ // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
+ // this.aureliaGrid.gridService.setSelectedRow(args.row);
+ } else if (metadata.columnDef.id === 'delete') {
+ if (confirm('Are you sure?')) {
+ this.aureliaGrid.gridService.deleteDataGridItemById(metadata.dataContext.id);
+ this.alertWarning = `Deleted: ${metadata.dataContext.title}`;
}
- if (column.columnDef.id === 'delete') {
- if (confirm('Are you sure?')) {
- this.gridExtraService.deleteDataGridItemById(column.dataContext.id);
- }
- }
- });
+ }
}
setAutoEdit(isAutoEdit) {
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example4.html b/aurelia-slickgrid/src/examples/slickgrid/example4.html
index 62ba94a64..162c230e1 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example4.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example4.html
@@ -2,7 +2,12 @@
${title}
-
+
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example4.ts b/aurelia-slickgrid/src/examples/slickgrid/example4.ts
index 5db4913d9..43c846a5a 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example4.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example4.ts
@@ -1,6 +1,6 @@
import { autoinject } from 'aurelia-framework';
import { CustomInputFilter } from './custom-inputFilter';
-import { Column, FieldType, FilterType, Formatter, Formatters, GridOption, GridStateService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, Filters, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
@@ -14,8 +14,8 @@ export class Example4 {
Sort/Filter on client side only using SlickGrid DataView (Wiki docs)
-
Support multi-sort (by default), hold "Shift" key and click on the next column to sort.
-
All column types support the following operators: (>, >=, <, <=, <>, !=, =, ==, *)
+
Support multi-sort (by default), hold "Shift" key and click on the next column to sort.
+
All column types support the following operators: (>, >=, <, <=, <>, !=, =, ==, *)
Example: >100 ... >=2001-01-01 ... >02/28/17
Note: For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not the Formatter)
@@ -25,15 +25,16 @@ export class Example4 {
FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily. For example, in the "UTC Date" field below, you can type ">02/28/2017", also when dealing with UTC you have to take the time difference in consideration.
On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John Doe")
-
Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See Wiki - Custom Filter
+
Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See Wiki - Custom Filter
-
+
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example8.ts b/aurelia-slickgrid/src/examples/slickgrid/example8.ts
index bb69e6542..66659be45 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example8.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example8.ts
@@ -1,11 +1,9 @@
import { autoinject, bindable } from 'aurelia-framework';
-import { Column, ColumnSort, ControlAndPluginService, FieldType, Formatter, Formatters, GridOption, SortService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, ColumnSort, FieldType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
import * as $ from 'jquery';
@autoinject()
export class Example8 {
- @bindable() gridObj: any;
- @bindable() dataview: any;
title = 'Example 8: Header Menu Plugin';
subTitle = `
This example demonstrates using the Slick.Plugins.HeaderMenu plugin to easily add menus to colum headers.
@@ -18,12 +16,16 @@ export class Example8 {
Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back)
`;
+
+ aureliaGrid: AureliaGridInstance;
columnDefinitions: Column[];
gridOptions: GridOption;
dataset = [];
+ dataView: any;
+ gridObj: any;
visibleColumns;
- constructor(private controlService: ControlAndPluginService, private sortService: SortService) {
+ constructor() {
// define the grid options & columns and then create the grid itself
this.defineGrid();
}
@@ -33,6 +35,12 @@ export class Example8 {
this.getData();
}
+ aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+ this.aureliaGrid = aureliaGrid;
+ this.gridObj = aureliaGrid && aureliaGrid.slickGrid;
+ this.dataView = aureliaGrid && aureliaGrid.dataView;
+ }
+
detached() {
// unsubscrible any Slick.Event you might have used
// a reminder again, these are SlickGrid Event, not Event Aggregator events
@@ -90,15 +98,15 @@ export class Example8 {
headerMenu: {
onCommand: (e, args) => {
if (args.command === 'hide') {
- this.controlService.hideColumn(args.column);
- this.controlService.autoResizeColumns();
+ this.aureliaGrid.pluginService.hideColumn(args.column);
+ this.aureliaGrid.pluginService.autoResizeColumns();
} else if (args.command === 'sort-asc' || args.command === 'sort-desc') {
// get previously sorted columns
- const cols: ColumnSort[] = this.sortService.getPreviousColumnSorts(args.column.id + '');
+ const cols: ColumnSort[] = this.aureliaGrid.sortService.getPreviousColumnSorts(args.column.id + '');
// add to the column array, the column sorted by the header menu
cols.push({ sortCol: args.column, sortAsc: (args.command === 'sort-asc') });
- this.sortService.onLocalSortChanged(this.gridObj, this.dataview, cols);
+ this.aureliaGrid.sortService.onLocalSortChanged(this.gridObj, this.dataView, cols);
// update the this.gridObj sortColumns array which will at the same add the visual sort icon(s) on the UI
const newSortColumns: ColumnSort[] = cols.map((col) => {
@@ -129,12 +137,4 @@ export class Example8 {
}
this.dataset = mockDataset;
}
-
- gridObjChanged(grid) {
- this.gridObj = grid;
- }
-
- dataviewChanged(dataview) {
- this.dataview = dataview;
- }
}
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example9.html b/aurelia-slickgrid/src/examples/slickgrid/example9.html
index c0ba9f505..8d7d98c15 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example9.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example9.html
@@ -2,7 +2,11 @@
${title}
-
+
-
\ No newline at end of file
+
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example9.ts b/aurelia-slickgrid/src/examples/slickgrid/example9.ts
index 477bd2308..d82a88637 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example9.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example9.ts
@@ -1,10 +1,8 @@
import { autoinject, bindable } from 'aurelia-framework';
-import { Column, FieldType, FilterType, FilterService, Formatter, Formatters, GridOption, SortService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, Filters, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
@autoinject()
export class Example9 {
- @bindable() gridObj: any;
- @bindable() dataviewObj: any;
title = 'Example 9: Grid Menu Control';
subTitle = `
This example demonstrates using the Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on the top right corner of the grid.
@@ -17,12 +15,16 @@ export class Example9 {
Doing a "right+click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)
formatter: Formatters.translate, i18n: this.i18n <= "Completed" column uses it
For date localization, you need to create your own custom formatter.
@@ -101,6 +101,7 @@ export class Example12 {
enableAutoResize: true,
enableFiltering: true,
enableTranslate: true,
+ i18n: this.i18n,
exportOptions: {
// set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
exportWithFormatter: true
@@ -109,9 +110,6 @@ export class Example12 {
showExportCsvCommand: true, // true by default, so it's optional
showExportTextDelimitedCommand: true // false by default, so if you want it, you will need to enable it
},
- params: {
- i18n: this.i18n
- }
};
}
diff --git a/client-cli/src/examples/slickgrid/example13.html b/client-cli/src/examples/slickgrid/example13.html
index 6321c8be2..17eaa7ed0 100644
--- a/client-cli/src/examples/slickgrid/example13.html
+++ b/client-cli/src/examples/slickgrid/example13.html
@@ -46,6 +46,6 @@