aurelia-slickgrid

The title says it all, the next major version is under way and the first alpha is out. if you want to give it a try go ahead and maybe provide feedback under PR #466

Note that there are a few changes, the biggest change is that it now reference and use a new monorepo library named Slickgrid-Universal and because it is a monorepo structure we can decouple a few Services (Export, Excel Export, OData & GraphQL are now decoupled and opt-in), that lib is also framework agnostic (and it will be used in the future by other frameworks that I also support). This will also help me to maintain a lot less code, 1 library to rule them all 😉

To get started follow the new Migration Guide to version 3.x.
Make sure to read it all, you will get compilation errors that is a certainty (unfortunately) but it's for the greater good.
Also to give you a better idea of the changes, I started updating 1 of the Aurelia-Slickgrid-Demos (BS4) in this PR

Again this is an Alpha version, so things might change but I don't expect that many more changes (if any) before the release which will come before year end. The remaining are mainly new features coming along.

The biggest reasons of why to upgrade

1. More Decoupling = Smaller Bundle size (monorepo structure, download only what you need)
2. One common repo to update (that was mostly my personal goal)
3. The library is now fully Typed, even the SlickGrid core lib has TS Types now (all manually added)
4. New Features and bug fixes will only be available going forward with version 3.x only
   • I'm a team of 1, @ghiscoding, so I hope you understand the why?
   • An example a new feature coming soon and will only be released under 3.x is Composite Editor (a CRUD modal window) and is demonstrated under this Slickgrid-Universal Example 12

Minimum Requirement Changes

• TypeScript >= 4.1.2
• Aurelia-I18N >= 3.0.0
• Aurelia-CLI >= 2.0.0
• Bootstrap or any other UI framework like Bulma

Summary

Lastly to give you an idea of the internal changes, the biggest portion of the code now exist in the Slickgrid-Universal monorepo project and that removed over 85-90% of the code from Aurelia-Slickgrid. You can see it below, there was near 11k lines of code with unit tests and that dropped significantly to ~1k lines of code, so a big portion of the code and unit tests got moved to Slickgrid-Universal and now I have 1 less library to do code change, it now just flows from the monorepo into Aurelia-Slickgrid (prior to this, I was personally supporting and copying the same bug fixes/features in 3 separate libs which I create around SlickGrid and with this change it's 1 less)

There's a new warning message (inside the grid) that will show "No Data to Display." that can shown after filtering or when it's simply empty. As all the other feature I have done, there are few options with it (see the emptyWarning interface for options), you can also disable it with the flag enableEmptyDataWarningMessage.

Another main topic that was brought up, and much time was spent on, was what we thought to be memory and/or detached DOM nodes but even if we fixed a few unsubscribed events (in both the core and this lib), the main problem ended up (and still is) coming from the Flatpickr lib (date picker) which was leaking detached elements (that was patch in the lib) and also an event listener causing performance downgrade which is caused by Flatpickr listening to the keydown event on the document.body and I have opened a PR #2329 to fix that, so hopefully this will be merged eventually (you could maybe upvote the PR #2329 to show interest in getting that merged).

Major Announcement

This is officially the last minor version until the next major version 3.x gets released and the work has already started in this PR #466 (ETA year end).

Lastly...

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• chore: update all npm packages and project to WebPack 4 (#447) (1f8daac)
• core: add "Empty Data" warning message when grid is empty (#458) (5175fb6)
• core: switch to ESLint since TSLint was deprecated (#452) (95f6ca9)
• formatters: add a fake hyperlink formatter (#459) (94618e7)
• formatters: add AlignRight and AlignCenter Formatters (#462) (a047b8c)
• services: add 2x new methods hideColumnById(s) (#461) (4cd1ecf)
• tests: update to aurelia-pal-nodejs 2.x and few newer npm packages (#453) (0fd5b0c)
• core: add enableMouseWheelScrollHandler grid option (#468) (412b93d), closes #618 #619 #555

Bug Fixes

• backend: OData/GraphQL pagination should display warning on empty (#460) (a597eca)
• core: clear dataset when disposing and fix few unsubscribed events to avoid leak (#456) (7171d24)
• core: header columns grouping misbehave after hiding column (#464) (a8f6a3f)
• core: properly dispose plugins to avoid detached DOM elements (#455) (9bb173f)
• core: properly remove event listeners when disposing (2215b18)
• core: revert to use WebPack to run Cypress E2E tests (ef474d8)
• extensions: CellExternalCopyBuffer plugin onKeyDown event leaking (8e6d325)
• core: showing/hiding column shouldn't affect its freezing position (c2794cc)
• formatters: date US Formatters should accept ISO date input (#467) (fbffe5d)

This versions brings a few fixes and couple of styling improvements, the biggest changes are

• Compound Filters with Operator dropdown on the left got styled differently and now includes each Operator descriptions.
  • NOTE: make sure to add new translations to the new Operator descriptions, you can see them in the PR #427
• Add more Grid Service methods to help toggling Sort & Filter functionalities.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• core: add custom entry to Select Editor/Filter collections (#430) (0e49313)
• services: add Toggle Filtering/Sorting & Hide Column methods (#426) (1ae2f6a)
• styling: add description to Compound Filter Operators (#427) (deaca78)
• styling: add Pagination button height sass variable (#433) (cba49ba)
• tests: add more Cypress E2E tests for grouping (#423) (e58b0cd)
• styling: add frozen on all possible elements with SASS variables (#437) (5a1af0d)
• tests: add more Cypress E2E tests (#443) (c11a2ce)

Bug Fixes

• editors: add blank entry on Select Editor should happen once (#429) (b6ce803)
• filters: disregard time when filtering date only format (#431) (b61e902)
• filters: tree data presets caused regression in any grid w/presets (#435) (e91af6d)
• pinning: put back vertical scroll on grid after removing freezing (#421) (06da37b)
• select: make a collection array copy to avoid change by ref (#432) (5fb5285)
• styling: Compound Filter Operator dropdown too wide in BS4 (#436) (f5750e6)
• styling: grouping with checkbox should be aligned left (#422) (ea613d0)
• styling: support other unit of measure in SASS, fixes #420 (#428) (3fc3bdd)
• core: don't override alwaysShowVerticalScroll flag (#438) (07687e0), closes #537 6pac/SlickGrid#537
• core: hide Grid Menu Filter/Sort cmd when disabling functionality (#444) (735baf2)
• core: unsubscribe all subscriptions on compose dispose (#446) (9b20b61)
• core: unsubscribe every possible events (#448) (09f596e)
• extensions: import jQuery mousewheel only with frozen (#450) (c327833)
• filters: slider filter setValues really change input value (#451) (cc4417b)
• interfaces: column types in GridStateChange (#445) (91d81c8)
• styling: flatpickr bg-color should be using SASS variable (#449) (33dc40d)

This new version brings a few Styling enhancements one of which is a new colors.scss to help coloring SVGs by providing new color-X CSS classes (like color-primary, color-danger, ...), this new file is included in both the Material-Design/Salesforce Themes but is not included in the Bootstrap Theme (since that theme doesn't have SVGs). Also if you wish to have a lighter CSS file and not include this new colors.scss, you could use the new bare versions which doesn't include any non-essential Styling (it doesn't have any SVG/Color. Flatpickr, MultipleSelect styling, e.g. slickgrid-theme-material.bare.css), there's also a lite version which is roughly the same as the bare version except that it adds the SVG/Colors to it (e.g. slickgrid-theme-material.lite.css) while the regular version have it all (e.g.slickgrid-theme-material.css). more info is provided in the Wiki,

• Wiki - SVG Colors CSS Classes

The AutoComplete Editor also got a few improvements and 2 new extra CSS styling classes (2 rows, 4 corners), for more info take a look at the Wiki

• Wiki - AutoComplete Editor | animated gif

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• autocomplete: add much more functionalities to the AutoComplete (#405) (40db84e)
• core: add loading spinner to AutoComplete Editor/Filter (#402) (30bfec5)
• editors: add Clear Date button to Date Editor (#418) (659304d)
• styling: add extra SASS utilities and icon colors (#408) (897f4df)
• styling: find way to add colors to SVGs used by the lib (#404) (482711b)
• tests: add more Cypress E2E tests for Language change (fd904e3)
• tests: add more Cypress E2E tests for Pagination Lang change (dc19c30)

Bug Fixes

• core: latest Flatpickr breaks Date Filters/Editors (#403) (d969afc)
• core: use latest excel-builder-webpacker to fix CLI 2.0 (#419) (b902782)
• editor: SingleSelect Editor should show pick false value (#407) (0dce0d2)
• editors: all Editors should call commitChanges even when invalid (#416) (9fc066a)
• editors: AutoComplete Editor might have undefined object label (#401) (c0b6224)
• editors: fix couple of small editor bugs found (#409) (f59dcbe)
• editors: update to latest Flatpickr version (#417) (3447549)
• styling: extra styling shouldn't override default bootstrap style (#415) (db5ad2f)
• styling: remove unwanted source map from css output files (#411) (514bab1)

This new release brings some nice features which are the following:

Exposed Extension/Addons

This that could simplify how to get the addons (controls/plugins) instances, for example the Row Detail is an extra SlickGrid addon (plugin). It only provides a new and easier way but all previous ways of getting the addon instances still work, so there's no breaking change.

If we look at the Row Detail for example, you could previously do it in 2 ways but now we have a 3rd and 4th way of getting them.

1. use onExtensionRegistered from the rowDetailView grid options
2. use the asg-on-aurelia-grid-created and then use getSlickgridAddonInstance()
3. a new way is still through asg-on-aurelia-grid-created but this one now exposes all the addon instances (columnPicker, gridMenu, rowDetail, ...) via the extensions property
4. another new way is through the extensions bindable property (remember it's still async and will only be populated after the grid is created)

The Option 1 or Option 4 are probably the best ways of getting the instance. The new Option 3 & 4 have the advantage of providing all addon instances at once, so it might be useful if you want to use more than 1 addon instance. More info on the new Wiki - Addons/Extensions (controls/plugins)

Exposed Services

In addition to exposing the extensions bindable, we now also have a services bindable, so for example if you wish to use the Resizer Service, you could get it from there. The extensions bindable is of type ExtensionList, while the other instances bindable is of type AureliaGridInstance, for example this.aureliaGrid.resizerService.resizeGrid(). More info in this Wiki

<aurelia-slickgrid grid-id="grid19" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
    extensions.bind="extensions" instances.bind="aureliaGrid">
  </aurelia-slickgrid>

Editors

Another smaller but nice enhancement is on the Editors.longText, which is now showing how many characters (bottom left) were typed in the TextArea versus how many chars are accepted (by default it will show as a limit of 500). While adding this feature, I found out that there weren't any Validators that existed to check the length of the text on any of the text editors (autoComplete, text, longText) and so I added these missing options for validation (minLength, maxLength and you can also provide the extra option operatorConditionalType: 'exclusive' or inclusive which is the default, note that this option also exist for the number editors using the minValue, maxValue)

What's coming in the Future (much later in the year)

I will re-iterate again, as I mentioned it in the previous version, that I don't expect any more big features before the next major breaking change release.
You can read more about this in the previous release here

note that version 2.19.x was the supposed to be the last before the next major release but it turns out that this new features deserved a minor bump to 2.20.x.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• core: expose all services, slickgrid, dataview instances (#392) (6b7603f)
• editors: add min/max length options to text editors (#395) (99ff929)
• examples: add fetch to autoComplete sample (#397) (70edd27)

Bug Fixes

• editors: Editors should work with undefined item properties (#390) (e2d94ad)
• extensions: draggable grouping called wrong check (#389) (1107d90)
• footer: remove unnecessary row class to avoid negative margins (#391) (9b4020c)
• interfaces: grid option enableColumnReorder can also be a function (#394) (d6266ea)
• styling: tweak styling so that we won't need to use css !important (#393) (6f73bc6)
• core: add missing inlineFilters DataView optional flag (#398) (cde443b)
• extensions: Row Detail gets blanked out for no reason (#400) (f4591de)
• extensions: adding Context Menu custom commands was not working (#396) (097c558)
• extensions: Row Detail not always refreshing with customId (#399) (b6d746d), closes #546

Quick Word

I would like to remind everyone that this lib is mostly done by 1 person (myself @ghiscoding) and I would seriously prefer if you have any coding questions to ask them on Stack Overflow since a lot more users can help you out with any simple installation or usage questions.

New Features

This new version brings a couple of new features, the 2 main ones are explained below:

• SlickGrid interface and SlickDataView interface, this is great with VSCode intellisense.
  • these are NOT linked anywhere in the lib (it will be in next major version, continue reading below) because that would have probably thrown a lot of TS build compiling warnings/errors but you can start using them wherever you find them useful, so you can change all your code from any type to the following:

import { SlickGrid, SlickDataView, } from 'aurelia-slickgrid';
 
export class MyComponent {
  grid: SlickGrid;
  dataView: SlickDataView;
}

• a new "Frozen Columns" header menu (this is an opt-in feature) - demo animated gif | Example 15 (bottom grid only)
  • in order to see this new header menu command, you will have to use the following code since it's an opt-in feature, also note that it will also an extra Grid Menu command "Clear Frozen Columns" to remove all columns freezing (pinning)

this.gridOptions {
     `gridMenu: { hideClearFrozenColumnsCommand: false },
      headerMenu: { hideFreezeColumnsCommand: false }`
}

What's coming in the Future (much later in the year)

This version is probably the last minor (features) version before a major (breaking changes) version. The next major version, which by the way is a very loose roadmap date (maybe before Christmas would be nice). What will this next major version be all about?

1. It will use another lib Slickgrid-Universal with all the common code
   • it is a Monorepo structure (built with Lerna) which Aurelia 2 is also a monorepo structure
2. It's fully typed, so it has all necessary TypeScripts interfaces (including the 2 new SlickGrid and SlickDataView that were mentioned earlier)
3. All @deprecated code will be removed
   • to prepare yourself, you might want to look at your console, most of the deprecated code already send console.warning messages
4. It will be framework agnostic (can be used by Angular-Slickgrid, Aurelia-Slickgrid, SalesForce, ...)
5. It will have a few decoupled Services as separate packages (OData, GraphQL, FileExport & ExcelExport)
   • You can see an example of the changes here
   • this also mean smaller bundle size for you (currently these 4 Services are in Aurelia-Slickgrid, want it or not)
6. Any work done for this new breaking version will go under the new version-next branch

So the main points are number 1 & 5, the latter being the main breaking change, this new lib was built because I already support 2 frameworks (Angular & Aurelia) and now we are starting to use it in SalesForce, that is yet a 3rd framework (SalesForce uses plain ES6 JS). I thought this would be a great opportunity to move all of the common code (which Angular-Slickgrid & Aurelia-Slickgrid share about 80% of the same code) into 1 single lib (a common lib written in TypeScript but is framework agnostic) which could later be used in any frameworks (Angular-Slickgrid, Aurelia-Slickgrid, ... maybe other frameworks in the future, who knows) or in plain TypeScript or ES6.

All that to say, the focus is now on Slickgrid-Universal, once that is all complete then the work would be to rewrite Angular-Slickgrid by dropping all the common code (the 80% code) and instead use the code from common lib (Slickgrid-Universal). At the end of it, when everything is done, it will be only 1 place to update common code (instead of always having to update both Angular & Aurelia libs with most often the exact same piece of code). At the end of the day, Aurelia-Slickgrid will use Slickgrid-Universal which itself will use SlickGrid core lib, and anything related to Aurelia will remain in Aurelia-Slickgrid but anything else (common shared code) will be coming from Slickgrid-Universal, for the most part most users won't notice any differences except for the decoupled Services (OData, GraphQL, FileExport & ExcelExport) where you'll have to reference the new lib directly for example @slickgrid-universal/excel-export, you can see an example of the usage for Export Services and Backend Services in the upcoming Migration Guide.

More info can be found on the Slickgrid-Universal GitHub page.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• editor: use better error message for inclusive values (#368) (130e5dd)
• pinning: add "Frozen Columns" to header menu (#363) (e518eef)
• sorting: header menu clear sort, reset sorting when nothing left (#374) (3f09823)
• typing: add SlickGrid and DataView interfaces (#360) (28003c1)
• typings: add more TS Generic Types (#378) (9f7adb8)

Bug Fixes

• core: add missing use of custom datasetIdPropertyName (#354) (c083853)
• editor: float validator should accept decimal even without 0 suffix (#375) (0e32c3f)
• editor: shouldn't call cell changed when cell value is undefined (#377) (0397719)
• example: use highest id as new id in addItem example (#366) (7ed0c31)
• excel: Excel Export add mime type to work in Firefox (#369) (2a7b0ba)
• extension: registerPlugin not implemented correctly (#359) (bc3d0a9)
• filter: recreate filters when toggling header row (#365) (554ce32)
• filter: Select Filter should use default locale without translation (#371) (35d4a01)
• formatter: add possibility to parse a date formatter as a UTC date (#376) (881f234)
• header: re-create header grouping title after changing picker cols (#370) (3c2248d)
• lint: adhere to strict triple equality check (#355) (adccd1b)
• pagination: disabled page buttons should not be clickable (#372) (5909dea)
• picker: add missing pre-header title grouping extractor (#367) (b6a171d)
• presets: compound filters operator not working correctly w/presets (#373) (27b8c21)
• styling: cell/context menus get re-position below the grid (#356) (8079e65)
• treeData: should support use of custom datasetIdPropertyName (#353) (6a0b0b3)
• types: add missing option flags in grouping interface (#357) (46273bf)

Quick intro

This version is packed with a new major feature (Tree Data View) and also comes with many styling enhancements & bug fixes. There's also a new Dual Input Editor.

Tree Data View

This is the biggest feature in this release, it is a fairly complex feature to implement (because it requires a lot of recursion handling) and because of that, it comes with some limitation (see below). There are 2 demos that represent 2 ways of building a grid with Tree Data.

• Tree Data from Parent/Child refs - demo | ViewModel
• Tree Data from Hierarchical dataset - demo | ViewModel

Tree Data Limitations

Tree Data is, like I said earlier, fairly complex and because of that, it has certain limitations. See below for what works and what doesn't. If anyone can help in pushing the missing piece further that would be great.

Works

• Single Column Sort

Doesn't Work (they're also not supported, so please don't open any new issue unless you want to help)

• Multi-Column Sort
• Aggregator

Styling

There is now a new Sort Icon hint (with an opacity of 0.5) when hovering a Column that has Sort enabled, this will help the user to identify that the column is sortable or not.

New Themes

This release also brings 2 new Styling Theme, first is a Material Design Theme and also a Salesforce Theme... does that mean SlickGrid is used in Salesforce... indeed! (more on that later).

• Material Theme - demo
• Salesforce Theme - demo

For more demo, you can also take a look at my other repo (Slickgrid-Universal) demos. Also, note that Bootstrap is completely optional (and has been for some time), the other demo that I mentioned was created using only the Bulma CSS framework, you will also notice that only the Material & Salesforce Themes were used across these multiple examples.

Each of these Styling Themes is compiled in CSS and created from a SASS file, so you can use either or. Both Themes are shown in each Tree Data demo

• Note: you might need to refresh the page to see the theme correctly since the styling is global and if you change page, the style will follow on the next page (unless you refresh).

SVG Icons

The 2 new Themes were created with only SVG icons, most of the icons were pulled from the Material Design Icons set. If you wish to create your own set of SVG Icons, you can refer to the new Wiki - SVG Icons

• Wiki - SVG Icons.

Note: Just to point out that both the Fonts and SVG icons are supported, the default Bootstrap theme will keep Font-Awesome 4 so that it still works for everyone. You could, however, use SASS to override the Font and use SVG, again see the Wiki - SVG Icons for more details.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• core: update to latest TypeScript version (330f8ad)
• editor: add new Dual Input Editor & extract all Editor Validators (#333) (25ff639)
• extension: add column position option for checkbox row selector (#317) (1de66f4)
• extension: add column position option for Row Detail icon (5e496fe)
• extension: add latest slickgrid with RowMove improvements (#321) (bf767c5)
• grouping: add missing Grouping interface properties (#325) (35e2c67)
• i18n: add namespace prefix + separator grid option, closes #338 (#344) (115989d)
• query: add queryFieldNameGetterFn callback know which field to use (#326) (2d7ebbc)
• sort: add valueCouldBeUndefined column flag to help sorting (#323) (9c5996c)
• style: add Sort icon hint on hover when column is sortable (#327) (357fabd)
• styling: add CSS/SASS Material Design & Salesforce styling themes (#337) (6c57616)
• treeData: add new Tree Data View feature (#339) (1526b87)
• gridMenu: update to latest SlickGrid & add new Grid Menu options (#351) (e55b7e7)

Bug Fixes

• editor: disregard Date Editor Flatpickr error and fix output format (#332) (c60a51c)
• export: remove unsupported file type (#341) (ffa66fd)
• filter: string filter should also work when using Contains (#320) (90a752b)
• filter: when entering filter operator it shouldn't do any filtering (#324) (0f3bab6)
• formatter: exportWithFormatter should work with undefined item prop (#340) (5e12d80)
• gridMenu: column picker list should include grouped header titles (#343) (ae08a87)
• gridMenu: the command "Toggle Filter Row" disappeared (#334) (23c94f2)
• gridService: crud methods should support custom dataset id (#336) (c942929)
• pagination: passing custom pagination sizes should work (#342) (1ca62a4)
• resizer: remove scrollbar measure compensate patch (#319) (2527589)
• rowDetail: use latest SlickGrid version to fix issue with id (#335) (d89e707)
• sort: header menu sorting should include columnId property (d0cdfbe)
• excel: update excel builder dependency (86fce02)
• filters: add all Filters as Transient (#348) (1d39b2e)
• footer: custom footer metric texts could not be changed (#350) (c5c6b63)
• gridMenu: command "Toggle Filter Row" header row (#347) (4d0491a), closes #334
• odata: encode uri also for IN/NIN operators (#349) (7be2d3b)
• resizer: check for undefined option instead of fallback (#352) (7d03e9a)

Some Important Code Changes

Event Aggregator

Note that eventually all events sent by the Event Aggregator will be deprecated and you should move to the dispatched events on the Custom Element instead (for example, the EA with key excelExportService:onBeforeExportToExcel is now asg-on-before-export-to-excel.delegate() as dispatched event, for more info see the Wiki)... but why the change? It's simple, the Event Aggregator is usually a Singleton for your entire App, and because of that calling a command in 1 grid might actually affect both grids. That is why dispatched events, which are defined on each grid, are better and contained in each separate grids.

(when using `I18N)

Please note that the Column Definitions property headerKey will be deprecated (in the future) and replaced by nameKey so that it align with SlickGrid (core) property which is name, for the column header title name. With this change, every other possible Translation Keys are aligned, in other words, any time you want to use translations, you just need to add the Key suffix, for example (name => nameKey, label => labelKey, columnGroup, columnGroupKey, ...). For now headerKey still works but you might want to start doing this change earlier than later.

Local Grid Pagination

This was requested couple times, it's now possible to show Pagination on a local grid (that is without using a backendServiceApi). To get this to show up, the only thing you need to do is to enablePagination: true define the Pagination settings in your Grid Options. You can see demo of this new feature

• demo Example - 2 Grids / Example - Grid State

Custom Footer (opt-in feature)

In addition to the Local Pagination, there is also a new Custom Footer that was just created and can be used to display some of the grid metrics (items count, with/without filter, last update timestamp and some more). However note that since this footer display roughly the same info as the Pagination, it cannot be displayed when a Pagination is already shown (in other words, it only works when Pagination is disabled). It's also very customizable, you can choose to display/hide some of the metrics. You can see demo of this

• demo Example 2 / Example 4 and Example 12 for the full metric options shown.

Row Detail

From a Stack Overflow Question it was brought to light that it was very hard to get access to the SlickGrid, DataView objects and even Parent Component references from the Row Detail Child Component. This was addressed in this new version

• The Row Detail Example was modified to show a demo how to delete the grid row directly from the Child Component. You can also see docs in the updated Wiki

Backend Services (new features/interfaces for OData & GraphQL)

These changes apply to both available Backend Services (OData, GraphQL) and it was started in previous version but improved in this version. You can now disable the Pagination and expect the backend query to be different (that is without any pagination offset and stuff in the query). There also 2 new interfaces OdataServiceApi and GraphqlServiceApi interfaces to help with TS Types and use the correct properties associated to each. The most interesting change is probably that you can now use OData/GraphQL to load the data once but then use local Filtering/Sorting (without calling the backend) with these 2 new flags useLocalFiltering and useLocalSorting (they can be used separately too), a new GraphQL Example was created to demo that feature (we demoed with GraphQL but it also works with OData).

• new GraphQL Example to demo the use of local filtering/sorting

Row Selections in Grid State & Presets

Row Selections are now included in the Grid State & Presets, I didn't want to include them in the past mainly because I always thought that it wasn't keeping the selection properly after filtering/sorting/... but then I learned about syncGridSelection and how it works. This flag allows to actually keep in memory the row selection, even when row is not visible... with this, it's now part of the Grid State & Presets and it even works with Local Grid Pagination (that required a lot of work though). The syncGridSelection is still a flag that that can be disabled in the Grid Options if you wish to not preserve the hidden selections.

Note when using BackendServiceApi

However please note that even if syncGridSelection is enabled by default, it is disabled when using a BackendServiceApi it is disabled with an extra flag syncGridSelectionWithBackendService, you could enable it if you want but you might have unintended behaviors because Backend Services changes the DataView every single time there's a page change.

Again if you like the lib, please upvote if you haven't yet. ⭐️

Cheers ☕️

Features

• backend: add OData & GraphQL Service API interfaces (6995f64)
• backend: add option to use local filtering/sorting strategy (df96b3e)
• columnGroup: add columnGroupKey property in order to use translate (#292) (9d225ae)
• examples: add new GraphQL without Pagination Example (b667dbe)
• footer: add custom footer to show metrics (92b4c8d)
• menus: add "onAfterMenuShow" event to all possible menu plugins (#297) (c7f2e7a)
• pagination: add Pagination to local grid (#286) (d655040)
• rowDetail: add few object instances that can be used in child comp (#285) (e1a389a)
• selection: add flag to disable syncGridSelection w/BackendService (#298) (6a8cc4f)
• selection: preserve row selection & add it to Grid State & Presets (#296) (af9deea)
• aurelia: add Custom Editor/Filter with Aurelia Custom Elements (#307) (afe110a)
• excel: add some extra styling & width options for Excel export (#308) (a070d60)
• sort: add default sort field as grid option (5886b24)

Bug Fixes

• build: create & use separate excel-builder package to fix security (#290) (06bc52a)
• filter: creating blank entry should only be entered once (8f6533f)
• filters: remove filter DOM element IDs to avoid duplicate IDs (#288) (35dd3d7)
• footer: fix Custom Footer styling issues with Bootstrap 4 (#289) (9d8f3f3)
• formatter: refine condition to display a checkmark icon (e6edfd5)
• graphql: the query could use a different dataset "id" property (60a9c45)
• header: column header grouping should be re-render after a resize (2ef9ea4)
• menu: remove unused code in Context Menu to select cell (b746b5c)
• paginations: fix Grid State dbl event and some Pagination issues (#294) (efe5748)
• resizer: grid size fix for backend service with pagination disabled (77aa5eb)
• rowDetail: add datasetIdPropertyName option in Row Detail (#299) (e8ce045)
• test: fix failing Cypress E2E test after GraphQL changes (b4d780f)
• tests: add and fix Jest unit test (f6e20f6)
• backend: updateOptions can be use with partial options - TS type (2a8a0a4)
• locales: fix some Locales not showing up when not using I18N (#300) (a07bf23)
• footer: custom footer should work anytime pagination is disabled (ebd4aec)
• pagination: on filter change pagination should reset to 1st page (#304) (c633413)
• selection: filter data should work with row selection (#303) (7bab709)
• selection: row selection always be kept (#306) (b7e62e8)
• editor: LongText Editor save button that was not working properly (80d749f)
• mousewheel: add jquery mousewheel lib to fix scroll in frozen grid (615ecaf)
• columns: add/remove columns dynamically (a0fba0d)
• example: should re-render after clearing groups (ee591f8)
• columns: remove columns dynamically with Editors (7157ed3)
• formatters: decimalSeparator & thousandSeparator work tgt (c46ef46)

Just in time for Xmas... Happy Holidays 🎅 ⛄️

Cell Menu & Context Menu

In this new version, I revamped the styling of the Column Picker and Grid Menu (and added a bunch of SASS variables) to align with the Header Menu, there's also a lot more Cypress E2E tests (nearly double). But most importantly this version brings 2 new Extensions, Cell Menu & Context Menu. I created them both at the same time (directly in the SlickGrid core library as plugins before using them in this lib), they are very similar in their look & feel and also on how to use them as well, however they do serve different purposes. The Cell Menu is more related to row actions (e.g. delete current row) while the Context Menu is all about actions for the entire grid (e.g. export to Excel).

The Cell Menu is most commonly used as an Action Menu and triggered by a cell click or touch (you could have 1 or more Cell Menu in a grid). On the other hand, a Context Menu (only 1 per grid and now enabled by default) is triggered by a mouse right+click and comes with a few built-in commands (copy cell, export & some grouping commands when grouping is available). Both of these extensions accept a list of Commands and/or Options, the Commands are of course to execute an action and the Options are more commonly used to change a value of the current row (it can only takes 1 array of Options).

To see it in action

• a new Example 24 to demo both Cell Menu & Context Menu and an animated GIF to demo the feature.
• for a Context Menu with Grouping commands, you can check out Example 13 - Grouping and do a mouse right+click
• Wikis
  • Cell Menu
  • Context Menu

GraphQL

Includes a small Breaking Change

The GraphQL Service changed slightly so that it can now be used without Pagination (the query will be different). To adapt to this change, the GraphqlResult interface got renamed to GraphqlPaginatedResult while the GraphqlResult interface is now used without page information. This basically mean that you can now disable Pagination (via enablePagination: false in the grid options) and expect a query without page info and the query will be different according to this flag, for example:

• with Pagination
  • query{ users(first:20, offset:40){ totalCount, nodes{ id, firstName, lastName }}}
• without Pagination (via enablePagination: false)
  • query{ users{ id, firstName, lastName }}

Note that current GraphQL querying inputs for Filtering & Sorting remains the same with/without Pagination, you can refer to the GraphQL Wiki for more info.

Features

• menu: starting adding new Cell Menu Extension (d7ed48a)
• menu: add action & override callbacks to Header Menu & Grid Menu plugins (d59b341)
• menu: add Context Menu Extension feature (866969d)
• menu: starting adding new ContextMenu Extension (a60d5ae)
• styling: change Column Picker & Grid Menu styling (8465191)
• styling: add more SASS variables to header menu (70afcd8)

Bug Fixes

• example: show sort icon correctly after grouping (116bc78)
• translations: align all Export translations and add missing locales (fc480b6)
• graphql: disable pagination should remove any page info from query (d91f74c)
• graphql: add missing updated GraphqlResult interface (5db9538)
• build: warning on a missing DOMpurify TS Type (4436b2b)
• styling: use latest SlickGrid version and fix some styling issues (52308eb)

Big Annoucement

Huge news, Aurelia-Slickgrid just reached 100% Test Coverage, around ~8300 lines of code fully tested. 🚀

This new version brings a feature that was a asked a few times that is to update/change any Filters and/or Sorting dynamically (that is on the fly at any time). It also works with Backend Services (OData & GraphQL). This kind of functionality was already available via Grid Presets but the presets is restricted to first page load only, while the new features can be called at any time. However please note that it's still preferable to use presets to effectively preset your grid with any Filters and/or Sorting when loading the grid, the differences is that the presets happens before the grid is even ready (it will load the grid with them), while updating Filters/Sorting dynamically (the new feature) can only be called after the grid is ready and shown, so there's a big distinction between them.

• Documentation
  • You can refer to the Filter and Sorting Wikis for the full documentation.
• Demos
  • You can see all of these examples to demo both features Client | OData | GraphQL | Draggable Grouping | Range Filters

Unit Test Coverage also increased to 99.8% ...correction, it now reached 100% 🚀

Again, if you like the lib and haven't up voted yet, please do so ⭐️ cheers 😸

Features

• filters: provide method to apply grid filters dynamically (#258) (3433686)
• sorting: provide method to apply grid sorting dynamically (#261) (7782767)
• events: allow to bypass changed events when calling updateFilters/Sorting (#263) (055fb95)
• examples: add Dynamic Filters demo set by select dropdown (706bb4e)
• tests: add Cypress E2E test to cover i18n grid and text filter (97be0ad)
• tests: add more unit tests & cleanup some code (74cd00d)
• tests: add missing tests for full coverage (b8cd451)

Bug Fixes

• odata: no quote escape required for IN operator w/non-string column (#262) (8027922)
• picker: make sure picker addon is available before translating (78a7a56)
• editor: Select Editor with option "0" were incorrectly filtered out (3a4258b / a22e300)
• filter: Date Filters using Flatpickr throw error w/invalid locale (2e6a7cc)
• filter: default operator of input filter should be empty (37f031a)
• filter: number filter condition, parse number before comparing (1c4ed2d)
• filter: updateFilters w/BackendService should call query only once (#265) (0a5e43a / bd6749e)
• backend: make sure pagination object exist before using it (3123597)
• sort: add sort icons to grouping examples (8bb6dec)
• typing: gulp dependency and typings fix (80db485)

This week Aurelia-Slickgrid hit a Major Milestone 🚀 , the library is now Fully Tested with a test coverage of 99.5%. Why not 100% you might ask? Well there's about 40 lines that I haven't found out how to test and/or are lines that are unreachable from a test perspective. So I'm happy to put this aside as a completed task.

This version also brings a few fixes for RequireJS/SystemJS, especially for the new Excel Export (using the Excel-Builder library) that was released in previous version. Also there are some extra Formatter Options (a total of 6 options available) that can be applied to all regular Formatters/Grouping Formatters at once (even globally if you wish), these are the 2 new options (decimalSeparator and thousandSeparator) and more info can be found in this Wiki.

So please, if you like the lib and haven't yet up voted, please do so ⭐️ cheers 😸
Ghislain aka @ghiscoding

Some Unit Tests & Code Statistics

• 150 files tested
• ~8000 lines tested
• ~2200 unit tests
• 99.5% test coverage (~45 lines are untestable)
• you can see the full test coverage via codecov
  

You thought Aurelia-Slickgrid was just a simple SlickGrid wrapper... well think again 👷

Features

• cypress: add Pagination Service Cypress E2E tests (#245) (9ad8bf6)
• frozen: fix header grouping grid with frozen columns (#239) (30cb09d)
• rowDetail: expose public all render/redraw methods of Row Detail (25acddf)
• styling: improve header menu styling (511ce3b)
• tests: add Aurelia-Slickgrid custom element tests (#247) (2400dd1)
• tests: add more Aurelia-Slickgrid unit tests (#253) (9b6d25f)
• tests: add Slick-Pagination Component unit tests (#242) (fdf440c)
• build: reorganized lib into its own "custom-elements" folder (#257) (dc99f51)
• formatter: add decimal,thousand separator to all Formatters (#255) (fd67f26)
• tests: add missing unit tests for Excel Export Service (#254) (9ede722)

Bug Fixes

• bundler: add Excel Builder support for RequireJS/SystemJS (b992187)
• editor: use editorOptions only (#246) (a0604b5)
• graphql: pagination offset should never be below zero (#250) (199ae83)
• odata: filter with single quote should be escaped (#251) (46bb0c7), closes #328
• styling: hidden menu visible in BS4 for Picker/Grid Menu (9e06f2c), closes #321
• tests: fix a Jest async unit test not resolving (#252) (c1c64f3)
• pagination: never display page 0, minimum should be page 1 (#256) (8ce753c)
• firefox: fix thousand separator throws regex console error (688bacb)

Intro

This new version brings a feature that I wanted to add for a long time Excel Export, this will also be the new default exporter (via a new flag enableExcelExport). There is a new settings are very similar to the previous CSV export (which still exists under the flag enableExport). More info can be found under the new Wiki - Export to Excel. You can see a demo on these 2 examples Grouping and Localization, all of the grids also have the new default Excel Export in their Grid Menu (aka hamburger menu)

New Excel Export

• enableExcelExport
• excelExportOptions

CSV and/or Text with Tab Delimited (still exist but no longer the default)

• enableExport
• exportOptions

This new version adds a couple of noteworthy features for OData and also the GridService which can now insert an item on top or bottom of the grid. Another well worth to know addition is the full unit tests coverage >95% of all Editors & Filters (there's only 2 files left to test), of course a couple of issues were found while doing these tests, for example Editors weren't working correctly with complex objects (field with dot notation) and now they do.

OData

In terms of OData features, the count can now be part of the OData query (it's an optin, you need to enable it yourself via the new options enableCount), you can see the updated OData Example. Also I would be happy to have some volunteers who can help me improve the OData usage by moving the postProcess necessary code inside the Aurelia-Slickgrid which would cleanup your client code (the GraphQL already uses this technique), I'm asking for volunteer since I don't personally have access to an OData server anymore.

Deprecations

The statistic property was replaced by metrics which is a better representing word, the previous property name still works but it's better to change the name when you have a chance. You can see an example here, which can be displayed as Metrics: 2019-10-02 17:03 pm | 6 of 500 items (you can customize the output)

Last but not least, if you like the lib and haven't yet up voted, please do ⭐️ cheers 😸

Features

• backend: extract Pagination into its own Service to expose methods (#230) (9af863d)
• conditions: add field type float/integer to sorters/filters util (#233) (017f93d)
• export: add delimiter/listSeparator override to use with GraphQL (#232) (c4ae19d)
• export: add Export to Excel feature (#235) (feeb6ad)
• filter: add unit test suite for multiple Filters (#221) (f0a526d)
• insert: add option to insert item at bottom of grid (#229) (ed759e8)
• metrics: deprecated Statistic and renamed to Metrics (#225) (147c894)
• odata: add "enableCount" flag to add to OData query (#224) (5018ca8)
• sorters: consolidate & provide all date sorters (#218) (f8e2127)
• tests: add AutoComplete Filter & Editor Unit Tests (#222) (77bb18b)
• tests: add missing AutoComplete unit tests (dd04d4e)
• tests: add unit tests for SingleSelect & MultipleSelect Filters (#219) (42e38a6)

Bug Fixes

• backend: query should not include pagination option when disabled (#220) (e9731d9)
• editor: autocommit should not save if value is the same as before (#238) (78d1d81)
• editor: provide complex object override path for select editor (#237) (bb467cd)
• editors: complex objects should work with all editors (#226) (b792863)
• filter: should be able to filter even on hidden columns (#236) (390fe8a)
• gridService: addItem/updatedItemById pass array to setSelectedRows (#234) (96d04cc)
• gridService: refactor the code and add more unit tests (8a4d438)
• gridService: upsertItem(s) should trigger onItemAdded/Updated event (#231) (11c3c52)
• styling: styling issue in Firefox after col reordering (#228) (a737cdf)

This new release introduces couple of new big new features, the 2 biggest ones are the following:

1. I18N now optional... you no longer need to install I18N when using only 1 locale (English or any other locale). If it's other than English, you can also provide a custom locale file, more info in links below.
   • new Wiki Localization-with-Custom-Locales and a new demo repo. 🎉
2. Add new Range Filters, basically allows to have filter between min/max values but combined into 1 column filter. You can use a regular input filter and use the 2 dots notation to separate 2 numbers (e.g.: 5..10 between 5 and 10), and there are also 2 new Filters which are the Slider Range and the Date Range Filters. These new filters also work with the Backend Services (OData, GraphQL) which were updated and tested.
   • new Wiki Range Filters and new Example 23 to demo this new feature.

Other interesting additions

• add support of OData v4
• add more Cypress E2E tests

Also worth knowing that every single bug reported that were fixed in the past month now also have Cypress tests to avoid seeing these bugs again.

Use and like this library... please make sure to up vote ⭐️

Features

• cypress: add Cypress E2E testing to CircleCI build (#207) (1d3e341)
• filter: add filter search range functionality (#214) (e9298ed)
• filter: add optional placeholder to multiple select (dc6a2f6)
• registry: add npm package info for github package registry (7727c3c)
• tests: add Cypress E2E tests to cover hidden columns (#211) (c76ca3e)
• translate: make I18N an optional dependency (#208) (6bb9056)

Bug Fixes

• dom: ColumnPicker & GridMenu were creating multiple DOM elements (#205) (901da5e)
• editor: fix negative number in floatEditor (c02379b)
• odata: use contains with OData version 4 (#215) (2ff9a91), closes #263
• presets: Grid State & Presets stopped working for columns (#213) (d1949aa)
• selection: selected row should be none after filtering (#210) (315a8b8)
• bs4: fix some Bootstrap 4 styling (432bad0)
• i18n: aurelia-i18n needs to stay a dependency even if optional (6920fbf)

Bug Fixes

• backend: clear empty filter by header menu not stopping spinner (#206) (1537315)
• gridMenu: adding user customItems in GridMenu was no longer showing (#209) (38c1c4c)
• gridMenu: external grid menu was not triggering (#204) (2f83774)

As of version 2.12.2, all Services and all Unit Tests are done, the only major testing left to would be Integration Tests (editors, filters, pagination & angular-slickgrid entry file). This also means that all major pieces, all the mechanic if we could say, of the library are now fully tested and a few small issues were detected and fixed while doing all of these nearly 1400 tests and we have now achieve ~75% coverage (also worth to know, there are 7000 lines of code to test, so it's quite a feat). 🎉 😸

Features

• tests: add ExportService full test suite (#201) (01fbb6b)
• tests: add more ResizerService tests (#203) (ad6f698)

Bug Fixes

• export: exporting null or undefined should replace by empty string (06f9e00)
• menu: Column Picker & Grid Menu not updated dynamically (#200) (5b88df0)
• slickgrid: use previous version of Slickgrid to fix column autosize (9d90cb6)

Practically all Services are now covered by unit tests (there's only 1 service left to test) on top of all the other other unit tests already done and we are now sitting at over 72% test coverage (1300+ tests). We also replaced moment with moment-mini for a smaller lib bundle, since we only use moment for fixed date format and we don't need any locales (moment-mini only uses the English locale).

Features

• build: replace moment with moment-mini for smaller build (3a0b2a9)
• tests: add AureliaUtilService full test suite (#195) (a7fca15)
• tests: add more unit tests to FilterService (#199) (7bf603f)
• tests: add some unit tests for FilterService (#198) (6097a8d)

Bug Fixes

• backend: regression in both backend service with gridstate (b77c15e)
• filter: regression, small issue detected when using compound filter (d32e0a0)
• filterService: regression introduced in "clearFilters" last commit (0a0cd8e)
  • small regression fixed in 2.12.1 and only out for a day.

There are now over 1000+ unit tests and we just passed 60% coverage.

Features

• example: add Bootstrap Tabs example (8255772)
• odata: add presets to GridOdata Service (and unit tests) (#193) (64b07fe)
• tests: add GraphqlQueryBuilder unit tests (#189) (3f9edba)
• tests: add missing sorterUtilities test (#188) (a2f5a67)
• tests: add more RowDetailViewExtension unit tests (#187) (ffd9f0f)

Bug Fixes

• core: update to latest SlickGrid version to fix column resize (4590844)
• queryField: queryFieldFilter and queryFieldSorter have precedence (#191) (73c8f37)
• singleton: all Services should be singleton, fixes #190 (#192) (0bbb0ae)

Quick Summary

The library now has over 800+ unit tests (with Jest) and recently reached 50%+ test code coverage, which is a big achievement, that is a lot of tests to write. This version also introduce a lot of refactoring on the CRUD methods (with an extra & newly added upsert method) available in the Grid Service (which is now fully tested). New method names are replacing the older methods (which will be deprecated in the future). The biggest change is that instead of passing true, false, true (which is not very explanatory), was converted to an object with the flag properties, see below). All option flags still have their own defaults when no flag are provided (highlightRow: false, selectRow: true, triggerEvent: true), for example

Before

this.aureliaGrid.gridService.updateDataGridItem(item, false, true);

After

this.aureliaGrid.gridService.updateItem(item, { highlightRow: false, selectRow: true });

Features

• build: add Codecov badge to show coverage (601078a)
• build: add Cypress CI to build plan (4e7b1fa)
• copy: add ExcelCopyBufferOptions to grid option (#178) (b309e82)
• demo: add custom formatter with onCellClick (dd4d109)
  • Demo
• euro: add Euro Formatters and Sorters (day/month/year) (#168) (ab408a1)
• formatter: add formatterOptions to Formatters, Grouping Formatters (#166) (015476d)
• formatters: consolidate all Date Formatters into 1 method call DRY (#169) (4bcb74b)
• gridService: add "upsertItem" method to Grid Service (#179) (e65609b)
  • Wiki
• jest: add few more Formatter unit tests & fixed some Formatters (0d8ca4a)
• menu: add options to exclude column titles from Menus (#176) (71d290d)
• resizer: add calculateAvailableSizeBy container option (#161) (2085a62)
• resizer: add new method "pauseResizer" (#183) (72fa5db)
  • Demo | Wiki
• rowDetail: add option to limit expanded row to only 1 at a time (#177) (e835b34)
• test: add lib index entry point unit tests (#163) (5c6d028)
• tests: add Aggregators full test suite (802521a)
• tests: add Extension Service full test suite (#174) (55c3502)
• tests: add few Grid Service unit tests (#182) (b34b585)
  • feat(gridService); change all CRUD methods to options argument
• tests: add Grouping Formatters full test suite (#165) (f9a7872)
• tests: add missing Formatter unit tests (#162) (51c0bbd)
• tests: add more Extensions unit tests (#184) (5f6f3b0)
• tests: add more RowDetailExtension tests (#185) (e4d99e9)
• tests: add Service Utilities full test suite (#167) (e6e4ed8)
• tests: add Sorters full test suite (#164) (d375939)

Bug Fixes

• copy: copy+paste cells was not working (#160) (7d5090a)
• dateEditor: allow backspace for deleting a date (7ddb0cc)
• editor: dynamically adding editor column throws error (#181) (41517d4)
• editor: force user input in autocomplete (15cfa2d)
• editor: integer editor was always showing invalid when null value (#180) (ca7c591)
• gridState: columnPicker & gridMenu not triggering gridState change (#170) (01e5a56)
• height: should throw error when no height or enableAutoResize (70f069c)
• rowDetail: update to latest SlickGrid version to fix scrolling (c159be0)
• selection: styling of row selection is incorrect when adding rows (325ff0b)
• selection: syncGridSelection and preserveHidden (#173) (bc33773)