Angular-Slickgrid

Official 1.x Release

This is a Major version and does include a few breaking changes to bring support to Multiple Grids in a view. I had to change the Singleton Services to non-Singleton and that already is, in itself, a major breaking change. Make sure to follow the Migration Guide to upgrade to latest.

Since this is breaking, I decided to include a long list of changes that I had put aside to refactor.
The entire list of changes can be seen in #31 issue and the Migration Guide to 1.x is available here

List of changes

This list does not include everything, for the entire list of changes take a look at #31 issue and the Migration Guide to 1.x is available here

Wiki documentation

The Wiki are not yet changed but will be in the coming days, it might take some time to update them all. In the mean time, I strongly suggest you to look at the GitHub demo, you can see them all here

Features

• (grid): change all services to non-singleton
• (grid): support multiple grids in a view (see Example 1 and Example 10)
• (demo): add dynamic column header change to Example 12
• (grid): expose all Services and SlickGrid objects into new (onAngularGridCreated) Event Emitter
  • this is the biggest change to refactor in your projects (please review Migration Guide)
• (grid): expose all Slickgrid and DataView events through dispatch
  • View example: (sgOnSelectedRowsChanged)="handleSelectedRowsChanged1($event.detail.eventData, $event.detail.args)"
• (rowSelect): add preselectedRows and expose all Plugin
• (formatter): add new Percent and PercentSymbol Formatters
• (editors): add new Custom Editor functionality
• (gridState): add Column Size/Visibility/Position in Grid State & Presets
• (gridState): add Grid State & Presets example with Local Storage
• (editor) Editor Validation and Custom Validators
• (editor) Add new Slider Editor
  • Take a look at Example 3
• (filter) Add new Slider and Compound Slider Filters
  • Take a look at these examples:
    • Example 3 with default Operator =
    • Example 9 with Compound Slider
    • Example 12 without Slider Number showing
    • Example 15 with Operator >

Refactoring

• (grid): Remove all deprecated code and functions
• (backend): all backend service methods renamed as processOnX
• (gridOptions): all Grid Menu & Header Menu showX were renamed hideX
• (searchTerm): remove searchTerm and only use searchTerms
• (styling): change highlight and selected row color to blueish
• (styling): change mouse hover background color
• (editor): move all Editor generic params (like collection) into editor property
• (formatter): add new Mask Formatter

Fixes

• (filters): return false when invalid date
• (sorters): return -1 or 1 for invalid dates
• (selector): Checkbox selector was not working correctly with Presets
• (editors): fix serialization/deserilization in editors
• (menu): Grid Menu and Header Menu custom user commands were not working
• (gridMenu): custom user commands not recreated after locale switch
• (filter): multipleSelect filter doesn't handle cell value arrays (issue #41)
• (filter): regression with input filter with operator in string filter (issue #42)

This is a pre-release

It is not yet released. I made a mistake with NPM and forgot the Beta flag at some point. There is still another breaking change coming. The official release version will be 1.1.0 so stay tuned.

I am done with the refactoring and breaking changes, the official version will be release as 1.1.0 in mid-June. Make sure to follow the Migration Guide

This is a Major version and does include a few breaking changes to bring support to Multiple Grids in a view. I had to change the Singleton Services to non-Singleton and that already is, in itself, a major breaking change.

Since this is breaking, I decided to include a long list of changes that I had put aside to refactor.
The entire list of changes can be seen in #31 issue and the Migration Guide to 1.x is available here

This version will be in Beta for at least a week or 2, until we try it out in our project and possibly get feedback from the community. If you find anything strange or not working, please open a new issue. Since this is in Beta, things could change still change slightly and if you guys want some changes, now is the time to express yourself.

List of changes

This list does not include everything, for the entire list of changes take a look at #31 issue and the Migration Guide to 1.x is available here

Wiki documentation

The Wiki are not yet changed but will be in the coming days, it might take some time to update them all. In the mean time, I strongly suggest you to look at the GitHub demo, you can see them all here

Features

• (grid): change all services to non-singleton
• (grid): support multiple grids in a view (see Example 1 and Example 10)
• (demo): add dynamic column header change to Example 12
• (grid): expose all Services and SlickGrid objects into new (onAngularGridCreated) Event Emitter
  • this is the biggest change to refactor in your projects (please review Migration Guide)
• (grid): expose all Slickgrid and DataView events through dispatch
  • View example: (sgOnSelectedRowsChanged)="handleSelectedRowsChanged1($event.detail.eventData, $event.detail.args)"
• (rowSelect): add preselectedRows and expose all Plugin
• (formatter): add new Percent and PercentSymbol Formatters
• (editors): add new Custom Editor functionality
• (gridState): add Column Size/Visibility/Position in Grid State & Presets
• (gridState): add Grid State & Presets example with Local Storage
• (editor) Editor Validation and Custom Validators

Refactoring

• (grid): Remove all deprecated code and functions
• (backend): all backend service methods renamed as processOnX
• (gridOptions): all Grid Menu & Header Menu showX were renamed hideX
• (searchTerm): remove searchTerm and only use searchTerms
• (styling): change highlight and selected row color to blueish
• (styling): change mouse hover background color
• (editor): move all Editor generic params (like collection) into editor property

Fixes

• (filters): return false when invalid date
• (sorters): return -1 or 1 for invalid dates
• (selector): Checkbox selector was not working correctly with Presets
• (editors): fix serialization/deserilization in editors
• (menu): Grid Menu and Header Menu custom user commands were not working
• (gridMenu): custom user commands not recreated after locale switch
• (filter): multipleSelect filter doesn't handle cell value arrays (issue #41)
• (filter): regression with input filter with operator in string filter (issue #42)

Features

• (grid): ability to dynamically add or change Column Headers and/or Grid Options
  • you can see Example 12, click on "Dynamically Duplicate Title Column" to see it in action
• (resize): use gridHeight or gridWidth when provided
  • if user pass any of them, even when the grid option enableAutoResize is enabled, we will use the provided size to fix that one but resize the one that is not provided.
  • Example, let say the user passes gridHeight="300", the autoResize service will only resize the width and never the height because it is now a fixed height.

Fixes

• (grid): issue #20 Dynamic Headers in Angular 5
  • this is the new feature mentioned on top "Dynamic Grid Options and Column Definitions"
• (editor): Date Editor was not using picked date
• (editors): use indexOf in multiple select editor to load value
• (editor): Date Editor was not using picked date
• (headerMenu): we should not display header menu on row select column
  • Wiki - Header Menu updated
• (dataview): preserve any previous sort when resetting items
• (control): Grid Menu is shown behind grid when using modal window

Fixes

• (editor): provide decimal places option to Float Editor
• (eventService): use grid.getOptions for gridDefinition
• (build): ngx-translate has new version 10 that have breaking changes
• (example): header button highlighting was staying red even after leaving and coming back on the same example
• (grid): issue #27, sort icon hidden behind grid menu w/small dataset
  • a new grid option flag was added in SlickGrid (by me actually) which is alwaysShowVerticalScroll to remove visual issues observed with small dataset
  • this fix was only possible through the new SlickGrid version 2.3.18 released recently

Features

• (styling): text and number editor should be displayed, add styling
• (slickgrid): updated to latest SlickGrid version 2.3.18 which brings a few fixes in the core

Features

• (grid): add Column Span (colspan)
  • see new demo
• (grid): add Header Grouping across multiple colspan
  • see new demo
• (sorting): add support for multi-columns number indicator & tristate
  • try doing a multi-sort in any of the grids
• (grid): add all missing grid options available in SlickGrid
• (grid): Excel like Copy Buffer with Copy Manager Plugin
  • read the Wiki - Excel Copy Buffer Plugin
  • on this Formatter demo or Editor demo page, try to highlight the cell you want to copy and paste them in Excel
• (grid): add a default Header Menu with hideColumn, sort Asc/Desc commands
  • now enabled by default in global grid options

Fixes

• (style): formatter should not remove href link underline
• (grid): calling refreshBackendDataset was not refreshing UI
• (formatter): make sure object exist before getting property
• (editor): SingleSelect & MultiSelect Editors misbehave w/sorted desc

Features

• (grouping): add multiple Formatters and Group Totals Formatters
  • the Wiki - Grouping & Aggregators doc is now fully updated. You can now review it for more info.
• (gridMenu): all commands icons can now be changed in gridMenu
  • see Wiki - Grid Menu icons
• (export): add cell data sanitize option, that will strip HTML tags from output
• (styling): make the multiple-select.js "Select All" text 100% wide
• (sort): add a Clear Sorting function and grid menu command
• (styling): add height/width to the grouping icons to make it easy to click
• (editor): auto-adjust ms-select drop up/down by space
• (grid): correcly set gridHeight & gridWidth, improved resize perf
• (resizer): add lastGridDimension getter
• (graphql): add option to pass extra query arguments
  • see Wiki - GraphQL Filtering

Refactoring

• (graphql): without cursor doesn't need pageInfo or hasNextPage
• (aggregators): Aggregators instantiating classes should be uppercase
  • this is important, since the signature changed from new Aggregators.sum('duration') to new Aggregators.Sum('duration')

Fixes

• (graphql): make sure column exist before trying to get properties

Features

• Grouping & Aggregators, now released
  • see the demo in action
  • see Wiki - Grouping & Aggregators for more info.
  • Export to File also updated to work with it (a reminder, the export is WYSIWYG)
  • created Aggregators to use directly from the lib, more will come in the future
  • updated styling
• MultipleSelect/SingleSelect, MultipleEditor/SingleEditor Collection filterBy/sortBy
  • you can now pre-filter and/or pre-sort the collection passed to any of these Editors/Filters.
  • see Wiki - Collection filterBy/sortBy for more info.
• feat(export): add onGrid Before/After ExportToFile Observable
  • this could be useful if user want to display a spinner while downloading

Fixes

• fix(preset): Preset with Sort was not working correctly with GraphQL
• fix(sorting): previous version 0.14.2 refactoring broke the multi-sort in some occasions
• fix(graphql): no need to throw an error when dataset is empty or is incorrect structure, just return empty array
• fix(interface): multipleSelectOption interface is missing some arguments

Features

• feat(grouping): add first draft of Grouping & Aggregators functionality
  • this is in Alpha stage, things will change, especially the Slick.Data.Aggregators these should not be used directly but I just wanted them working as a POC (proof of concept) for an Alpha release. Future version will separate all Aggregators into their own interfaces and functions, and you will call them from Angular-Slickgrid (just like Formatters).
  • you can give it a try and provide feedback (if so use issue #21), but expect to have to refactor your code in the next version (probably in a week or so)
  • no documentation yet, just look at the demo and ts file for now.

Fixes

• fix(jquery-ui): use latest version of jQuery-UI to avoid jQuery 3 errors
  • previous version wasn't using the latest version of jQuery-UI which is 1.12.1, this version does use it.

Features

• feat(editor): add new Single & Multiselect Editors
  • see Wiki - Select Editors and see a demo
• feat(gridState): add onGridStateServiceChanged Event Emitter
  • see Wiki - Grid State Events for more info
• feat(filter): add new Input & Date Compond Filter
  • see Wiki - Compound Filters for more info and see a demo
• feat(formatter): remove Formatter inputNoPlaceholder and replaced with a new global grid options defaultFilterPlaceholder that is set with the magnifying glass icon. If you don't want any placeholder, just set the defaultFilterPlaceholder: '' to empty string
• feat(sass): add focus color for multiselect
• feat(grid): add column definition setter to update dynamically, ref #20

Fixes

• fix(odata): the OData grid sample Pagination was not working correctly
• fix(formatter): dateTimeIso Formatter was using dateIso
• fix(jquery): remove all jquery imports causing issues with external libs
• fix(jquery-ui): use latest version of jQuery-UI to avoid jQuery 3 errors
  • to avoid error thrown by jQuery 3 and issues with 3rd party lib, in my case Bootstrap.js Tooltip, I had to change the order of the scripts imports, look at angular-cli.json info in the Wiki -
    HOWTO
• fix(gridState): get Current Pagination not set on first load
• fix(styling): header with char "g" is sometimes cut out, increase height
• fix(filter): single select filter incorrect emit
• fix(backend): Grid Presets sort order not correct with backend services
• fix(pagination): go back to page 1 only on filter change (backend service only)
• fix(filter): Compound Input filter on type string was not working correctly with regular grids (without backend service)
• fix(filter): CompoundDate Filter should add a time picker when found 'h'

Features

• feat(queryFilter): add new "queryFieldFilter" and "queryFieldSorter"
• feat(formatter): add a new HyperlinkUriPrefix formatter, you need to pass uriPrefix
• feat(filter): add new InputNoPlaceholderFilter and global default filter
• feat(event): add onGridStateChanged and onPaginationChanged events
• feat(graphQL): add Column "fields" to help pass multiple properties to GraphQL query
• feat(gridState): add headerName which can be columnDef.headerKey or columnDef.name
• feat(service): expose refreshBackendDataset for backend

Fixes

• fix(graphQL): delete duplicate gridOptions it was causing issues with GraphQL internalPostProcess call
• fix(graphql): a column type of number should use EQ in GraphQL query
• fix(backend): backend filter on delay was broken since GridState feature was introduced
• fix(gridState): onGridStateChanged not working correctly in many cases
• fix(formatter): multipleFormatter should pass value to next formatter

Deprecated

• remove deprecated Event Emitter (onGridCreated)

features

• feat(formatter): add multiple formatter
• feat(query): add new Column property excludeFromQuery and use it for Row Selection

fixes

• fix(graphql): GraphQL had the incorrect sorting structure
• fix(error): make sure dataview exist before trying to refresh it
• refactor(filter): make the setValues a required function
• refactor(filter): all setValues argument should be typed
• fix(state): Grid State output should only have properties of it's own type

demo

New demo of a Custom Pagination, thanks to @sabeurch for providing it.

Features

• Grid State allows you know at any time, what are the current Filters, Sorters and Pagination information. See the Grid State & Presets for more info.
  • Pagination is only used with a Backend Service
• Grid Presets, you can now load a grid with certain presets that include Filters, Sorters and Pagination
  • again Pagination is only with a Backend Service
• When combining Grid State and Grid Presets, you can store the state in Local Storage (or DB) and later come back to that same page and load the presets. We plan to use it with Local Storage in our App
• extend GridOption interface with editCommandHandler option (PR #15)
  • this bring Inline Editor Undo capabilities, see updated Example 3
• add datasetIdPropertyName into grid options for dataset that don't have an id but rather another name like ID, where the case matters.
• add MultipleSelectOption type to make it easier to use with filterOptions property
• add Pagination page number input (with Backend Service only)
• updated to latest SlickGrid version 2.3.15 which brings a few features and fixes
  • ColumnPicker / GridMenu
    • expose new hide flags (hideForceFitButton and hideSyncResizeButton
    • expose onColumnsChanged new Slick Event
  • Header Menu now have autoAlign, which basically change the menu alignment to left when it knows there isn't enough room to show on the right

Fixes

• fix(odata): OData string filter should also support != and <> operators with input filter
• fix(grid): Widen resizable handle cursor areas for columns
• fix(events): every subscribed event should have an unsubscribe to avoid unwanted behavior and memory leak
• fix(grid): update SlickGrid version and configure Header Menu autoAlign
• fix(grid): filter selected values were being lost after changin col pos

Thanks

A big thanks to @asdman384 and @sabeurch for their PRs, discussions and ideas. 🥇

Features

• Export to File, currently 2 types of exports are supported Wiki - Export to File
  • CSV
  • Text (Tab or Semicolon delimited, or actually any delimiter you wish)
• New version of Packagr which was designed for Angular 5, this is for Development purposes, but it's worth knowing
• add autoDropWidth option to multiple-select.js which can be used as a filterOptions for SingleSelect and MultipleSelect Filters
• add Filter class "filled" (or no class when empty) for styling purposes on all Filters.
  • we could for example show a different background color when the filter is filled
• add positionOrder to change the order position of the "Custom Commands" list showing up in the Grid Menu
• update to latest version of SlickGrid 2.3.13 which brings a few goodies
  • when using Formatters.translate, you can now define it directly in the Grid Options instead of each Column Definition.

Fixes

• fixed inline editor checkbox not showing up
• fixed pagination should display 1-(itemCount) when count is lower than totalCount
• for example if we want to display 20 items per page but our list only has 6 items, it should display
• 1-6 of 6 items
• fixed issue #13, when using Backend Service API and setting enablePagination: false, it shouldn't show the pagination component.
• fixed header buttons styling, which was not floating correctly anymore
  • Example 7 (Header Button Plugin demo)

Features

• rewrote most of the Filter implementation to make Filters more modular
  • MANDATORY, if you want to use the new filters, you will have to modify your angular-cli.json, you can review the HOWTO
  • now support Multiple-Select Filter with SASS variables for styling.
    • uses a customized version of multiple-select.js to suit Angular-Slickgrid needs, read Wiki - Select Filter for more info.
  • created Single Select Filter (radio box), again read Wiki - Select Filter for more info.
  • also support Custom Filter, read Wiki - Custom Filter for more info.

Fixes

• when rewriting the Filter, I found performance issues there was 2 nested for loop while only 1 loop is enough. So there were performance impact.
• translateFormatter should only translate when it has a value

Deprecated

• Select Filter selectOptions property was renamed collection to make it more generic and re-usable with other Filter that might not be Select.
  • a console warning will be shown if you use the old property name, so it won't break any code. The old property will be removed in later versions.

Fixes

• translateFormatter was throwing error on empty space
  • ngx-translate doesn't seem to like empty string as a translate key but white space are ok, so we'll use that as fallback
• fix regular grid local filter not working with localization (i18n)
  • a new flag useFormatterOuputToFilter was created to get over the problem, so you need to set this flag to true when you want to use the output of Formatter to filter against, see the Wiki - input filter
  • in the Example 12 - Localization, the Title column filtering was not working correctly because each cell value uses a translate formatter.

IMPORTANT

With version 0.9.0+ it is now mandatory to add a forRoot when importing Angular-Slickgrid in your App. It can be set to empty (and/or with Global Options, continue reading) but it has to be defined. For example:

imports: [ AngularSlickgridModule.forRoot(), ... ]

New Features

• Backend Service API refactoring
  • init options are now totally optional, if nothing is provided it will use the default pagination options provided (the pagination that is set outside of the backend service itself).
  • also the flag enablePagination is now totally optional as well, when using Backend Service API, we will assume that the pagination has to be displayed by default.
• Add a Custom Structure property for the Select Filter (that is when your collection doesn't have the property value and/or label, you can now customize their name(s))
  • Check the Wiki - Select Filter for more info.
• You can now define Global Grid Options directly in your App Module instead of re-declaring the same grid options over and over in all your grids. For example

imports: [ AngularSlickgridModule.forRoot({
  enableAutoResize: true,
  enableCellNavigation: true,
  enableColumnReorder: true,
  ...
}), ... ]

• More information on the Global Grid Options can be found on the Wiki - Global Grid Options

Fixes

• Fixing, yet again, the error thrown by SlickGrid of "Stylesheet missing"
• pagination items per page should never reset
• fix wrong error thrown and make sure pagination size is always a number

• fix "SlickPaginationComponent No provider for TranslateService", there was an unused DI in the Slick Pagination component.

New Features

• rewrote the entire Backend Service implementation to make it much simpler to use
  • you no longer need to call initOptions separately to define service options, you can now do that directly in the backendServiceApi
  • a new option flag executeProcessCommandOnInit (only GraphQL for now) was added and if set to true will make the onInit irrelevant (though it still exist and available). This new flag when set to True will run the process callback on page load (component init).
  • another option flag addLocaleIntoQuery was added to deal with GraphQL filterBy and orderBy with translated values.
  • made filterTypingDebounce optional, default to 750ms
  • made GraphQL postProcess totally optional, the service now use an internalPostProcess that will takes care of filling the slickgrid dataset and pagination info (prior to this change, you had to manually deal with them). postProcess is still available and you can still use it to stop a spinner or anything after the process is done.
  • onBackendEventApi is deprecated is replaced by backendServiceApi, you can still use previous implementation but you will get a warning in the console.
• new Column option queryField was added so that you can use another field to do an orderBy or filterBy (this works with all implementation, regular grid with JSON dataset and/or backend services OData/GraphQL)
• Inline Editor dateEditor will now translate automatically by using ngx-translate currentLang to use proper locale with Flatpickr.
• renamed Event Emitter onGridDestroyed to onAfterGridDestroyed to be more consistent with the others.

Fixes

• fixed issue #8 when using inline editor dateEditor and latest Flatpickr version
• fixed issue #9 string filter should be case insensitive
• fixed string filter with (*) operator on filter, the filtering query was inverse
  • John* => startsWith, *Doe => endsWith
• fixed, yet again, an error thrown by SlickGrid saying: "Stylesheet missing"
• Backend Service Pagination
  • changing the page size in the UI was returning a string to pageSize and was breaking the pagination
  • changing page then typing a filter was not reseting the GraphQL offset property which would sometime break pagination since we could be out of bound.

Deprecated

• onBackendEventApi was deprecated, please use the much simpler backendServiceApi instead. You will receive a warning in the console when using previous property. Please refer to the OData Wiki or the GraphQL Wiki for more info on the new property usage.

Fixes

• check grid exist before trying to resize (or auto-resize) the Grid to avoid console error thrown by SlickGrid
• fix an error thrown by SlickGrid when editing a row and highlighting it

New Features

• add info icon Formatter Formatters.infoIcon with has Font Awesome (fa-info-circle)
• add extra SASS border variables for multiple elements
  • border around Header Titles
  • border around Header Filter Row
  • border around ViewPort
• add flag to show/hide Clear Filters & Toggle Filter commands in GridMenu
• add Refresh Dataset command in GridMenu for backendAPI Services only (OData / GraphQL)
• added many new Event Emitters
  • onDataviewCreated
  • onGridCreated
  • onBeforeGridCreate
  • onBeforeGridDestroy
  • onGridDestroyed

OBSOLETE in future version

These 2 Event Emitters got renamed to be consistent in the new naming structure (every emitter now start with onX prefix). You can still use the old names, but I'd like to remove them in future releases.

• dataviewChanged renamed to onDataviewCreated
• gridChanged renamed to onGridCreated

You can see the Event Emitter documentation in the Wiki - Grid & DataView Events

Fixes

• fix select Dropdown filter not working correctly with string
• fix highlight row sometime throwing slickgrid error with updateItem

New Features

• add localization to Select dropdown filter
  • example 12 on the demo was also updated to show this change