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 almost 4 years ago
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
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)
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
Published by ghiscoding almost 4 years ago
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).
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 ☕
Published by ghiscoding about 4 years ago
This versions brings a few fixes and couple of styling improvements, the biggest changes are
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
Published by ghiscoding about 4 years ago
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,
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
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.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
Published by ghiscoding about 4 years ago
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.
onExtensionRegistered
from the rowDetailView
grid options(onAngularGridCreated)
and then use getSlickgridAddonInstance()
(onAngularGridCreated)
but this one now exposes all the addon instances (columnPicker, gridMenu, rowDetail, ...) via the extensions
propertyThe 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)
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
)
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
.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
inlineFilters
DataView optional flag (#551) (a5ae4da)Published by ghiscoding over 4 years ago
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
This new version brings a couple of new features, the 2 main ones are explained below:
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;
}
this.gridOptions {
`gridMenu: { hideClearFrozenColumnsCommand: false },
headerMenu: { hideFreezeColumnsCommand: false }`
}
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?
SlickGrid
and SlickDataView
that were mentioned earlier)@deprecated
code will be removed
console.warning
messagesversion-next
branchSo 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.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
Published by ghiscoding over 4 years ago
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.
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 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.
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.
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).
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
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
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.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕
Published by ghiscoding over 4 years ago
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
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.
Cheers ☕️
Published by ghiscoding almost 5 years ago
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
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
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
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).
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.
Published by ghiscoding almost 5 years ago
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 😸
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
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:
query{ users(first:20, offset:40){ totalCount, nodes{ id, firstName, lastName }}}
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.
Published by ghiscoding almost 5 years ago
Huge news, Angular-Slickgrid just reached 100% Test Coverage, around ~8200 lines of code fully tested. 🚀
This new version brings a feature that was a asked a few times that is to update/change any Filters and/or Sorting dynamically (that is on the fly at any time). It also works with Backend Services (OData & GraphQL). This kind of functionality was already available via Grid Presets but the presets
is restricted to first page load only, while the new features can be called at any time. However please note that it's still preferable to use presets
to effectively preset your grid with any Filters and/or Sorting when loading the grid, the differences is that the presets
happens before the grid is even ready (it will load the grid with them), while updating Filters/Sorting dynamically (the new feature) can only be called after the grid is ready and shown, so there's a big distinction between them.
Again, if you like the lib and haven't up voted yet, please do so ⭐️ cheers 😸
Published by ghiscoding almost 5 years ago
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
You thought Angular-Slickgrid was just a simple SlickGrid wrapper... well think again 👷
Published by ghiscoding about 5 years ago
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 😸
enableExcelExport
excelExportOptions
enableExport
exportOptions
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"]
}
},
Published by ghiscoding about 5 years ago
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.
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.
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.
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)
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 😸
Published by ghiscoding about 5 years ago
This new release introduces couple of big new features, the 2 biggest ones are the following:
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.
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.
Other interesting additions
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.
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
Published by ghiscoding over 5 years ago
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). 🎉 😸
Published by ghiscoding over 5 years ago
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.
queryFieldFilter
and queryFieldSorter
should have precedence over queryField