Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
MIT License
Bot releases are hidden (Show)
Published by ghiscoding about 2 years ago
Here is our new major (breaking change) version v5.0.0
release, it uses the new SlickGrid 3.0.0 and Slickgrid-Universal 2.0.0 which dropped jQueryUI requirement. Since we removed jQueryUI, we had to find replacement for the jQueryUI Autocomplete and settled on the Kraaden Autocomplete 3rd party lib and that is the biggest change to the developer in this new major version (it is a small code refactoring that can be done with search and replace). If you're not using the Autocomplete, then that will be an easy upgrade for you, you still have to read the migration guide below since there are other changes (ie angular.json
file changes), it also requires Angular >=14
Please remember that all packages of @slickgrid-universal
(v2.0.0
) and Angular-Slickgrid
(v5.0.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki
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.
Published by ghiscoding about 2 years ago
Updating to latest jQueryUI to fix an XSS security issue identified in jQueryUI, see https://blog.jqueryui.com/
jquery-ui-dist
, that package was used because it's an all-in-one dist minified build but was created by an external user and is not the official, neither maintained, by the jQueryUI team and is now falling behind in terms of their version and is missing out these important patched security fixes, so it is preferable to switch to the official package. There is however a small breaking change that you need to do which is a 1 line code change and is shown below (we no longer use jquery-ui-dist
)"scripts": [
"node_modules/jquery/dist/jquery.min.js",
- "node_modules/jquery-ui-dist/jquery-ui.min.js",
+ "node_modules/jquery-ui/dist/jquery-ui.min.js", // replace "-dist" by "/dist"
// ...
],
jquery-ui-dist
to the official jquery-ui
(29f3ba6)Please remember that all packages of @slickgrid-universal
(v1.4.0
) and Angular-Slickgrid
(v4.3.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
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.
Published by ghiscoding about 2 years ago
Small fixes applied into Slickgrid-Universal regarding item update & also add demo on how to update Tree Data items in Example 28
Please remember that all packages of @slickgrid-universal
(v1.3.7
) and Angular-Slickgrid
(v4.2.7
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
Published by ghiscoding about 2 years ago
Please remember that all packages of @slickgrid-universal
(v1.3.x
) and Angular-Slickgrid
(v4.2.x
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
Published by ghiscoding over 2 years ago
Published by ghiscoding over 2 years ago
Published by ghiscoding over 2 years ago
Published by ghiscoding over 2 years ago
Published by ghiscoding almost 3 years ago
This new version brings a few new features and contributions, the main ones are:
$select
and $expand
options & other OData fixes, see live demo Example 5 and consult updated OData Wiki
Huge thanks for the following contributions
Thanks a lot 🚀
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.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
$select
and $expand
query options (b445a79)EventSubscription
to be unsubscribed (ee81db3)Published by ghiscoding almost 3 years ago
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
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
>= 13.0.0
>= 14.0.0
>= 4.4.5
>=7.4.0
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.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
Published by ghiscoding almost 3 years ago
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).
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
).
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.
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.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
Published by ghiscoding about 3 years ago
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)See the update Tree Data - Wiki for these new options and Example 29 for a live demo of all options.
new grid option ignoreAccentOnStringFilterAndSort
to ignore text with accent (like any Latin language) while Filtering/Sorting, see Wiki
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.
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.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding 👨💻
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.
Published by ghiscoding about 3 years ago
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.
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:
onBeforeSearchChange
)onBeforeSort
)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;
}
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
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
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.
dynamicallyToggledItemState
method to toggle parent(s) (afb61cf)getFilteredItemCount
to show correct item count (fbee1a1), closes #469
Published by ghiscoding over 3 years ago
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
We included new Features as well, the biggest and most useful Feature is the new
.d.ts
interface files)
SlickGrid
and SlickDataView
interfaces whenever you deal with these objects (there's also SlickNamespace
for the entire SlickGrid namespace that includes controls, plugins, dataview, ...)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
If you problems upgrading, you can open a Discussion
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
>= 12.1.0
>= 13.0.0
>= 4.3.5
7.2.0
(also a major
bump)>= 4.5.0
(or any other UI framework like Bulma)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
.
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.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
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.
Published by ghiscoding over 3 years ago
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.
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.
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 👷👷♀️
>= 12.0.0
>= 13.0.0
>= 4.2.4
>=7.0.0
(also major
bump)>= 4.5.0
(or any other UI framework like Bulma)3.x ETA 🤞 - Sometime in July or early August 🌞⛱️
You can follow the progress of the open PR #803
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
jest-preset-angular
with Jest 27 (c68a5e6)columnIndexPosition
should always work (4ff9935)IN_CONTAINS
should also work with spaces (579e13f)changeColumnsArrangement
should work w/columnIndexPosition
(831773b)initiallyCollapsed
change internal toggled state (91c48a2)updateItems
should not lose the Tree collapsing icon (399f770)enablePagination
flag only after setPagingOptions
called (67c4f9e)Published by ghiscoding over 3 years ago
This new version brings a lot of Tree Data Optimizations and Fixes. We now also have single column resize by content (enabled by default in all grids)
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).
resizeMaxWidthThreshold
is an option I often use)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
Now that Bootstrap 5 is official, I think it's a good time to switch Angular-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 Angular-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).
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕ ... and if you already have, well thank you 😺
Cheers and Happy Coding
resizeByContentOnlyOnFirstLoad
grid option (135771e)changeColumnsArrangement
(288e364)Published by ghiscoding over 3 years ago
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).
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)
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 Component you're looking at.
Make sure to upvote ⭐ and/or Buy Me a Coffee ☕
... and if you already have, well thank you 😺
Cheers
Published by ghiscoding over 3 years ago
This new release brings a few nice new Features the most notable are the following
filterTypingDebounce
for filters with keyup (mainly default Text Search Input and its Compound version), this will help users dealing with huge dataset, add a debounce/throttle should speed up the search since it will query only after user pauses typingEnjoying the lib? Make sure to upvote ⭐ and/or Buy Me a Coffee ☕
... and if you already have, well thank you 😺
Cheers
onSelect
callback to Autocomplete Editor (#718) (392304c)IN_COLLECTION
operator to search cell value as Array (#722) (cd494ce)filterTypingDebounce
for filters w/keyup (#720) (b4deea9)<>
should be used as Not Contains instead of Not Equal (#709) (e50a060)onRowCountChanged
event to refresh metrics fix #715 (#716) (f123854)Published by ghiscoding over 3 years ago
As the title suggest, this new release brings a few improvements in terms of performance. especially in the following 3 areas
addItems
, updateItems
and deleteItems
)
You first reaction might be... how did you gain so much perf boost?
It all started when I was looking at where MomentJS is used in the lib, then I noticed that the Date sorting is actually parsing to a MomentJS object twice (1x for validating the date and 1x for the actual date) but that could be improved to do it in 1 parsing execution (use the same moment object to call momentDate.isValid()
and then just use it for the sorting diff)... so with that done, I decided to take a look at date filtering to also avoid double parsing, but what I ended up finding, was that were being double parsed and worst than that, it was re-parsing the search values on every single cell value comparison (in other words if we have 50k rows, it was double-parsing the date in the search value 50k times and double-parsing the cell value 50k as well... so when it was supposed to compare and parse 50k rows + 1 time parsing for search value, it was in fact parsing over 4 times that which was about 200k parsing instead of 50k + 1 row... hence the perf boost between 4-6x faster). You can try it yourself, go over the GitHub demo page on Example14 and/or Example 19 then click on "50k rows" and test it out for yourself. If you are dealing with couple thousand rows, you might not notice the difference but make that 25,000 or 50,000 rows and you will surely notice the boost 🚀
Enjoying the lib? Make sure to upvote ⭐ and/or Buy Me a Coffee ☕
... and if you already have, well then thank you 😺
Cheers
NOT_IN_CONTAINS
(#693) (844e167)Published by ghiscoding almost 4 years ago
First big release of the year, this version brings a lot of great features, enhancements and a small (but noteworthy) breaking change, see below. Happy New Year 🚀
collectionOverride
for the Select Editor (single/multiple) and the AutoComplete Editor which allows to change the collection per cell clicked (see Collection Override - Wiki
require(plugin)
, which was not Tree Shakable, they are now imported the more natural way via import(plugin)
which is Tree Shakablerequire(flatpickr/locale)
, you need to see the breaking change below.As mentioned in previous paragraph, I found out that all the Flatpickr (date picker) Locales were all being imported (over 60 locales) and ended up in the bundle/build, so in order to fix that we now ask the developer (you) to import whichever Flatpickr Locale you need via your App Module (right after AngularSlickgridModule import), if you omit/forget to do this, it will display a console warning and revert to English. I didn't want to do a major
release for this small change and there's also a console warning to tell you when you forget to import the locale properly, worst case is that you'll see English being used instead of the expected locale.
Again big thanks to @gcko and @jr01 for their contributions.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕