Composite Editor bug fix

Bug Fixes

• composite: selected row count always 0 on mass-selected, fix #951 (757155f)

Row Detail fixes

Bug Fixes

• plugin: Row Detail column sorting was offset, fixes #949 (09cc298)

upgrade to jQuery 3.6 and jQueryUI to 1.13

Features

• core: upgrade to jQuery 3.6 and jQuery-UI 1.13 (7e7f24c)

Bug Fixes

• core: throw error when [gridOptions] is missing, fixes #910 (974be12)

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 Angular demo but the code logic is the same)
• Row Dragging Auto-Scroll, check Example 17 for a demo
• All-in-one Filters Modal, see a live demo on Slickgrid-Universal - Example 7
• OData new $select and $expand options & other OData fixes, see live demo Example 5 and consult updated OData Wiki
• new Example 33, 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 Angular-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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

Features

• demo: add new Example 33 to demo Realtime Trading (75987b4)
• OData: add $select and $expand query options (b445a79)

Bug Fixes

• build: should use EventSubscription to be unsubscribed (ee81db3)
• • demo: small leak fix when leaving the page (b488757)
• graphql: fix range filtering with ".." (cfcd16e)
• odata: fix range filtering with ".." (817ca59)
• core: pagination set in global config should work, fixes #879 (7237a23)
• rxjs: use same RxJS version as Slickgrid-Universal (9f68103)

BREAKING CHANGE - 4.0.0 major version (Ivy only)

⚠ BREAKING CHANGES (Ivy only & Slickgrid-Universal 1.x)

Follow the Migration Guide 4.x

Breaking Changes

• Ivy only build with Angular 13+ (no more UMD bundle, IE is officially out of the picture)
• 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 add 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

Minimum Requirement Changes

• Angular-Slickgrid >= 13.0.0
• ngx-translate >= 14.0.0
• TypeScript >= 4.4.5
• RxJS >=7.4.0

---

Installation

Please remember that all packages of @slickgrid-universal (v1.1.x) must be updated at the same time as Angular-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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

⚠ BREAKING CHANGES

• upgrade to Slickgrid-Universal official 1.x major version
• upgrade Angular 13 using Ivy build without UMD bundles

Features

• plugins: use new internal slickgrid-universal plugins (9ef4651)

Bug Fixes

• styling: better support of auto width on drop menu (44a979d)

• Merge pull request #864 from ghiscoding/feat/slickgrid-universal-plugins (ee3bf0e), closes #864

• Merge pull request #857 from ghiscoding/feat/angular13 (9774b80), closes #857

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 32

new Row Move shadow clone 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 17

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.2) must be updated at the same time as Angular-Slickgrid (v3.3.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 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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

Features

• plugin: add example for new Custom Tooltip plugin (44dd1cd)
• plugin: add row move shadow item while moving/dragging row (9cf714f)

Fixes

v3.3.1

• extensions: add missing DI in Grid Menu (#856) (8f2fc550)

v3.3.2

• build: add DOM purify optional default import to fix rollup builds (25091d0)

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

• excludeChildrenWhenFilteringTree
• autoApproveParentItemWhenTreeColumnIsValid (which only work with excludeChildrenWhenFilteringTree: false which is default)
• animated gif demo

See the update Tree Data - Wiki for these new options and Example 29 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

Big Thanks for Contributions

A big thanks to @jr01 for his contribution to the auto-resize feature which can optionally use the Resizer Observer instead of (or in addition to) the window resize. The auto-resize - Wiki will soon be updated (in the meantime you can use it with gridOptions.autoResize.resizeDetection = 'container'

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 Angular-Slickgrid (v3.2.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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

Features

• core: use Slickgrid-Universal Pagination reusable component (9c47112)
• tree: demo new excludeChildrenWhenFilteringTree flag (7aa3d84)
• resizer: remove redundant bindAutoResizeDataGrid call (#839) (cee71c8)

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

<angular-slickgrid (onBeforeSort)="handleOnBeforeSort($event)" ...></angular-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 Angular-Slickgrid (v3.1.0), they will always get bumped on the same day to avoid any upgrade issues. You might also need to upgrade to latest RxJS 7.3.0 version as well

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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

Features

• backend: rollback on error & add cancellable events (d3f31d7)
• tree: add dynamicallyToggledItemState method to toggle parent(s) (afb61cf)

Bug Fixes

• composite: calling Edit change shouldn't affect Mass-Update (b25d56d)
• footer: use getFilteredItemCount to show correct item count (fbee1a1), closes #469
• grid: invalidate grid after setItems to re-render grid (4feebc8), closes #820
• grouping: Draggable Grouping should clear preheader when called (8621c67)

BREAKING Version 3.0.0

New major 3.x version 🚀

This is the next major and breaking version 3.x, it shouldn't be too complicate to upgrade just follow the Migration Guide to 3.x

biggest changes are the following

• it now uses a central monorepo library Slickgrid-Universal
  • a big portion of the code (90%) got moved into the monorepo and you will soon have to learn and love to use it
• it should also have a smaller bundle size (because it uses a monorepo, you can now choose what to install and what not to install)
  • a few Services are now opt-in to make smaller builds (Excel Export, Text Export, OData, GraphQL and much more)

there are new features included in this new Slickgrid-Universal monorepo

We included new Features as well, the biggest and most useful Feature is the new

• Composite Editor which allows you to Create, Clone, Update, Mass Update & Apply Mass Changes on Selected Rows via a modal window
  • Check out the new Example 30
• SlickGrid and DataView objects now have full Typing specs (in other words they all have .d.ts interface files)
  • Make sure to use the new SlickGrid and SlickDataView interfaces whenever you deal with these objects (there's also SlickNamespace for the entire SlickGrid namespace that includes controls, plugins, dataview, ...)
• You can now also use CSS Variables, if you prefer that over SASS, to customize styling (see Styling - CSS Variables Wiki)

To get started, make sure to follow the Migration Guide. Also note that all necessary Wikis have been all updated in one big push (you will see a mention on top of a Wiki saying "updated doc to 3.x version", for example Excel Export. Again make sure to follow the migration and/or clone the Angular-Slickgrid-Demos since they were already all updated

Follow the Migration Guide to 3.x

If you problems upgrading, you can open a Discussion

Minimum Requirement Changes

IMPORTANT below are the minimum requirements to upgrade (pay attention to RxJS which now requires 7.x), if for any reason you can't follow this minimum requirement then stick with the last version 2.30.4, it still works and should be for a wile. The only thing is that you'll be missing out of some of the new features introduced with version 3.x and also note that I stop providing fixes on older versions

• Angular-Slickgrid >= 12.1.0
• ngx-translate >= 13.0.0
• TypeScript >= 4.3.5
• RxJS >=7.2.0 (also a major bump)
• Bootstrap >= 4.5.0 (or any other UI framework like Bulma)
• IE11 support is dropped, min build target is now ES2018

Version 2.x is now out of support

Since I'm a team of 1 person (myself @ghiscoding), I won't be supporting the older version 2.x much longer unless there are small bug fixes to do. I still have a 2.x branch which I can update but I would prefer to only work on version 3.x.

Installation

Please remember that all packages of @slickgrid-universal (v0.16.1) must be updated at the same time as Angular-Slickgrid (v3.0.4), 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 repo 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.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (below)

---

⚠ BREAKING CHANGES

• use Slickgrid-Universal monorepo next major 3.0

Features

• add Composite Editor Modal example (3e2a4a2)
• core: use Slickgrid-Universal Aggregators (86a4e32)
• core: use Slickgrid-Universal Editors (a57edf8)
• core: use Slickgrid-Universal Formatters and Grouping Formatters (8648a88)
• footer: reuse Footer Component from Slickgrid-Universal (3932032)

Bug Fixes

• build: revert to previous ng-packgr build config (34890ca)

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 existed before refreshing the page. There's also some more enhancements and fixes that 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.

Some of the other internal changes made in this version also include a migration from TSLint to ESLint and upgrading Jest to version 27 and Angular 12.

• a big thanks to @jr01 for providing guidance on fixing some new warnings with Angular 12 and WebPack 5 🏆
  • read his comment and roughly the same as a readme instruction here

Major Announcement

the next major version is under active development and is expected to ship in couple weeks, it is a major rewrite and will require a few steps to upgrade but don't worry a very detailed Migration Guide is also in the process.

Why is it a big deal? Mostly because all the common code that Angular-Slickgrid & Aurelia-Slickgrid (2 libs that I support) are now moved into a monorepo lib called Slickgrid-Universal, this mean that Angular-Slickgrid code itself will get much smaller (10k lines of code are moved into the monorepo lib, and I won't have to duplicate features/fixes across 3 libs anymore, this is a big deal for me). The biggest structural change is that it's a monorepo structure, a lot of the Services were decoupled and are now becoming optional (OData, GraphQL, Text Export, Excel Export, ... and more are now opt-in) and this should help you ship smaller builds by downloading & installing only what you really use. For even more info, you can read a full explanation that was posted under an older release here under the section labeled "What's coming in the Future". Also note that Aurelia-Slickgrid has been using Slickgrid-Universal for the past 6 months, so I don't expect any problems going ahead with this change. There's also new features only available via the new major version, the biggest one is called Composite Editor modal, you can see a live demo on Aurelia-Slickgrid - Example 30

Also note that since I'm a team of one, well version 2 support will end as soon as version 3 is out. I however will keep a version2 branch in case of last minute fixes. Always remember that this is an Open Source project, please ask your questions on Stack Overflow and feel free to contribute, I'm always glad to get help 👷👷‍♀️

Minimum Requirement Changes

• Angular-Slickgrid >= 12.0.0
• ngx-translate >= 13.0.0
• TypeScript >= 4.2.4
• RxJS >=7.0.0 (also major bump)
• Bootstrap >= 4.5.0 (or any other UI framework like Bulma)
• IE11 support will be dropped, min target will be ES2018

3.x ETA 🤞 - Sometime in July or early August 🌞⛱️
You can follow the progress of the open PR #803

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

---

Features

• deps: migrate from TSLint to ESLint (a60432b)
• editors: convert jQuery to native element for few Editors (f1a8c60)
• editors: convert jQuery to native element on longText Editor (cd3bf5e)
• editors: convert jQuery to native element on slider editor (871f86b)
• editors: replace jQuery with native element on date editor (149c05f)
• editors: use class inheritance to extend main input editor (9478692)
• filters: build multiple-select options from native dom elements (92813b3)
• filters: convert jQuery to native element on compound filter (fa8c174)
• filters: convert jQuery to native element on date filters (67840e3)
• filters: convert jQuery to native element on more filters (fd064cf)
• services: convert jQuery to native elements (fc2132f)
• tests: upgrade jest-preset-angular with Jest 27 (c68a5e6)
• tests: upgrade jest-preset-angular with Jest 27 (e2447ba)
• tree: add Tree Collapse Grid State/Preset (87d5c2a)
• editors: add new Input Password Editor which uses common inputEditor (66535fd)
• filters: convert jQuery to native element on few more filters (331accf)

Bug Fixes

• addon: providing columnIndexPosition should always work (4ff9935)
• demo: we should be able to move row(s) and keep selections (50e235c)
• editors: longText Editor (textarea) was scrolling to page bottom (e6d3a31)
• editors: select dropdown value is undefined it shouldn't call save (17555f2)
• export: expanded Row Detail shouldn't be exported (b6299e4)
• filters: filtering with IN_CONTAINS should also work with spaces (579e13f)
• formatters: shouldn't auto-add editor formatter multiple times (6c0cf5f)
• frozen: in some occasion column pinning changes column positions (0764013)
• menu: toggle filter bar could be out of sync w/horizontal scroll (5ed2ea9)
• pagination: should be able to toggle Pagination (4272b18)
• plugin: row move shouldn't go further when onBefore returns false (97c5f59)
• state: changeColumnsArrangement should work w/columnIndexPosition (831773b)
• state: Grid View/Columns dynamically should work w/row selection (65bf5dc)
• state: Grid View/Columns dynamically work w/row move/detail (d0bf315)
• styling: header title should show ellipsis if too long (50c7078)
• tree: using initiallyCollapsed change internal toggled state (91c48a2)
• tree: initial grid state should also include toggled presets (2c0cec8)
• tree: calling updateItems should not lose the Tree collapsing icon ([399f770](https://github.com/ghiscoding/angula...