Angular-Slickgrid

Last release of the year... 🎄

The Editors.longText now has a full new set of options (see longTextEditorOption interface) which you can add to your column definition editiorOptions

• New Wiki - Longtext (textarea) Editor

Also enhanced the 3rd party lib multiple-select.js to auto-position not only the top/bottom but also left/right, so it will typically be position as a drop down (bottom) showing on the right, but in some occasion you might not have enough space (for example if your column is the last column of your grid)

• See a demo on Example 27, open the last column filter and you will see the dropdown showing on the left side.

Final Note

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

Features

• editors: add few editor options to LongText (textarea) Editor (38c7442)
• filters: add auto position (left/right) to multiple-select lib (1b23b84)

Bug Fixes

• core: make @types/jquery as a dependency to avoid build error (966ebb0)
• editors: Select Editor option to return flat data w/complex object (a3e6427)
• exports: when cell value is empty object return empty string (0534d13)
• filters: use offset left to calculate multi-select auto position (left/right) (9d79e2d)

This release is not a huge release but it has certain features and fixes worth knowing about.

Small chore update was to just upgrade the lib project to Angular 8 (from 7) and also ng-packagr which is used to create the lib itself. You might be wondering, why not upgrade the lib to Angular 10 internally? Mainly to be a bit more on the cautious side, because Angular 9+ has the new Ivy rendering engine, so better play safe and stick with something that I know still works and is backward-compatible. This version should have no impact but just in case I decided to release it under a minor version.

There's also 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).

Small Possible Breaking change

If you get an error with JQuery.Event it's because I now use the correct jQuery Event Type, you simply need to install it via yarn --dev @types/jquery (or use the NPM command to install as Dev Dependency) to get rid of the build error.

Lastly...

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

Features

• core: update project lib to Angular 8 with newer ng-packagr (#617) (edae737)
• core: add "Empty Data" warning message when grid is empty (#631) (8f72e38)
• formatters: add a fake hyperlink formatter (#630) (694f0ea)
• formatters: add AlignRight and AlignCenter Formatters (#634) (3645d60)
• services: add 2x new methods hideColumnById(s) (#633) (e4455a9)
• core: add enableMouseWheelScrollHandler grid option (3150124)

Bug Fixes

• core: revert to use WebPack to run Cypress E2E tests (3b3c643)
• extensions: import jQuery mousewheel only with frozen, fixes #618 (#619) (c3b52db)
• filters: slider filter setValues really change input value (#621) (212c275)
• backend: OData/GraphQL pagination should display warning on empty (#632) (7d32bac)
• core: clear dataset when destroying & fix few unsubscribed events (#629) (0ee3421)
• core: Flatpickr is not destroyed properly & leaks detached elements (#627) (a9f7027), closes #625
• core: mem leaks w/orphan DOM elements when disposing, fixes #625 (#626) (d1e284f)
• core: properly dispose plugins to avoid detached DOM elements (#628) (3b4ccc4)
• core: nullify grid/dataView/gridOptions when destroying to avoid leak (b995b65)
• core: header columns grouping misbehave after hiding column (c89a21b)
• extensions: CellExternalCopyBuffer onKeyDown event leak, fix #635 (#636) (9ce8326)
• core: showing/hiding column shouldn't affect its freezing position (7907cb8)
• formatters: date formatters should accept ISO input & output to US (482d0f5)

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 #582
• 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 (#592) (43e483e)
• editors: add Clear Date button to Date Editor (#580) (f2059a2)
• services: add Toggle Filtering/Sorting & Hide Column methods (#587) (b9cf7f9)
• styling: add description to Compound Filter Operators (#588) (56588d1)
• styling: add Pagination button height sass variable (#596) (5db78c2)
• tests: add more Cypress E2E tests for grouping (#584) (90d47e6)
• styling: add frozen on all possible elements with SASS variables (#599) (a6f292c)
• chore: update Cypress reporter call with mochawesome (#614) (07bd99a)

Bug Fixes

• editors: add blank entry on Select Editor should happen once (#591) (f847e43)
• editors: update to latest Flatpickr version (#577) (0675b31)
• filters: disregard time when filtering date only format (#593) (9e3acdc)
• filters: tree data presets caused regression in any grid w/presets (#597) (74d611d)
• pinning: put back vertical scroll on grid after removing freezing (#581) (f07ff75)
• select: make a collection array copy to avoid change by ref (#595) (4d6a395)
• styling: grouping with checkbox should be aligned left (#582) (18289d3)
• styling: support other unit of measure in SASS (#590) (666e6ee)
• styling: Compound Filter Operator dropdown too wide in BS4 (#598) (cb48247)
• core: don't override alwaysShowVerticalScroll flag (#600) (4eb9237), 6pac/SlickGrid#537
• core: hide Grid Menu Filter/Sort cmd when disabling functionality (#607) (6a68e23)
• core: unsubscribe every possible events (#611) (2a92e78), closes #610
• interfaces: column types in GridStateChange (#609) (8705aac)
• styling: add missing pointer cursor to flatpickr inputs (32cd122)
• styling: flatpickr bg-color should be using SASS variable (#616) (8a613d4)

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

Also note that the latest version of Flatpickr has couple of small issues and that had a side effect in the Editors.Date of this lib, so to quickly fix this, I made a change to the package.json to use the previous working version "flatpickr": "4.6.3". There might be a way to use latest version but that would require some code change in the lib and I don't have cycle to look at that and since the previous version works then I'll stick with that for the foreseeable future.

Final Word

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

Features

• autocomplete: add much more functionalities to the AutoComplete (#559) (326ec5f)
• core: add loading spinner to AutoComplete Editor/Filter (#556) (9a44225)
• core: update npm packages & move ngx-translate to peer dependencies (#567) (023a7e0)
• styling: add extra SASS utilities and icon colors (#562) (529a15c)
• styling: find way to add colors to SVGs used by the lib (#557) (b551caa)
• tests: add more Cypress E2E tests for Language change (082ed22)
• tests: add more Cypress E2E tests for Pagination Lang change (dc1a96c)

Bug Fixes

• core: latest Flatpickr breaks Date Filters/Editors (#558) (d6e0bef)
• editor: SingleSelect Editor should show pick false value (#560) (0222d09)
• editors: AutoComplete Editor might have undefined object label (#555) (a8b9248)
• editors: fix couple of small editor bugs found (#563) (0894f16)
• styling: remove unwanted source map from css output files (#564) (e9fd212)
• styling: extra styling shouldn't override default bootstrap style (#570) (5cdc4d9)
• editors: all Editors should call commitChanges even when invalid, fixes #571 (#574) (fd052d1)
• styling: refactor Material/Salesforce styling theme (#573) (e2b138d)

This new release brings a new small feature 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 way of getting them.

1. use onExtensionRegistered from the rowDetailView grid options
2. use the (onAngularGridCreated) and then use getSlickgridAddonInstance()
3. The new way is still through (onAngularGridCreated) but this one now exposes all the addon instances (columnPicker, gridMenu, rowDetail, ...) via the extensions property

The Option 1 or Option 3 are probably the best way of getting the instance. The new Option 3 has the advantage of containing 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)

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 addon instances (#545) (3578d9e)
• editors: add min/max length options to text editors (#542) (cc17d36)

Bug Fixes

• editors: Editors should work with undefined item properties (#540) (5c33a48)
• footer: remove unnecessary row class to avoid negative margins (#541) (34ed648)
• interfaces: grid option enableColumnReorder can also be a function (#543) (82b064d)
• styling: tweak styling so that we won't need to use css !important (#544) (13abe5b)
• core: add missing inlineFilters DataView optional flag (#551) (a5ae4da)
• extensions: Row Detail gets blanked out for no reason, fixes #546 (#552) (0087dd2)
• extensions: adding Context Menu custom commands was not working (#548) (45bf561)
• extensions: Row Detail not always refreshing w/customId, fixes #546 (#550) (324f490)

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. You might have also notice that I've installed a Bot that will auto-close any issues that are missing the REQUIRED sections from the issue templates (I've installed that because I got tired of having to repeat the same questions over and over, if you want help then please take the time to fill in your issue form accordingly, 30sec of your time to fill in the issue template with all info goes a long way)... but again I would prefer any questions be asked on Stack Overflow

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 'angular-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) and by the way Angular is 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 Angular-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, Angular-Slickgrid will use Slickgrid-Universal which itself will use SlickGrid core lib, and anything related to Angular will remain in Angular-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 (#499) (6f7b569)
• pinning: add "Frozen Columns" to header menu (#494) (7782ad3)
• sorting: header menu clear sort, reset sorting when nothing left (#509) (5898c18)
• typing: add SlickGrid and DataView interfaces (#483) (2cee037)
• typings: add more TS Generic Types (#489) (a379837)
• badge: add Cypress badge (7c6c8e1)
• core: use DataView transactions with multiple item changes (#527) (154bfb1)
• styling: add custom footer font-size SASS variable (#519) (bc56030)
• tests: add more Cypress E2E tests for grid with Editors (#532) (701b624)
• tests: add more Cypress E2E tests for Tree Data (#525) (36f958d)

Bug Fixes

• core: add missing use of custom datasetIdPropertyName (#476) (9be8fbf)
• editor: float validator should accept decimal even without 0 suffix (#510) (04b4465)
• editor: shouldn't call cell changed when cell value is undefined (211a2b9)
• editor: shouldn't call cell changed when cell value is undefined (#516) (0aaeb02)
• example: use highest id as new id in addItem example, fixes #495 (#497) (1550d9d)
• excel: Excel Export add mime type to work in Firefox, fixes #500 (#501) (56c8e17)
• extension: registerPlugin not implemented correctly (#482) (92ffa3d)
• filter: recreate filter when toggling header row, fixes #493 (#496) (56d74ae)
• filter: Select Filter should use default locale without translation (#503) (5284ada)
• formatter: add possibility to parse a date formatter as a UTC date (#511) (53cc371)
• header: re-create header grouping title after changing picker cols (#502) (f03c6f9)
• lint: adhere to strict triple equality check (#477) (c49f950)
• pagination: disabled page buttons should not be clickable (#506) (fbe0d5f)
• picker: add missing pre-header title grouping extractor (#498) (ffcbf55)
• presets: compound filters operator not working correctly w/presets (#507) (f7b5270)
• styling: cell/context menus get re-position below the grid (#479) (eba2d0f)
• treeData: should support use of custom datasetIdPropertyName (#475) (7aa4f97)
• types: add missing option flags in grouping interface (#481) (a1fe38e)
• editors: add saveOutputType to finally have proper save format (#535) (cc8c31d)
• filter: Grid Preset Filters should work with Tree Data View (#522) (f574fe4)
• footer: tweak date format in custom footer for redability (#518) (b2a0823)
• menu: context menu to copy cell with queryFieldNameGetterFn (#537) (7e0640e)
• security: update standard-version npm pack to fix security warning (9d2a9f5)
• styling: sass variable should be interpolate before using calc (#536) (14f2fa0)

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 lot of recursion handling) and because of that it comes with some limitation (see below). There are 2 demos which represents 2 ways of building a grid with Tree Data.

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

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.

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 are 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

• editor: add new Dual Input Editor & extract all Editor Validators (#446) (06f5dc9)
• extension: add column position option for checkbox row selector (fc72ba0)
• extension: add column position option for Row Detail icon (#419) (36bdcd1)
• extension: add latest slickgrid with RowMove improvements (#428) (4f4b231), closes #256
• grouping: add missing Grouping interface properties, closes #430 (#432) (fe7a65a)
• query: add queryFieldNameGetterFn callback know which field to use (#434) (0d5a150)
• sort: add valueCouldBeUndefined column flag to help sorting (#429) (dcd7a41)
• style: add Sort icon hint on hover when column is sortable (#435) (a746c2d)
• styling: add CSS/SASS Material Design & Salesforce styling themes (#454) (0030763)
• translate: add namespace prefix + separator grid option (#462) (c23370e)
• treeData: add new Tree Data View feature, closes #178 (#455) (3250bde)
• gridMenu: update SlickGrid & add new Grid Menu options, fixes #464 (#473) (10f0b7d)

Bug Fixes

• editor: disregard Flatpickr error on Date Editor and fix output format (#445) (96e2973)
• export: add grouped header title (from pre-header) into exports (#436) (a315f85)
• export: remove unsupported file type, closes #452 (#458) (c00b6ab)
• filter: string filter should also work when using Contains (#427) (2c0765b)
• filter: when entering filter operator it shouldn't do any filtering (#431) (9d53315)
• formatter: exportWithFormatter should work with undefined item prop (#457) (3cfcab1)
• gridMenu: column picker list should include grouped header titles (#460) (e4a34a0)
• gridMenu: command "Togge Filter" disappeared, fixes #438 (#448) (b10c5be)
• gridService: crud methods should support custom dataset id (#453) (2c91f35)
• pagination: passing custom pagination sizes should work, fixes #456 (#459) (0367625)
• resizer: remove scrollbar measure compensate patch (#424) (bca1f0b)
• rowDetail: use latest SlickGrid to fix issue with id, fixes #440 (#449) (8f16559)
• sort: header menu sorting should include columnId property (0c47038)
• footer: custom footer metric texts could not be changed, fixes #470 (#472) (2681596)
• gridMenu: command "Toggle Filter Row" header row (#466) (4858794), closes #448
• locale: use correct locale text operator tooltip, closes #468 (#469) (d978946)
• odata: encode URI also for IN/NIN operators, fixes #463 (#471) (92bf9e3)
• resizer: check for undefined option instead of fallback (#474) (59975f0)

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. You can see Example 10 - Row Selections and Example 16 - Grid State

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

• menus: add "onAfterMenuShow" event to all possible menu plugins (#389) (141d01a)
• selection: add flag to disable syncGridSelection w/BackendService (#390) (f29c6f0)
• selection: preserve row selection & add it to Grid State & Presets (#388) (a50d489), closes #295
• excel: add some extra styling & width options for Excel export (#403) (d87ce2c)
• tests: update to latest Cypress version (dc3afa9)
• sort: add default sort field as grid option (00b0751)

Fixes

• rowDetail: add datasetIdPropertyName option in Row Detail, (#391) (197ea9f), fixes #387
• backend: updateOptions can be use with partial options - TS type (80bdaa5)
• footer: custom footer should work anytime pagination is disabled (7d9798a)
• locales: fix some Locales not showing up when not using Translate (#392) (4d5e65b)
• pagination: on filter change pagination should reset to 1st page (#397) (af64dd6)
• selection: filter data should work with row selection, closes #295 (#393) (f36a4f7)
• selection: row selection always be kept, closes #295 again (#399) (5e8f1df)
• editor: LongText Editor save button that was not working properly (90beeac)
• mousewheel: add jquery mousewheel lib to fix scroll in frozen grid (d2bc0e7)
• columns: add/remove columns dynamically, fixes #406 (324cb1a)
• example: should re-render after clearing groups, fixes #407 (7752abd)
• columns: remove columns dynamically with Editors, fixes #406 (903473d)
• formatters: decimalSeparator & thousandSeparator work tgt, fix #411 (67318d5)

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

Important Code Change (when using TranslateService)

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.

Cheers ⭐️

Features

• backend: add OData & GraphQL Service API interfaces (43d3a00, 11cc71c)
• backend: add option to use local filtering/sorting strategy (73c288b)
• examples: add new GraphQL without Pagination Example (f02ac2d)
• footer: add custom footer to show metrics (2054319)
• pagination: add Pagination to local grid (53aa9dc)
• rowDetail: add few object instances that can be used in child comp (9cc52c3)
• rowDetail: add Parent property to pass ref to parent comp (dd8c1cd)
• tests: add Cypress E2E for Local Pagination and fix new bugs found (b7b1a73)
• columnGroup: add columnGroupKey property in order to use translate (147470f)

Bug Fixes

• backend: cancel prior http calls to avoid inconsistent data shown (f9aaf54)
• build: TS warning on a missing Type (b894ee1)
• cypress: fix failing Cypress E2E test (e78b2d9)
• examples: use spinner only when loading data (d0b4820)
• examples: use valid date format (f66703a)
• filter: creating blank entry should only be entered once (3b769a4)
• filters: remove filter DOM element IDs to avoid duplicate IDs (4b83133)
• header: column header grouping should be re-render after a resize (beda628)
• menu: remove unused code in Context Menu to select cell (a2ae4bb)
• pagination: reload local grid with pagination presests w/same data (80eef1a)
• pagination: should work with page number defined in presets (95428ad)
• resizer: grid size fix for backend service with pagination disabled (6c4bcca)
• styling: add missing SASS variable import (6de44e6)
• styling: fix some styling issues found with menu dividers (6f375c9)
• test: fix failing Cypress E2E test after GraphQL changes (dc50117)
• test: fix Jest failing unit test (761fa4a)
• build: create & use separate excel-builder package to fix security (c114ae0)
• footer: fix Custom Footer styling issues with Bootstrap 4 (658a9fd)
• pagination: should be empty (0) when filtering an empty dataset (7409832)
• backend: fix build warnings (c72ccc9)
• columns: Column Grouping should re-render after cols reordering (bd991f0)
• formatter: refine condition to display a checkmark icon (507b299)
• state: Clear Sort should trigger only 1 event & fix Pagination (8e4f931)

Happy New Year and New Decade! 🎄🔔

Let's start the year strong, this new release brings 2 new, and extremely useful, plugins (extensions).
Please make sure to upvote ⭐️ if you like the lib. Cheers 😸

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 26 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 14 - 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

• cellMenu: starting adding new CellMenu Extension (5ab64a1)
• github: change issue templates and add auto close bot (90271bf)
• menu: add action & override callbacks to all Menu plugins (a7967bb)
• menu: add Context Menu feature POC (8d04406)
• menu: starting adding new ContextMenu Extension (95d3227)
• styling: change Column Picker & Grid Menu styling (b9dc977)
• styling: change Column Picker & Grid Menu styling (d91086b)
• styling: add more SASS variables to header menu (373641f)

Bug Fixes

• graphql: disable pagination should remove any page info from query (63190c8)
• sort: add sort icons to grouping examples (0bb9844)
• translations: align all Export translations and add missing locales (d3e45bc)
• security: update DOMpurify to fix potential xss vulnerability (63c1ddc)
• styling: use latest SlickGrid version and fix some styling issues (dc0a688)
• build: TS warning on a missing Type (97b25f7)

Big Annoucement

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

New Features

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

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 (8c10e5a)
• sorting: provide method to apply grid sorting dynamically (9a99ca0)
• filters: allow to bypass changed events when calling updateFilters (62c807e)
• sorting: allow to bypass changed events when calling updateSorting (35936ad)
• cypress: add Dynamic Filters feature E2E Cypress tests (043ce89)
• tests: add Jest & Cypress tests for Dynamic Sorting feature (d0fa65e)
• tests: add more unit tests & cleanup some code (644e1dc)
• tests: add missing unit tests to have 100% test coverage (99736fc)
• build: add Build Demo site to CircleCI task (62ed009)

Bug Fixes

• odata: no single quote escape required for IN operator for non-string column (6e4a855)
• picker: make sure picker addon is available before translating (e295c26)
• filter: updateFilters w/BackendService should call query only once (8228799)
• editor: Select Editor with option "0" were incorrectly filtered out (e116340)
• filter: Date Filters using Flatpickr throw error w/invalid locale (7c55a26), closes #346
• filter: default operator of input filter should be empty (17c905d)
• filter: number filter condition, parse number before comparing (55f5fc9)
• backend: make sure pagination object exist before using it (07dbbb1)

This week Angular-Slickgrid just hit a Major Milestone 🚀 , the library is now Fully Tested with a test coverage of 99.7%. Why not 100% you might ask? Well there's about 25 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 adds 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 😸

Even though most of the work was done by myself, I am thankful for all feedback & contributions, even small, to make this library more stable and what it is today. I also see more questions about Angular-Slickgrid on Stack Overflow, which is great and is also the best place to ask for questions so please continue on that trend as more people can answer your questions.

Cheers
Ghislain aka @ghiscoding

Some Unit Tests & Code Statistics

• 135 files tested
• ~8000 lines tested
• ~2200 unit tests
• 99.7% test coverage (~25 lines are untestable)
• you can see the full test coverage via codecov
  

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

Release

Features

• cypress: upgrade to latest version of Cypress (0f1fd87)
• formatterOptions: add decimal,thousand separator to all Formatters (20345bb)
• tests: add missing unit tests for Excel Export Service (eb0a536)
• tests: add more Angular-Slickgrid component unit tests (01bfd6f)
• tests: Angular-Slickgrid Component add missing unit tests (0094494)

Fixes

• filter: add missing radius (right) on compound input filters (e1aaefd)
• firefox: thousand separator regex lookbehind not allow, fixes #336 (4c3ed76)
• pagination: never display page 0, minimum should be page 1 (a44af9f)

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 are new settings which 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)

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

New Excel Export

• enableExcelExport
• excelExportOptions

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

• enableExport
• exportOptions

Very Important Change to your App

With the addition of Excel Export, you need to modify your tsconfig.app.json and add the following line. If you forget to do this then your Angular Build will fail with a jszip error, this new lib is used by the Excel Export (that is Excel-Builder lib) and it seems that the Build/TS has some problems finding the correct path unless we tell it where to find it.

"compilerOptions": {
    // ...
    "paths": {
      "jszip": ["../node_modules/jszip/dist/jszip.min.js"]
    }
  },

Features

• bootstrap: add Bootstrap Action Dropdown example (0b96746)
• excel: add Excel Export feature and add full unit test suite (d787131)
• export: add Export to Excel feature (f06977f)
• tests: add more grid service unit tests (a2ddab2)
• rowDetail: expose public all render/redraw methods of Row Detail (de0b3e9)
• cypress: add Pagination Service E2E tests (72f6df3)
• styling: improve header menu styling (ba28d2b)
• tests: add Angular-Slickgrid component tests (1e84911 / 60192cd)
• tests: starting adding Slick-Pagination Component unit tests (b48ee06)

Bug Fixes

• gridService: addItem/updatedItemById must pass an array to setSelectedRows (#308)
• excel: exporting to Excel should also work from Grid Menu (b2f0680)
• filter: should be able to filter even on hidden columns, fixes #310 (47a1ab7)
• editor: autocommit should not save if value is the same as before (a07d239)
• editor: provide complex object override path for select editor (a93a53d)
• frozen: fix header grouping grid with frozen columns, fixes #290 (b851224)
• editor: use editorOptions only (08b1930)
• graphql: pagination offset should never be below zero (41e321f)
• graphql: translate pagination texts on initial load (3ecd9b9)
• odata: filter with single quote should be escaped, fixes #328 (1cd0b47)
• styling: hidden menu visible in BS4 for Picker/Grid Menu, fix #321 (9d597c4)

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.

Angular 8

The latest version of SlickGrid (core lib) addressed a couple of issues with ES2015 compilation, so with these fixes in the core and now used by Angular-Slickgrid, you can now change your build target to ES2015 (which is the default in Angular 8). This allows for much smaller bundle in modern browser (ref issues #284 and #266). Also note that the GitHub Bootstrap 3 & 4 demos are now built with this new ES2015 target without any problem.

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 Angular-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)

Comments/Issues

I have to mention that if you find and report an issue, please fill in the issue template, it helps in analyzing and troubleshooting the issue and it's only couple of questions. Too many times I see people deleting the template and I have to ask the same questions that were asked in the template. Also please remember that Stack Overflow is great for general questions.

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

Features

• metrics: deprecated Statistic and renamed to Metrics (aea60a9)
• odata: add "enableCount" flag to add to OData query, closes #287 (1d70037)
• insert: add option to insert item at bottom of grid (32764fb)
• upsert: add option to upsert item at bottom of grid & view scroll (7b25dd7)
• tests: add AutoComplete Filter test suite (8ccea92)
• tests: add AutoComplete missing test (313da78)
• tests: add missing AutoComplete unit tests (24487a4)
• tests: add missing unit tests for all Editors (c275b87)
• tests: add more Single & MultipleSelectEditor unit tests (9dc1abe)
• tests: add some tests for the AutoComplete Editor (360da3e)
• backend: extract Pagination into its own Service to expose methods (4a4a708)
• example: add programmatically Pagination change sample (a150807)
• export: add delimiter/listSeparator override to use with GraphQL (de52614)
• example: add Bootstrap Dropdown Action demo, closes #304 (ba6082c)

Bug Fixes

• build: use latest SlickGrid version to fix ES2015 build, issues #284, #266 (ff9f9d8)
• editors: complex objects should work with all editors (01f53ed)
• insert: add item to bottom position should highlight correctly (9f9e6eb)
• styling: styling issue in Firefox after col reordering, fixes #297 (a2c7e39)
• gridService: upsertItem(s) should trigger onItemAdded/Updated event (df9af21)
• pagination: when item is added it should trigger pagination changed (c953a23)
• pagination: don't reset page 1 after manually adding items to grid (f61285d)

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

1. ngx-translate now optional... you no longer need to install ngx-translate 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 25 to demo this new feature.

Other interesting additions

• add support of OData v4
• add more Cypress E2E tests
• thanks to @bocall, all angular-slickgrid-demos were updated to Angular 8.2

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.

Important Note

We now have a new centralized angular-slickgrid-demos (replacing the standalone BS4 demo), so make sure to head over that repo to see all the existing Angular-Slickgrid examples. It includes a bunch of demos with/without ngx-translate and with Bootstrap 3 / 4

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

Features

• filter: add a few input/compoundInput filters test (190176a)
• filter: add Cypress E2E tests for the Filter by Range grid (7da17f8)
• filter: add DateRange Filter unit test & refactor code (308082f)
• filter: add input search range functionality, ref issue #240 (7273cf8)
• filter: add new rangeDate Filter (0878569)
• filter: add new SliderRange Filter (26dc63c)
• filter: add optional placeholder to multiple select (1b1274b)
• filter: add SliderRange Filter unit tests & fix searchTerms input (be136be)
• locales: add unit tests when using locales with enableTranslate (413ea71)
• locales: add unit tests when using locales with enableTranslate (ae48ddf)
• sorters: consolidate & provide all date sorters (fdc1155)
• tests: add Cypress E2E tests to cover hidden columns, closes #250 (22868f5)
• translate: add optional Locale functionality (8f24d2d | 86b1214 | 5eb1ec1 | 0d6b2e2)
• tests: add SelectFilter unit tests (5115e08)
• tests: add CompoundDate Filter unit tests (45348a0)
• tests: add CompoundSlider Filter unit tests (06abb3d)
• tests: add NativeSelect Filter unit tests & tweak some Filters (4b952c9)
• tests: add slider unit tests (5ae1a85)

Bug Fixes

• editor: fix negative number in floatEditor (7ae5a7)
• dom: ColumnPicker & GridMenu were creating multiple DOM elements (8916f90)
• gridMenu: add more type checks to avoid console error, fixes #268 (328c9af)
• odata: use contains with OData version 4 (e936f33)
• presets: Grid State & Presets stopped working for columns (4e0b528)
• styling: fix some Bootstrap 4 styling (ee4931c)
• backend: queries should not include pagination option when disabled (d648b80)
• test: fix a Cypress flaky test that was sometime failing (4ed5a29)
• core: dowgrade to previous SlickGrid version to fix issues (1fd11ab)

There are now over 1300+ unit tests and the lib is now over 70% coverage, the unit test portion is almost finished (only 1 export service left to test), the next phase would be integration tests (editors, filters, pagination & angular-slickgrid entry file). Some of the Services required some code refactoring which is also why we released this under a minor (semver) version.

EDIT

As of version 2.9.5, all Services and all Unit Tests are done, the only major testing left to do 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). 🎉 😸

Features

• (tests): add AngularUtilService full test suite
• (tests): add all Filter Conditions full test suite
• (tests): add GroupingAndColspanService full test suite
• (tests): add GridEventService full test suite
• (tests): add SortService full test suite
• (tests): add FilterService full test suite
• (tests): add ExportService full test suite
• (tests): add more ResizerService tests
• (cypress): add Cypress E2E tests to CircleCI build

Fixes

• (backend): regression from previous commit in both backend services using GridState
• (filter): regression, small issue detected when using compound filter
  • that version was only out for a day
• (export): exporting null or undefined should replace by empty string
• (menu): Column Picker & Grid Menu not updated dynamically, closes #233 (PR #234)
• (export): fixed a few small issues detected in ExportService while adding unit tests
• (slickgrid): use previous version of Slickgrid to fix column autosize
• (gridMenu): external grid menu was not triggering
• (backend): clear empty filter by header menu not stopping spinner
• (gridMenu): adding user customItems in GridMenu was no longer showing
• (selection): selected row should be none after filtering, closes #249

There are now over 1000+ unit tests and we just passed 60% coverage. Also added an Example 24 to demo grids in Bootstrap Tabs (with ngx-bootstrap) and 1 of the tab is to show loading the data from a JSON file with HttpClient. Some users from were confused on how to use HttpClient instead of mock data (which is what all demos are using). So hopefully this might help more users.

Features

• (tests): add missing sorterUtilities test
• (tests): add GraphqlQueryBuilder unit tests
• (tests): add GraphqlService full tests & refactor few piece of code
• (tests): add GridODataService & OdataQueryBuilder full test suite
• (examples): add ngx-bootstrap tabs example, closes #219
  • Example 24 | Component

Fixes

• (queryField): queryFieldFilter and queryFieldSorter should have precedence over queryField
• (odata): add presets to GridOdata Service, closes #206