Angular Components everywhere

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 😃

Row Detail View (new feature)

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

Pinned (frozen) Columns/Rows & AutoComplete Editor/Filter

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

Draggable Grouping

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

Angular 7 support

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

Extract all SlickGrid Controls/Plugins into their own classes

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

Collection now support multiple filterBy/sortBy... and more features & fixes

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

Dynamically Change Row CSS Classes

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

auto-adjust Select drop height, width & position

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

Small Fixes & Features to Filters/Editors

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