Releases: ghiscoding/aurelia-slickgrid
upgrade to jQuery 3.6 and jQueryUI to 1.13
Selection Auto-Scroll, OData select/expand and Filters Modal
This new version brings a few new features and contributions, the main ones are:
- Cell/Row Selection Auto-Scroll, a new live Slickgrid-Universal - Example 17 to demo the feature (not an Aurelia demo but the code logic is the same)
- Row Dragging Auto-Scroll, check Example 16 for a demo
- All-in-one Filters Modal, see a live demo on Slickgrid-Universal - Example 7
- OData new
$selectand$expandoptions & other OData fixes, see live demo Example 5 and consult updated OData Wiki - new Example 34, which is now the default route to demo a Real-Time Trading Platform, it also shows how fast SlickGrid really is.
Big Thanks to Contributors
Huge thanks for the following contributions
- OData contributions by @jr01
Thanks a lot 🚀
Installation
Please remember that all packages of @slickgrid-universal (v1.2.x) and Aurelia-Slickgrid (v4.1.x) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
Changelog 📜
For a complete picture, you should take a look at both lib change logs
please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- demo: add new Example 34 to demo Real-time Market Trading (#690) (6c76be9)
- demo: add new Example 34 to demo Realtime Trading (#698) (7820e39)
- OData: add
$selectand$expandquery options (#697) (5ced150), closes #588
Bug Fixes
Contributors
Assets 2
BREAKING CHANGE - 4.0.0 major version
⚠ BREAKING CHANGES (Slickgrid-Universal 1.x)
Follow the Migration Guide 4.x
Breaking Changes
- Slickgrid-Universal 1.x major (and stable) release, it has some Breaking Changes but should be transparent for must developers that is if you are using the default CSS theme.
If however, you use a lot of SlickGrid SASS variables (all of them were renamed to now include a $slick- prefix). If you also use a lot of the SlickGrid CSS classes directly for any of the menu plugins then you will also be impacted. in any case please review the Migration Guide 4.x
Biggest Internal Change (full SlickGrid controls/plugins rewrite)
The biggest internal change made in the lib for this version was to rewrite all of the SlickGrid controls/plugins into Slickgrid-Universal and that took a few months. Prior to this release, all of these controls/plugins were using what we can call bridges or wrappers (e.g. we had gridMenuExtension.ts for the Grid Menu that was pointing to the 6pac/SlickGrid/controls/slick.gridmenu.js with a bridge so that the lib could add our custom list of commands like "Clear Filters, "Clear Sorting", etc... that didn't exist in the core repo) now with the rewrite we can say goodbye to the bridges and we now only have 1 file which got renamed to common/extensions/slickGridMenu.ts. So what I did was to move them all into the lib but also rewrite all the jQuery code as plain JavaScript (or I should say TypeScript) and add proper unit tests for all of that.
You might ask... Does that mean we can get rid of jQuery? The answer is unfortunately still No, but we are closer than before (I would say about 60% of SlickGrid is now in plain JS code, prior to this release it was probably around 30%). What is coded in plain JS at this point are: all Editors, Filters, Controls & Plugins (there are some exceptions like AutoComplete Editor & DraggableGrouping which require jQueryUI). SlickGrid itself (and its DataView) are also still written in jQuery and that will take a lot of effort to convert.
Also with the rewrite comes a full set of new unit test suites (over 500+ new tests) and a bunch of new E2E tests (Cypress). This will now be a lot easier to maintain and we won't need to wait for a new release in both SlickGrid repo and this repo to take advantage of plugin changes & extra features. Another great thing about the rewrite is that there were a lot of duplicate code in SlickGrid plugins because every plugins had to be written as standalone (e.g. CellMenu and ContextMenu are to a very high proportion the same 1000 lines of code with the only small difference of what event is triggered to open the menu, the rest is the same), but with the rewrite in here, I removed all the duplicate code and merged a lot of independent CSS classes (that is the change that might impact you if you're using the default theme, so keep reading).
Some of the main changes
- full controls/plugins rewrite in plain JS/TS with full unit test suites
- reconciled a lot of duplicate code for all menu plugins
- reconciled all the menu plugins CSS classes, (headerMenu, cellMenu, contextMenu, ...)
- if you use SASS variables or CSS directly this might impact you
- I imagine that we probably also have a smaller bundle size (but untested, see for yourself)
- there are also styling & features improvements with all the rewrite
- you can now use both HeaderMenu and HeaderButtons on the same grid, see Example 7
Installation
Please remember that all packages of @slickgrid-universal (v1.1.x) must be updated at the same time as Aurelia-Slickgrid (v4.0.0), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
Changelog 📜
For a complete picture, you should take a look at both lib change logs
please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
⚠ BREAKING CHANGES
new Custom Tooltip (plugin)
new Custom Tooltip plugin
This new release brings a new Custom Tooltip plugin (opt-in), it can parse [title] attributes to create regular tooltip or create your own Custom Tooltip via a Custom Formatter. You can also create Custom Tooltip for Column Headers and Column Header-Row (filters).
- new Custom Tooltip - Wiki
- animated gif
- new live Example 33
new Row Move shadow item
When using the Row Move feature, we often forget which row we started the drag/move, so by adding a shadow item (it's simply a clone of the row you're dragging with absolute position that follows the mouse position) and this makes it easier to remind the user which row exactly is being moved. This is a new flag option hideRowMoveShadow that is enabled by default (if you want to use it, then change it to false).
- demo Example 16
A reminder to everyone, this is an Open Source project and everyone is welcome to contribute (even as small as fixing a typo in a Wiki is welcome). We all gain from contributions.
Installation
Please remember that all packages of @slickgrid-universal (v0.19.0) must be updated at the same time as Aurelia-Slickgrid (v3.12.0), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
Changelog 📜
For a complete picture, you should take a look at both lib change logs
please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- plugin: add example for new Custom Tooltip plugin (#663) (c61e3b0)
- plugin: add row move shadow item while moving/dragging row (#664) (d4dfff7)
Fixes
v3.12.1
Tree Data improvements & more...
Tree Data improvements
Tree Data filtering will now include children when the parent item passes its filter criteria, please note that this is different compare to previous version where it would not include children and if you still want the same behavior as before then you can use the new flag excludeChildrenWhenFilteringTree.
2x new options (flags) were created
excludeChildrenWhenFilteringTreeautoApproveParentItemWhenTreeColumnIsValid(which only work withexcludeChildrenWhenFilteringTree: falsewhich is default)- animated gif demo
See the update Tree Data - Wiki for these new options and Example 28 for a live demo of all options.
New Grid Option
new grid option ignoreAccentOnStringFilterAndSort to ignore text with accent (like any Latin language) while Filtering/Sorting, see Wiki
Resizer
auto-resize feature which can now optionally use the Resizer Observer instead of (or in addition to) the window resize. This auto-resize - Wiki section shows you how to use this technique.
A reminder to everyone, this is an Open Source project and everyone is welcome to contribute (even as small as fixing a typo in a Wiki is welcome). We all gain from contributions.
Installation
Please remember that all packages of @slickgrid-universal (v0.18.0) must be updated at the same time as Aurelia-Slickgrid (v3.11.0), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
Changelog 📜
For a complete picture, you should take a look at both lib change logs
please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
Backend Error Handling Improvements & Cancellable Events
Better Backend Error Handling for Filtering, Sorting & Pagination 🚀
As the title says, this new version brings better error handling of error thrown by backend, the biggest change is that if the backend server throws an error the grid will now rollback any changes in the grid (whether it's a Sort, Filter or Pagination change). So the lib now keep a reference of the last successful change and rollback that last status and the backend query string is also rolled back if any error is thrown, so you won't be left out with an unfinished activity.
- see Example 5 for a demo of that, the last column will always throw while Sorting/Filtering & there's also an extra button to test pagination error.
Cancellable Events for Filtering, Sorting & Pagination
Also in tandem with the previous paragraph, we now also have access to cancellable events (whether it's a Sort, Filter or Pagination change).
See the list below of all 3 possible events with their associated onBeforeX event:
- Filtering (
onBeforeSearchChange) - Sorting (
onBeforeSort) - Pagination (2 events are available depending on the grid type)
onBeforePaginationChange(with Backend Service API)onBeforePagingInfoChanged(with Local In-Memory grid)
For example
<aurelia-slickgrid on-before-sort.delegate="handleOnBeforeSort($event)" ...></aurelia-slickgrid>handleOnBeforeSort(e: Event) {
e.preventDefault();
return false;
}Installation
Please remember that all packages of @slickgrid-universal (v0.17.0) must be updated at the same time as Aurelia-Slickgrid (v3.10.1), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
Changelog 📜
For a complete picture, you should take a look at both lib change logs
please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- backend: rollback on error & add cancellable events (#647) (4b28424)
- tree: add
dynamicallyToggledItemStatemethod to toggle parent(s) (#649) (7a48d2a)
Bug Fixes
- composite: calling Edit change shouldn't affect Mass-Update (#648) (c35415c)
- footer: use
getFilteredItemCountto show correct item count (#651) (e93354c) - grid: invalidate grid after setItems to re-render grid (#650) (de5a906)
- grouping: Draggable Grouping should clear preheader when called (#652) (3b7a41a)
new CSS Variables feature
Small Release Intro
This new release adds CSS Variables (see Wiki) and few more fixes to get Angular-Slickgrid to finally use Slickgrid-Universal, so you now have the choice to use SASS and/or CSS Variables. There's a few more changes that you can see below, including aria-label for assistive screen reader (it's not perfect, it's just a start and if anyone want to contribute please do so).
Installation
Please remember that all packages of @slickgrid-universal (v0.16.2) must be updated at the same time as aurelia-slickgrid (v3.9.2), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
Changelog
For a complete picture, you should take a look at both change logs
also remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits now happen on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Bug Fixes
Tree Data Grid State & Presets
Tree Data
this new version adds the Tree Data into the Grid State & Presets (when enabled), so you could reload the grid by saving reapplying the same Grid State and Presets (toggled items) that it was before refreshing the page. There's also some more enhancements and fixes which you can see from the list below.
Others
in this version, we converted a few of the Filters/Editors from jQuery to native. That does not mean we can drop jQuery, but it's a start, SlickGrid uses jQuery heavily so I'm not even sure if it will ever be possible to drop jQuery completely (there's also a few external libs that are jQuery libs: multiple-select.js, jQueryUI autocomplete & slider range). On the other end, this conversion might bring better performance in some areas, at least I would imagine, on single/multiple Filter & Editors with large collection.
On an unrelated news, but still noteworthy, this new version of Slickgrid-Universal will be used in the next major version of Angular-Slickgrid which is in progress and will be released in the next couple weeks. At least it's good news for me since I will finally have 1 common place for all the SlickGrid code and easier to fix bugs & add new features (it was always the goal), it's progressing well :)
Installation
Please remember that all packages of @slickgrid-universal (v0.15.0) must be updated at the same time as aurelia-slickgrid (v3.8.0), they will always get bumped on the same day to avoid any upgrade issues.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
Changelog
For a complete picture, you should take a look at both change logs
also remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits now happen on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- footer: reuse Footer Component from Slickgrid-Universal (#609) (a9a6c21)
- tree: add Tree Data as Grid State/Presets (#596) (8670544)
Bug Fixes
Tree Data Optimizations/Fixes and Single Column Resize
This new version brings a lot of Tree Data Optimizations and Fixes. We now also have single column resize by content (enabled in all grids)
Tree Data
- refactor flat to tree structure and vice versa to optimize speed, it seems to be ~40-50x faster 😮🚀
- yes it is incredibly faster, especially on first page load (previous implementation of converting from flat to tree structure was quite slow, there are specific npm libs that do a much better job at doing that than my own implementation), it wasn't working with 100k rows before but now it does 💯
- there's a lot of fixes and new features, you can see all features in the new Tree Data - Wiki and demos Example 27 / Example 28
- for a complete list of all features/enhancements (30+ changes), you can take a look at this PR #567 which have checklist of all the changes
Single Column Resize (double-click / header menu)
This new feature is enabled in all grids by default (and as any other feature of the lib, there's flag to disable it too). This new action is very similar to Excel column resize, it will read through the entire dataset (max at 5k rows) and calculate what width it requires to display all the text (it's not an autofit, it's really a resize by content calculation). The feature comes from a reuse of the code that was put in place to handle an entire Grid Resize by Content that was shipped in previous version except that now we also have a single column resize (the default grid resize will always be autofit in viewport).
- available via a double-click on the resize icon handle (between 2 columns), this is quite similar to how you can resize a column in Excel
- available via a new column header menu action ("Resize by Content")
- the single column resize uses the same options as the full grid resize by content, see all the available option below (just a hint, column
resizeMaxWidthThresholdis an option I often use) - a new Resize by Content - Wiki
Resize by Content Option - Small Breaking Change
Because there were many resize options ending up in the Grid Option, I moved all of them into a new ResizeByContentOption, you can see all info in the new Resize by Content - Wiki
Installation
Please remember that all @slickgrid-universal (v0.14.1) must be updated at the same time as aurelia-slickgrid (v3.7.1), they always get bumped in versions on the same day to avoid upgrade issues.
Switch GitHub demo to Bootstrap 5
Now that Bootstrap 5 is official, I think it's a good time to switch Aurelia-Slickgrid to Bootstrap 5 and just remove the Bootstrap 3 demo (it still work but there's no need to keep the BS3 demo any longer). You can also visit the Bootstrap 4 demo. Also remember that Aurelia-Slickgrid also has different Styling Themes (see Wiki) and you can also make your own theme via all the SASS variables (feel free to contribute your theme to the lib).
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
Changelog
For a complete picture, you should take a look at both change logs
also remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~80%), so most of the commits now happen on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- resizer: add
resizeByContentOnlyOnFirstLoadgrid option (#576) (424aea4) - resizer: add single Column Resize by Content dblClick & headerMenu (#579) (631465a)
Bug Fixes
- backend: able to preset filters on hidden columns & all queried (#582) (9953dd9)
- grid: make sure dataset is an array before passing it to dataview (bfd8344)
- presets: loading columns presets should only be done once (#577) (91d0ea6), closes #341
- resizer: fix a regression bug caused by previous PR (#580) (95185f0)
- resizer: remove delay to call resize by content to avoid flickering (#578) (1661c7e)
- sorting: multi-column sort shouldn't work when option is disabled (#581) (e752b2c)
- tree: few issues and huge improvement found in Tree Data (#567) (0febdf0)
- build: target es2017 instead of es2018 to fix aurelia-cli/requireJS (7eeff02)
Resize Columns by their Content
The biggest feature is this release is probably the Resize Columns by their Content (that is an opt-in feature since it requires cpu cycle to parse through the dataset to calculate width of each column).
- Example 32 - Resize by Content (toggle between the 2 buttons to see the resize differences)
- Resize by Content - Wiki
There's also Row Selection Count that is now showing in the Custom Footer (unless you already have left footer text, if so it won't override it). The grids with colspan were also not exporting correctly and now they do (that is related to reading the item metadata)... there's a few other things, just see the full list below. You can also now filter empty values on the single/multipleSelect Filter (see Wiki)
Installation
Please remember that all @slickgrid-universal (v0.13.0) must be updated at the same time as aurelia-slickgrid (v3.6.0), they always get bumped in version on the same day to avoid upgrade issues.
- For SystemJS users, you might need to update your
dependenciessection in youraurelia.jsonfile. We are now usingdequallite version, so you might need to simply rename the packagedequalto"name": "dequal-lite"and you should be good to go
Direct Link to Example Components
Also note, every Example now have a direct link to each Component TypeScript file, the link will be on the far right BS4+ (or beside the title in BS3). This will be much quicker to find the associated code of the Example ViewModel Component you're looking at.
Enjoying the lib?
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕
... and if you already have, well thank you 😺
Cheers
Changelog
For a complete picture, you should take a look at both change logs
also remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~80%), so most of the commits now happen on that side.
- review the Slickgrid-Universal changelog
- and the Aurelia-Slickgrid changelog (below)
Features
- footer: add row selection count to the footer component (#563) (dcf61f6)
- resize: add column resize by cell content (#560) (f5211c3)