Angular-Slickgrid

Quick Summary

This version introduce a lot of refactoring on the CRUD methods (with an extra newly added upsert method) available in the Grid Service (which is now fully tested). New method names are replacing the older methods (which will be deprecated in the future). The biggest change is that instead of passing true, false, true (which is not very explanatory), was converted to an object with the flag properties, see below). All option flags still have their own defaults when no flag are provided (highlightRow: false, selectRow: true, triggerEvent: true), for example:

Before

this.angularGrid.gridService.updateDataGridItem(item, false, true);

After

this.angularGrid.gridService.updateItem(item, { highlightRow: false, selectRow: true });

• All the flags in the 2nd argument are optional, they do come with their own defaults, see the Wiki to know them.

Features

• (gridService); change all CRUD methods to options argument
  • Demo | Wiki
• (gridService): add "selectRow" flag to all CRUD methods
• (tests): add Grid Service full unit test suite
• (demo): add custom formatter with onCellClick, closes #213
  • Demo
• (resizer): change onGridBeforeResize to return event, issue #215 (PR #216)
  • add new method pauseResizer to the Resizer Service
  • Demo | Component | Wiki

Fixes

• (highlight): should do just that without doing any row selection
  • using the new CRUD methods, the row won't be selected after the action, it will only be highlighted like it should
• (highlight): add highlight fade out animation
• fix(core): previous core version broke column resize, closes #207

Quick Summary

New issue templates were added, please choose & fill them in with all information (when possible), it helps in resolving the issues. New formatterOptions added to the Grid Options. A lot more Tests were added (now over 600+ tests) and coverage is rising slowly but surely (it's a big library after all).

Features

• (editor): added option for user to select the length of autocomplete (PR #183), thanks to @loonix
  • Wiki
• (formatter): add grid formatterOptions to all Formatters (PR #187)
• (formatter): add grid formatterOptions to all Grouping Formatters (PR #187)
  • both Formatters & Grouping Formatters now support negative number (displayNegativeNumberWithParentheses) wrapped in parentheses commonly used in Finance, example: -$15 can be shown as ($15)
  • the formatterOptions allows you to set a few options, in the Grid Options, that are common to a few Formatters/GroupingFormatters
  • Wiki
• (formatters): add dateSeparator Formatter Option
• (euro): add Euro Formatters and Sorters (day/month/year) format, (PR #190)
• (formatters): consolidate all Date Formatters into 1 method call DRY, smaller lib footprint (PR #193)
• (tests): add full Test Suites
  • Grouping Formatters
  • Sorters
  • Collection, GridState, Resizer Services
• (menu): add options to exclude column titles from Menus, closes #189 (PR #203)
• (rowDetail): add option to limit expanded row to only 1 at time, closes #194 (PR #204)
• (copy): add excelCopyBufferOptions to grid option, ref #198 (PR #205)
• (gridService): add "upsertItem" method to Grid Service (PR #208)

Fixes

• (selection): syncGridSelection and preserveHidden, fixes #191 (PR #196)
• (gridState): columnPicker & gridMenu not triggering gridState change (PR #196)
• (rowDetail): update to latest SlickGrid version to fix scrolling (PR #202)
• (resize): use latest Github SlickGrid version, temp fix for #207
• (editor): dynamically adding editor column throws error, fixes #195 (PR #212)
• (editor): integer editor was always showing invalid when null value (PR #209)

This new release adds a few new small features, but the biggest change is probably the new CI tools that you might have noticed. The library is now built with CircleCI and since we recently started adding Jest unit tests, we also added the code coverage via Codecov, these are 2 great tools that are available freely for Open Source projects like this library. So you can now feel safe knowing there is now a build process with CircleCI that includes Jest unit tests as well. 🎁🎉

You might find that the code coverage is a little bit low, but hey, it's better than 2 months ago which was 0% and it keeps increasing slowly but surely, Formatters and Sorters are now 100% covered and more test are added continuously.

If you would like to contribute on unit tests or anything else, please do, PRs are certainly welcome!!!
You can see some of the tasks in the queue under in the Project planning.

... and don't forget to up vote ⭐️ Cheers!

Features

• (editor): add option to force user input in autocomplete Editor, closes #174 (PR #176)
• (tests): add more Formatters tests and fix minor issues detected
• (formatter): add new generic icon Formatter & tests
• (resizer): add calculateAvailableSizeBy container option, closes #175 (PR #179)
  • add full test suite to ResizerService
• (tests): add missing Formatter unit tests

Fixes

• (formatters): fixed small issues found in some formatters while writing unit tests

Features

• (filter): add demo of single search filter
• (tests): add Jest (Unit & Integration Tests) & Cypress (E2E)
• (filter): add demo of single search filter
  • example | component | Wiki | animated gif
• (build): add Cypress CI & Jest to build plan

Fixes

• (formatter): rewrite Bold Formatter do what it was supposed to do
• (input): remove autocomplete from all Editors & Filters
• (select): multiple-select was always tricky with click outside event
• (dateEditor): allow backspace for deleting a date, close #166
• (height): should throw error when no height or enableAutoResize
• (selection): styling of row selection is incorrect when adding rows
• (formatters): while adding Jest unit tests, fix few Formatters output
• (formatter): changed arrayObjectToCsvFormatter behavior
• (copy): copy+paste cells was not working with correctly with enableExcelCopyBuffer, closes #164
• (formatters): update some Formatter behaviors and add unit testing
• (editors): not allow grid paste of invalid values, issue #171

Also reworked the demo sample CSS so that the sidebar left menu works better. Are you using Angular-Slickgrid? You can now add your company/site/project to the Used by Who list.

Features

• (gridMenu): demo Grid Menu button can be added anywhere
  • see it in the Example - Grid Menu | component
• (autoHeight): add missing Grid Option autoHeight feature
  • new demo Example - Grid AutoHeight | component
• (extension): add simpler method getSlickgridAddonInstance to get Slickgrid control/plugin instance
• (e2e): add Cypress to the lib, E2E tests
• (rowDetail): user can override expand icon logic, closes #140
• (rowSelection): user can override row selection checkbox logic
• (filters): add flag to optionally trim filter white spaces
• (editor): add title attribute to all Editors, closes #158
• (filters): add enableFilterTrimWhiteSpace flag to grid options

Fixes

• (resizer): minHeight, minWidth not working correctly, closes #133
• (editor): allow all Editors to work with complex objects
• (rowDetail): clear Row Detail content when recreating it, closes #136
• (backend): add Filter shouldTriggerQuery to know when to call a query or not
• (backend): regression after doing clearFilter, filter stop working
• (flatpickr): add filterOptions & editorOptions, closes #142
• (mapDateFormat): add missing date format in map utility, closes #141
• (rowDetail): add missing disposeAllView while destroying plugin
• (autocomplete): user might see auto suggestion
• (core): update Slickgrid to latest version, fixes #143, #149
• (pageSizes): setting different sizes gets extended with global sizes
• (backend): Filter presets is getting removed when calling sort
• (rowDetail): use latest Github SlickGrid code, temporary fix #160
• (headerMenu): calling "Clear Filter" was calling incorrect grid state

News

Good news, previous release brought the Row Detail and that helped with this new release (Angular Component everywhere). We can now use Angular Components with Custom Editors, Custom Filters and Custom AsyncPostRender (similar to a Formatter but in an async way, that is the only available solution that works with SlickGrid).

More info about Formatters vs AsyncPostRender

So what about Formatter then, why can't we use Angular Component with Formatter? Because of how Angular is built, it requires a full cycle for the component to be rendered with data, however SlickGrid Formatter requires only string output and it must be right away (synchronous) and Angular Component can only be returned in an async fashion (you could return it right away but the data won't be populated). That is the reason that it's not doable with a Formatter, however SlickGrid AsyncPostRender is similar and works in an async fashion. So that works, but it has some drawback, it's slightly slower to render (you can visually see it rendering on the screen). All that to say, regular Formatters with jQuery and/or HTML is still the preferable way... but hey, if you really wish to use Angular Component, well then it's now possible, but I won't personally use it though.

Features

• (editor): add Custom Editor with Angular Component, closes #77, #84 (PR #129)
  • Example 22 | Component | animated gif
• (filter): add Custom Filter with Angular Component (PR #131)
  • Example 22 | Component | animated gif
• (PostRender): use AsyncPostRender to render an Angular Component, closes #7 (PR #130)
  • similar to Formatter though it has some drawback (visually slower)
  • Example 22 | Component | animated gif
• (editors): add "required" and "alwaysSaveOnEnterKey" options (PR #132)

Fixes

• (filter): regression bug filtering data doesn't always refresh grid
• (backend): perf, clear filters was calling too many queries (1x/filter)
• (formatters): some formatters were not considering empty string
• (editors): small regression bug causing infinite loop in rare occasion
• (backend): Clear Filter from Header Menu was not working correctly

Refactoring

• Updated Bootstrap 3 Demo to Angular 7

Vote

If you haven't already done so, please up vote ⭐️
Let's make the lib more popular 😃

Features

• (RowDetail): add new Row Detail View feature, closes #118
  • Example | Component | animated gif
• (event): add onExtensionRegistered to a few of the Extensions

Fixes

• (select): again related to commit cdcc979 which was that using multiple select filter and clicking anywhere beside wasn't triggering an Angular event detection
• (select): when destroying Select Filter/Editor, need to escape dot "." in name
  • a column definition with "id" that included a dot within it's text was throwing an error
• (FilterService): fix a regression, missing an event
• (updateItem): call grid.updateRow instead of grid.invalidateRow
  • when updating a row, the previous code was calling invalidateRow which destroy the entire row and recreates it, it's better to use updateRow since that will only re-render the necessary DOM elements instead of destroying/recreating them.
  • this fixes an issue we had in our App were we updated the item and we had focus on an opened Editor and we were losing the focus since the entire row was being destroying (including the Editor). With the new code, our opened Editor remains open and our row data still gets updated

This version brings a long awaited request of Pinned Columns/Rows (aka Frozen). Also note that the demo with Bootstrap 3 is using previous lib version 1.x (which doesn't latest features) and only the Bootstrap 4 demo got migrated to newer version 2.x of the lib (with Angular 7). Also a reminder, new features will only go in version 2.x of the lib which requires Angular 7+.

Note

I'm not sure why, possibly ng-packagr, but since the lib was updated to Angular 7. I often have to release 2 versions to make it to work correctly. This is the reason why there was so many versions released recently. I don't think it's Angular itself but possibly the packager.

Features

• (frozen): add Frozen/Pinned rows/columns Feature (PR #93)
  • demo | demo component | animated gif | Wiki doc
• (sorting): add "Clear Sort" in each Column Header Menu (PR #94)
  • make sure to update your Translations for this new header menu (on each column), basically add this translation key
  • you can also hide this new command (or any commands) through headerMenu: { hideClearSortCommand: true } in your Grid Options
• (filters): add optional placeholder to all Filters (PR #98)
• (editors): add optional placeholder to all Editors (PR #99)
• (formatter): Formatter can return a string or an object (PR #96)
• (autocomplete): Editor & Filter autocomplete feature (PR #101)
  • demo | demo component | animated gif | Wiki doc
  • since jQuery UI is a dependency of SlickGrid, using jQuery UI AutoComplete comes for free (no new lib).
  • Chrome will detect the demo as unsafe script because of CORS, you can try with Firefox/Edge or simply allow script on that page
  • also make sure you use the latest version of jQuery-UI through the jquery-dist NPM package (see howto). I lost 2 hours myself on this because I was using an older version of jQuery-UI
• (sorter): add object with dataKey as a Sort and add custom Sorter
• (headermenu): add Clear Filter to each Column Header Menu
• (divider): add divider option to Grid Menu & Column Header Menu items
• (filter): input mask filter (PR #107)
  • note this is a very simplified mask filter, if the behavior is not what you are looking for then it might be better to create your own custom filter with an external 3rd party lib that support mask well
• (gridService): add new methods to GridService, see #110, #111
  • add new methods "deleteDataGridItems" and "deleteDataGridItemByIds" to address issue #111
  • add 3rd argument "shouldHighlightRow" boolean field to the "updateDataGridItem" ans "updateDataGridItems" method to address issue
• (formatter): Formatter returning an object now accept tooltip

Fixes

• (pagination): refresh paging after adding/deleting item with DataView
• (filter): Select Filter "addBlankEntry" sometimes add 2x entries
• (translateFormatter): shouldn't convert null values to string (PR #102)
• (build): distribution folder shouldn't be part of the Git project (PR #103)
• (filter): Header Menu Clear Filter not calling Grid State change
• (styling): fix styling issue when Filters are filled
  • adds a filled class which user can customize to his need, e.g. change background-color of filled Filters
  • Wiki doc
• (delete): remove any row selection after deleting a row, #111
• (backend): debounceTypingDelay on input Filter was no longer
  • (filter): on ENTER key it should skip debounce waiting on input
• (pagination): incorrect pagination behavior on adding/removing items
• (filter): all jquery .on bound event should also be unbound
• (regression): the commit cdcc979 caused a regression with click event
• (filter): Select Filter doesn't get removed on destroy

Refactoring

• (backend): remove all castToPromise and keep Observables as is

This is a Major version because there are breaking changes (thanks to Angular).
Also worth to know that I skipped Angular 6, if you wish to remain on that version then use lib version 1.x and follow this comment with rxjs-compat

Breaking Changes

• updated RxJs to version 6.3.x
• updated @ngx-translate/core to 11.x.x
• updated @ngx-translate/http-loader to 4.x.x
• updated all Angular libs to 7.x.x
• updated ng-packagr to 4.4.x

Previous Version 1

• Previous version 1.x will still be supported but only for patches/fixes
• all new major features will be available only on the version 2.x upward

Fixes

• (grouping): toggle group not working in example 18, fixes #91

Features

• (grouping): add draggable grouping plugin
  • see demo Example 18 / component
• (inputType): Add multiple input types (number/password)
  • inputNumber, inputPassword, compoundInputNumber, compoundInputPassword
• (remote): add customDataView with Remote Model feature with an example
  • this was actually released in version 1.8.x but it's still very new
    -see demo Example17, Chrome might block the remote model api javascript file loading, you can unblock it or try with different browser like Firefox/Edge
• (selector): add new property to display "Select All" checkbox in different location (header row (default) or filter row)
  • the default doesn't show "Select All" on the filter row, it's useful to change this property, to do so you can change hideInFilterHeaderRow: false and hideInColumnTitleRow: true

Fixes

• (filter): Date in UTC format with milliseconds not filtering well
• (grouping): toggle group not working in example 18, fixes #91
• (filter): all jquery .on bound event should also be unbound

This new release does not bring much to the user on the feature side of it, however in code there was a major rewrite in how SlickGrid Controls & Plugins (gridMenu, headerMenu, columnPicker, ...) are handled. It was all previously under 1 big Service which was getting way too big, the rewrite was to separate them all in individual classes/services which is much more maintainable. Another big change, again under the hood, is that each of these controls/plugins (now called simply as Extensions) will be called On Demand, meaning that if you don't enable the extension, it won't use the SlickGrid Control/Plugin, this should end up in smaller prod build size (SlickGrid has about 10 controls/plugins and you might not use them all).

Features

• (filter): add "filter-{id}" to all Filters. easier styling & target
• (editor): add "editor-{id}" to all Editors. easier styling & target
• (plugin): split out all controls/plugins into their own class
  • load extension on demand (dynamically via require)
  • use DI in all Extensions
• (plugin): add new Example 17 of SlickGrid Plugin - Row Move Manager, closes #78
• (update): add new method updateDataGridItems (in GridService) for multiple changes
  • also provide optional flag to disable highlight on both updateDataGridItem & updateDataGridItems
• (remote): add CustomDataView flag and feature, ref issue #83
• (backend): add onError callback which catch error from process
• (remote): add Remote Model example with custom dataview
  • Example 18 - Remote Model example with SlickGrid Remote Model Plugin Octopart demo
• (badge): add download count badge

Fixes

• (backend): made pagination input larger and shrink other elements
• (select): collectionAsync error thrown when using collection, closes #76
• (resize): global delay timer was affecting multiple grid resize, closes #81
• (editor): Float Editor Validator not working with .5 but works with 0.5
• (pagination): fixed a few pagination problem used by backend service

Features

• (resize): add maxHeight & maxWidth options to Resizer Service (autoResize)
• (filter): add possibility to filter complex objects (with JSON dataset)
  • Wiki doc
• (sort): add possibility to sort complex objects (with JSON dataset)
  • Wiki doc
• (collection): support multiple filterBy/sortBy in CollectionService
  • (collection): add FilterMultiplePassType (with option: merge, chain)
  • Wiki doc
• (editor): add auto commit edit flag to grid options
  • new Grid Option boolean flag name is autoCommitEdit
• (select): add option to use label as selected text
  • Wiki doc
• (select): Filter/Editor able to translate prefix/suffix/optionLabel
• (select): collection can also be of type String (not just label/value pair)

Fixes

• (header): use showHeaderRow flag when defined by user
• (graphql): should be able to use presets even if field is not a column definition
• (select): fix separatorBetweenLabels to use join so that it doesn't add extra separator when prefix or suffix isn't present
• (resize): autoAdjustDropWidthByTextSize should handle 100% width
• (resize): when having 2 grids resize only works on 1 grid
• (select): Single Select should use EQ operator instead of IN
• (select): multiple-select autoAdjustDropWidth sometime incorrect
• (resize): auto-resize shouldn't resize when fixing gridHeight/gridWidth

Features

• Dynamically Change Row CSS Classes (styling)
  • Demo / Wiki
• (editor): pass Editor Args to editor Validators
  • see Wiki - Editor Custom Validator
• (filter): add posibility to filter complex objects
  • see Wiki - Filter Complex Object

Fixes

• (editor): LongText & Select Editor should close when tabbing away
• (chrome): Compensate incorrect SlickGrid measureScrollbar causing horizontal scrollbar to sometime show up in Chrome browser only
  • this was observed on computer with Chrome and only 20% of the time
  • miscalculation of 3px was the cause of the horizontal scrollbar
• (update): regression updateDataGridItem shouldn't throws error
• (export): remove extra comma at the end of each line
• (filter): regression fix on select filters
• (styling): remove black border bottom from column headers
  • this was only showing with an ng build Prod
• (demo): fix Grid Editor component demo which the prerequisite editor that was misbehaving
• (editor): make the Float Editor Validator work correctly min/max val
• (export): Export should work with datasetIdPropertyName, closes #67

Features

• (multiselect): auto-adjust height, width & position of multiple-select.js
  • 3 new flags were added to control height, width, position of the drop from Single/Multiple Select Filters/Editors
    • autoAdjustDropHeight, autoAdjustDropPosition, autoAdjustDropWidthByTextSize
    • these new flags are all enabled by default, however you can choose to disable them at any time
  • multiple other properties were also added to change behavior, if need be, of these auto-adjustments
    • minWidth, maxWidth, adjustHeightPadding
    • maxHeight (already existed but can be helpful with these new adjustments
  • for more in depth details, please see the PR #59 or Wiki - Select Filter
• (style): customize grid styling with more variables

Fixes

• (columnSize): add flag enableAutoSizeColumns, closes #60
• (header): hidding column from header menu after reordering fixes #62

Features

• (filter): auto adjust drop position (up/down) of select filter

Fixes

• (formatter): null values not handled properly with number formatters
• (editor): auto adjust drop position (up/down) broken multiple editors

Released under a minor release because it's a breaking change (though not big enough for a major).
I would be surprised that anyone even used these new options yet which were added faily recently to the customStructure object, but just in case, I decided to release a minor version for that reason

Breaking Change

• (customStructure): options moved to new collectionOption property
  • cut all options (4x) out of customStructure and move them to the new collectionOption property
  • the 4 options moved were (addBlankEntry, collectionInObjectProperty, separatorBetweenTextLabels, includePrefixSuffixToSelectedValues) which are now under collectionOption

Features

• (editor): add collectionAsync to editor
  • Wiki and demo
• (filter): add collectionAsync to filter
  • Wiki and demo
• (formatter): add new arrayObjectToCsv Formatter
• (formatter): add 2 new DateTime Short Formatter without seconds
• (filter): optionally pull collection from object property
• (filter): optionally add a blank entry to the collection
• (editor): optionally pull collection from object property
• (editor): optionally add a blank entry to the collection

Refactoring

• (styling): change default singleSelect radio icon
• (example): add editors inside the example to test issue reported in #53

Fixes

• (pagination): Only display Pagination with backendServiceApi
• (build): remove unnecessary lodash from package.json
• (filter): MultipleSelect Filter had z-index too low in modal window
• (sanitize): replace sanitize-html with DOMPurify for a much smaller lib
• (selector): Row Selection should be reset for a Sort change also
• (editor): LongText Editor should'nt throw i18n error when missing
• (grouping): Grouping with Filter should work together, closes #57

Breaking Changes

• (custom): Editor/Filter CustomStructure addSpaceBetweenLabels property replaced by separatorBetweenTextLabels

Features

• (filter): add prefix/suffix labels to Multiple/Single Select Filters
• (filter): add option to render HTML code in Multiple/Single Filters
• (editor): add prefix/suffix labels to Multiple/Single Select Editors
• (editor): add option to render HTML code in Multiple/Single Editors
• (sanitize): add a way to change default options of sanitize-html
• (styling): add multiSelect OK button font weight & change color
• (filter): add new addSpaceBetweenLabels flag for prefix/suffix
• (editor): add new addSpaceBetweenLabels flag for prefix/suffix

Fixes

• (filter): MultipleSelect & SingleSelect Filters only trigger changes
• (selection): On filter changed, we should remove any rows selection
• (filter): regression bug, Filters should trigger only on changes
  • regression ref commit e06b797

Features

• (gridService): add a flag for highlighting the row after add/update
• (theme): support Bootstrap 4
  • a new repo & demo is now available specifically for Angular-Slickgrid with Bootstrap 4, so go check it out
• (gridService): add more commonly used functions in GridService
• (graphql): export destroy fn & add process timestamps to GraphQL
• (telemetry): add telemetry statistics to backendServiceApi
• (backend): optionally pass grid options to refresh backend method
• (resizer): resizeGrid now returns a Promise with last dimension used
• (formatter): add params minDecimal/maxDecimal to Dollar Formatters

Fixes

• (slider): slider issues with IE and Edge
• (formatter): Date Formatters should only transform on valid dates
• (formatter): don't use strict date check since UTC on Date Formatters
• (css): plugin styling was leaking outside of slickgrid
• (gridState): Grid Stage changed was not being called on empty filter
• (presets): reSort was causing issues when used with Presets and Backend Service API
• (graphql): missing column in query using Grid Presets and hidden col
• (error): add item to datagrid should not require selection model
• (build): try fixing #48 Can't resolve all parameters in d.ts
• (filter): searchTerms sometime comes back even after clear filter
• (example): example was showing warning on build
• (pagination): On page changed, we should remove any rows selection
• (event): dispatchEvent should be cancelable, closes #52
• (selection): single row selector should hide "Select All", closes #55

Features

• (formatter): add new Decimal Formatter

Fixes

• (filter): input filter was using EQ operator instead of Contains