angular-slickgrid 4.3.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +181 -181
- package/{index.d.ts → angular-slickgrid.d.ts} +0 -0
- package/app/modules/angular-slickgrid/components/angular-slickgrid.component.d.ts +1 -1
- package/docs/assets/lib/multiple-select/README.md +17 -17
- package/esm2020/app/modules/angular-slickgrid/components/angular-slickgrid.component.mjs +6 -6
- package/esm2020/app/modules/angular-slickgrid/constants.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/extensions/index.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/extensions/slickRowDetailView.mjs +2 -2
- package/esm2020/app/modules/angular-slickgrid/global-grid-options.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/index.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/angularComponentOutput.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/angularGridInstance.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/gridOption.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/index.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/rowDetailView.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/models/slickGrid.interface.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/modules/angular-slickgrid.module.mjs +10 -7
- package/esm2020/app/modules/angular-slickgrid/services/angularUtil.service.mjs +4 -4
- package/esm2020/app/modules/angular-slickgrid/services/bsDropdown.service.mjs +4 -4
- package/esm2020/app/modules/angular-slickgrid/services/container.service.mjs +4 -4
- package/esm2020/app/modules/angular-slickgrid/services/index.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/services/translater.service.mjs +4 -4
- package/esm2020/app/modules/angular-slickgrid/services/utilities.mjs +1 -1
- package/esm2020/app/modules/angular-slickgrid/slickgrid-config.mjs +1 -1
- package/esm2020/public_api.mjs +1 -1
- package/fesm2015/angular-slickgrid.mjs +27 -24
- package/fesm2015/angular-slickgrid.mjs.map +1 -1
- package/fesm2020/angular-slickgrid.mjs +27 -24
- package/fesm2020/angular-slickgrid.mjs.map +1 -1
- package/i18n/en.json +89 -89
- package/i18n/fr.json +90 -90
- package/package.json +7 -7
package/LICENSE
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
Copyright (c) 2017-present, Angular-Slickgrid - Ghislain B.
|
|
2
|
-
|
|
3
|
-
Permission is hereby granted, free of charge, to any person obtaining
|
|
4
|
-
a copy of this software and associated documentation files (the
|
|
5
|
-
"Software"), to deal in the Software without restriction, including
|
|
6
|
-
without limitation the rights to use, copy, modify, merge, publish,
|
|
7
|
-
distribute, sublicense, and/or sell copies of the Software, and to
|
|
8
|
-
permit persons to whom the Software is furnished to do so, subject to
|
|
9
|
-
the following conditions:
|
|
10
|
-
|
|
11
|
-
The above copyright notice and this permission notice shall be
|
|
12
|
-
included in all copies or substantial portions of the Software.
|
|
13
|
-
|
|
14
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
15
|
-
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
16
|
-
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
17
|
-
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
18
|
-
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
19
|
-
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
20
|
-
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
1
|
+
Copyright (c) 2017-present, Angular-Slickgrid - Ghislain B.
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
4
|
+
a copy of this software and associated documentation files (the
|
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
9
|
+
the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be
|
|
12
|
+
included in all copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,181 +1,181 @@
|
|
|
1
|
-
# Angular-Slickgrid
|
|
2
|
-
|
|
3
|
-
[](https://opensource.org/licenses/MIT)
|
|
4
|
-
[](http://www.typescriptlang.org/)
|
|
5
|
-
[](//npmjs.com/package/angular-slickgrid)
|
|
6
|
-
[](https://npmjs.org/package/angular-slickgrid)
|
|
7
|
-
|
|
8
|
-
[](https://github.com/ghiscoding/Angular-Slickgrid/actions)
|
|
9
|
-
[](https://www.cypress.io/)
|
|
10
|
-
[](https://github.com/facebook/jest)
|
|
11
|
-
[](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
|
|
12
|
-
|
|
13
|
-
### Brief introduction
|
|
14
|
-
One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to Angular. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork, it is the most active fork since the original author @mleibman stopped working on his original repo. Also worth knowing that I have contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid... also a reminder, this is a wrapper of a jQuery lib (SlickGrid) and a big portion of the lib (like Editors, Filters and others) are written in jQuery/JavaScript, so just keep that in mind and it also mean that jQuery is a dependency.
|
|
15
|
-
|
|
16
|
-
### License
|
|
17
|
-
[MIT License](LICENSE)
|
|
18
|
-
|
|
19
|
-
## Installation
|
|
20
|
-
Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
|
|
21
|
-
|
|
22
|
-
```sh
|
|
23
|
-
npm install angular-slickgrid
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
### Demo page
|
|
27
|
-
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
|
|
28
|
-
- [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
|
|
29
|
-
- [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-translate)
|
|
30
|
-
|
|
31
|
-
#### Working Demo
|
|
32
|
-
For a complete & working local demo (30+ examples), you can (and should) clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository to get started. That repo is updated frequently and is used to update the GitHub demo page for both the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos).
|
|
33
|
-
```bash
|
|
34
|
-
git clone https://github.com/ghiscoding/angular-slickgrid-demos
|
|
35
|
-
cd bootstrap4-demo-with-translate # or any of the 4 demos
|
|
36
|
-
npm install
|
|
37
|
-
npm start
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Like it? :star: it
|
|
41
|
-
You like to use **Angular-Slickgrid**? Be sure to upvote :star:, maybe support me with cafeine :coffee: and feel free to contribute. 👷👷♀️
|
|
42
|
-
|
|
43
|
-
<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
|
44
|
-
|
|
45
|
-
## Latest News & Releases
|
|
46
|
-
Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
|
|
47
|
-
|
|
48
|
-
## Angular Compatibility
|
|
49
|
-
- version `1.x.x` for Angular 4-6
|
|
50
|
-
- version `2.x.x` for Angular 7-11
|
|
51
|
-
- version `3.x.x` for Angular 12+ and RxJS 7+ ([migration guide to 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x))
|
|
52
|
-
- build `target` got bumped to `ES2018` for modern browser **only**
|
|
53
|
-
- IE11 is EOL and **no longer supported**, if you still need to support it stay with version 2.x
|
|
54
|
-
- uses new [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo
|
|
55
|
-
- last version is [v3.3.2](https://github.com/ghiscoding/Angular-Slickgrid/releases/tag/v3.3.2) compatible **only** with Slickgrid-Universal [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2)
|
|
56
|
-
- Slickgrid-Universal 1.x versions only works with Angular-Slickgrid 4.x
|
|
57
|
-
- version `4.x.x` for Angular 13+, RxJS 7+ and **Ivy ONLY** ([migration guide to 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x))
|
|
58
|
-
- for Ivy build only (no more UMD bundle & output >= ES2017), IE is EOL and definitely out of the picture (finally).
|
|
59
|
-
|
|
60
|
-
For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error)
|
|
61
|
-
|
|
62
|
-
### ngx-translate Compatibility
|
|
63
|
-
|
|
64
|
-
If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even when using a single Locale, that is because it is a `peerDependency` of Angular-Slickgrid. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should still be removed by the tree shaking process after a running a production build. See their version compatibility table below
|
|
65
|
-
|
|
66
|
-
| Angular Version | @ngx-translate/core |
|
|
67
|
-
|-----------------|---------------------|
|
|
68
|
-
| 13+ (Ivy only) | 14.x+ |
|
|
69
|
-
| 10-13 | 13.x+ |
|
|
70
|
-
| 8-9 | 12.x+ |
|
|
71
|
-
| 7 | 11.x+ |
|
|
72
|
-
|
|
73
|
-
### Build Warnings (Angular 8+)
|
|
74
|
-
You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
|
|
75
|
-
```js
|
|
76
|
-
module.exports = {
|
|
77
|
-
packages: {
|
|
78
|
-
'angular-slickgrid': {
|
|
79
|
-
ignorableDeepImportMatchers: [
|
|
80
|
-
/assign-deep/,
|
|
81
|
-
/slickgrid\//,
|
|
82
|
-
/flatpickr/,
|
|
83
|
-
/dequal/,
|
|
84
|
-
/jquery-ui\//,
|
|
85
|
-
]
|
|
86
|
-
},
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
```
|
|
90
|
-
You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
|
|
91
|
-
```json
|
|
92
|
-
"options": {
|
|
93
|
-
"allowedCommonJsDependencies": ["angular-slickgrid"]
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Angular 12 with WebPack 5 - how to fix polyfill error
|
|
98
|
-
Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
|
|
99
|
-
|
|
100
|
-
#### The error you might get
|
|
101
|
-
|
|
102
|
-
```text
|
|
103
|
-
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
|
|
104
|
-
This is no longer the case. Verify if you need this module and configure a polyfill for it.
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
#### Steps to fix it
|
|
108
|
-
1. `npm install stream-browserify`
|
|
109
|
-
2. Add a path mapping in `tsconfig.json`:
|
|
110
|
-
```
|
|
111
|
-
{
|
|
112
|
-
...
|
|
113
|
-
"compilerOptions": {
|
|
114
|
-
"paths": {
|
|
115
|
-
"stream": [ "./node_modules/stream-browserify" ]
|
|
116
|
-
},
|
|
117
|
-
```
|
|
118
|
-
3. Add `stream` to `allowedCommonJsDependencies` in `angular.json`:
|
|
119
|
-
```
|
|
120
|
-
"options": {
|
|
121
|
-
"allowedCommonJsDependencies": [
|
|
122
|
-
"assign-deep",
|
|
123
|
-
"excel-builder-webpacker",
|
|
124
|
-
"jquery-ui",
|
|
125
|
-
"stream"
|
|
126
|
-
],
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
|
|
130
|
-
Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
|
|
131
|
-
|
|
132
|
-
#### How to load data with `HttpClient`?
|
|
133
|
-
You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call it and that's it. The `dataset` property can be changed or refreshed at any time, which is why you can use local data and/or connect it to a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
|
|
134
|
-
|
|
135
|
-
## Wiki / Documentation
|
|
136
|
-
The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
|
|
137
|
-
|
|
138
|
-
## Main features
|
|
139
|
-
You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
|
|
140
|
-
|
|
141
|
-
## Missing features
|
|
142
|
-
What if `Angular-Slickgrid` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
|
|
143
|
-
|
|
144
|
-
Fear not, you can simply reference the `SlickGrid` and `DataView` objects, just like in the core lib (they are exposed through Custom Events). For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/Angular-Slickgrid/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
## Screenshots
|
|
148
|
-
|
|
149
|
-
Screenshots from the demo app with the `Bootstrap` theme.
|
|
150
|
-
|
|
151
|
-
_Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/Angular-Slickgrid) page._
|
|
152
|
-
|
|
153
|
-
### Slickgrid example with Formatters (last column shown is a custom Formatter)
|
|
154
|
-
|
|
155
|
-
#### _You can also see the Grid Menu opened (aka hambuger menu)_
|
|
156
|
-
|
|
157
|
-

|
|
158
|
-
|
|
159
|
-
### Filters and Multi-Column Sort
|
|
160
|
-
|
|
161
|
-

|
|
162
|
-
|
|
163
|
-
### Inline Editing
|
|
164
|
-
|
|
165
|
-

|
|
166
|
-
|
|
167
|
-
### Pinned (aka frozen) Columns/Rows
|
|
168
|
-
|
|
169
|
-

|
|
170
|
-
|
|
171
|
-
### Draggable Grouping & Aggregators
|
|
172
|
-
|
|
173
|
-

|
|
174
|
-
|
|
175
|
-
### Slickgrid Example with Server Side (Filter/Sort/Pagination)
|
|
176
|
-
#### Comes with OData & GraphQL support (you can implement custom ones too)
|
|
177
|
-
|
|
178
|
-

|
|
179
|
-
|
|
180
|
-
### Composite Editor Modal Windows
|
|
181
|
-

|
|
1
|
+
# Angular-Slickgrid
|
|
2
|
+
|
|
3
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
[](http://www.typescriptlang.org/)
|
|
5
|
+
[](//npmjs.com/package/angular-slickgrid)
|
|
6
|
+
[](https://npmjs.org/package/angular-slickgrid)
|
|
7
|
+
|
|
8
|
+
[](https://github.com/ghiscoding/Angular-Slickgrid/actions)
|
|
9
|
+
[](https://www.cypress.io/)
|
|
10
|
+
[](https://github.com/facebook/jest)
|
|
11
|
+
[](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
|
|
12
|
+
|
|
13
|
+
### Brief introduction
|
|
14
|
+
One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to Angular. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork, it is the most active fork since the original author @mleibman stopped working on his original repo. Also worth knowing that I have contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid... also a reminder, this is a wrapper of a jQuery lib (SlickGrid) and a big portion of the lib (like Editors, Filters and others) are written in jQuery/JavaScript, so just keep that in mind and it also mean that jQuery is a dependency.
|
|
15
|
+
|
|
16
|
+
### License
|
|
17
|
+
[MIT License](LICENSE)
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npm install angular-slickgrid
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Demo page
|
|
27
|
+
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
|
|
28
|
+
- [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
|
|
29
|
+
- [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-translate)
|
|
30
|
+
|
|
31
|
+
#### Working Demo
|
|
32
|
+
For a complete & working local demo (30+ examples), you can (and should) clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository to get started. That repo is updated frequently and is used to update the GitHub demo page for both the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos).
|
|
33
|
+
```bash
|
|
34
|
+
git clone https://github.com/ghiscoding/angular-slickgrid-demos
|
|
35
|
+
cd bootstrap4-demo-with-translate # or any of the 4 demos
|
|
36
|
+
npm install
|
|
37
|
+
npm start
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Like it? :star: it
|
|
41
|
+
You like to use **Angular-Slickgrid**? Be sure to upvote :star:, maybe support me with cafeine :coffee: and feel free to contribute. 👷👷♀️
|
|
42
|
+
|
|
43
|
+
<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
|
44
|
+
|
|
45
|
+
## Latest News & Releases
|
|
46
|
+
Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
|
|
47
|
+
|
|
48
|
+
## Angular Compatibility
|
|
49
|
+
- version `1.x.x` for Angular 4-6
|
|
50
|
+
- version `2.x.x` for Angular 7-11
|
|
51
|
+
- version `3.x.x` for Angular 12+ and RxJS 7+ ([migration guide to 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x))
|
|
52
|
+
- build `target` got bumped to `ES2018` for modern browser **only**
|
|
53
|
+
- IE11 is EOL and **no longer supported**, if you still need to support it stay with version 2.x
|
|
54
|
+
- uses new [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo
|
|
55
|
+
- last version is [v3.3.2](https://github.com/ghiscoding/Angular-Slickgrid/releases/tag/v3.3.2) compatible **only** with Slickgrid-Universal [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2)
|
|
56
|
+
- Slickgrid-Universal 1.x versions only works with Angular-Slickgrid 4.x
|
|
57
|
+
- version `4.x.x` for Angular 13+, RxJS 7+ and **Ivy ONLY** ([migration guide to 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x))
|
|
58
|
+
- for Ivy build only (no more UMD bundle & output >= ES2017), IE is EOL and definitely out of the picture (finally).
|
|
59
|
+
|
|
60
|
+
For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error)
|
|
61
|
+
|
|
62
|
+
### ngx-translate Compatibility
|
|
63
|
+
|
|
64
|
+
If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even when using a single Locale, that is because it is a `peerDependency` of Angular-Slickgrid. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should still be removed by the tree shaking process after a running a production build. See their version compatibility table below
|
|
65
|
+
|
|
66
|
+
| Angular Version | @ngx-translate/core |
|
|
67
|
+
|-----------------|---------------------|
|
|
68
|
+
| 13+ (Ivy only) | 14.x+ |
|
|
69
|
+
| 10-13 | 13.x+ |
|
|
70
|
+
| 8-9 | 12.x+ |
|
|
71
|
+
| 7 | 11.x+ |
|
|
72
|
+
|
|
73
|
+
### Build Warnings (Angular 8+)
|
|
74
|
+
You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
|
|
75
|
+
```js
|
|
76
|
+
module.exports = {
|
|
77
|
+
packages: {
|
|
78
|
+
'angular-slickgrid': {
|
|
79
|
+
ignorableDeepImportMatchers: [
|
|
80
|
+
/assign-deep/,
|
|
81
|
+
/slickgrid\//,
|
|
82
|
+
/flatpickr/,
|
|
83
|
+
/dequal/,
|
|
84
|
+
/jquery-ui\//,
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
|
|
91
|
+
```json
|
|
92
|
+
"options": {
|
|
93
|
+
"allowedCommonJsDependencies": ["angular-slickgrid"]
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Angular 12 with WebPack 5 - how to fix polyfill error
|
|
98
|
+
Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
|
|
99
|
+
|
|
100
|
+
#### The error you might get
|
|
101
|
+
|
|
102
|
+
```text
|
|
103
|
+
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
|
|
104
|
+
This is no longer the case. Verify if you need this module and configure a polyfill for it.
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
#### Steps to fix it
|
|
108
|
+
1. `npm install stream-browserify`
|
|
109
|
+
2. Add a path mapping in `tsconfig.json`:
|
|
110
|
+
```
|
|
111
|
+
{
|
|
112
|
+
...
|
|
113
|
+
"compilerOptions": {
|
|
114
|
+
"paths": {
|
|
115
|
+
"stream": [ "./node_modules/stream-browserify" ]
|
|
116
|
+
},
|
|
117
|
+
```
|
|
118
|
+
3. Add `stream` to `allowedCommonJsDependencies` in `angular.json`:
|
|
119
|
+
```
|
|
120
|
+
"options": {
|
|
121
|
+
"allowedCommonJsDependencies": [
|
|
122
|
+
"assign-deep",
|
|
123
|
+
"excel-builder-webpacker",
|
|
124
|
+
"jquery-ui",
|
|
125
|
+
"stream"
|
|
126
|
+
],
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
|
|
130
|
+
Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
|
|
131
|
+
|
|
132
|
+
#### How to load data with `HttpClient`?
|
|
133
|
+
You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call it and that's it. The `dataset` property can be changed or refreshed at any time, which is why you can use local data and/or connect it to a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
|
|
134
|
+
|
|
135
|
+
## Wiki / Documentation
|
|
136
|
+
The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
|
|
137
|
+
|
|
138
|
+
## Main features
|
|
139
|
+
You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
|
|
140
|
+
|
|
141
|
+
## Missing features
|
|
142
|
+
What if `Angular-Slickgrid` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
|
|
143
|
+
|
|
144
|
+
Fear not, you can simply reference the `SlickGrid` and `DataView` objects, just like in the core lib (they are exposed through Custom Events). For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/Angular-Slickgrid/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
## Screenshots
|
|
148
|
+
|
|
149
|
+
Screenshots from the demo app with the `Bootstrap` theme.
|
|
150
|
+
|
|
151
|
+
_Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/Angular-Slickgrid) page._
|
|
152
|
+
|
|
153
|
+
### Slickgrid example with Formatters (last column shown is a custom Formatter)
|
|
154
|
+
|
|
155
|
+
#### _You can also see the Grid Menu opened (aka hambuger menu)_
|
|
156
|
+
|
|
157
|
+

|
|
158
|
+
|
|
159
|
+
### Filters and Multi-Column Sort
|
|
160
|
+
|
|
161
|
+

|
|
162
|
+
|
|
163
|
+
### Inline Editing
|
|
164
|
+
|
|
165
|
+

|
|
166
|
+
|
|
167
|
+
### Pinned (aka frozen) Columns/Rows
|
|
168
|
+
|
|
169
|
+

|
|
170
|
+
|
|
171
|
+
### Draggable Grouping & Aggregators
|
|
172
|
+
|
|
173
|
+

|
|
174
|
+
|
|
175
|
+
### Slickgrid Example with Server Side (Filter/Sort/Pagination)
|
|
176
|
+
#### Comes with OData & GraphQL support (you can implement custom ones too)
|
|
177
|
+
|
|
178
|
+

|
|
179
|
+
|
|
180
|
+
### Composite Editor Modal Windows
|
|
181
|
+

|
|
File without changes
|
|
@@ -196,5 +196,5 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
|
|
|
196
196
|
*/
|
|
197
197
|
private updateEditorCollection;
|
|
198
198
|
static ɵfac: i0.ɵɵFactoryDeclaration<AngularSlickgridComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }, null, null]>;
|
|
199
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AngularSlickgridComponent, "angular-slickgrid", never, { "customDataView": "customDataView"; "gridId": "gridId"; "gridOptions": "gridOptions"; "paginationOptions": "paginationOptions"; "columnDefinitions": "columnDefinitions"; "dataset": "dataset"; "datasetHierarchical": "datasetHierarchical"; }, {}, never, never
|
|
199
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AngularSlickgridComponent, "angular-slickgrid", never, { "customDataView": "customDataView"; "gridId": "gridId"; "gridOptions": "gridOptions"; "paginationOptions": "paginationOptions"; "columnDefinitions": "columnDefinitions"; "dataset": "dataset"; "datasetHierarchical": "datasetHierarchical"; }, {}, never, never>;
|
|
200
200
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# Multiple Select
|
|
2
|
-
|
|
3
|
-
Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
|
|
4
|
-
|
|
5
|
-
To get started checkout examples and documentation at http://wenzhixin.net.cn/p/multiple-select
|
|
6
|
-
|
|
7
|
-
## jsFiddle examples
|
|
8
|
-
|
|
9
|
-
https://github.com/wenzhixin/multiple-select/issues/255
|
|
10
|
-
|
|
11
|
-
## Changelog
|
|
12
|
-
|
|
13
|
-
[CHANGELOG](https://github.com/wenzhixin/multiple-select/blob/master/CHANGELOG.md)
|
|
14
|
-
|
|
15
|
-
## LICENSE
|
|
16
|
-
|
|
17
|
-
[The MIT License](https://github.com/wenzhixin/multiple-select/blob/master/LICENSE)
|
|
1
|
+
# Multiple Select
|
|
2
|
+
|
|
3
|
+
Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
|
|
4
|
+
|
|
5
|
+
To get started checkout examples and documentation at http://wenzhixin.net.cn/p/multiple-select
|
|
6
|
+
|
|
7
|
+
## jsFiddle examples
|
|
8
|
+
|
|
9
|
+
https://github.com/wenzhixin/multiple-select/issues/255
|
|
10
|
+
|
|
11
|
+
## Changelog
|
|
12
|
+
|
|
13
|
+
[CHANGELOG](https://github.com/wenzhixin/multiple-select/blob/master/CHANGELOG.md)
|
|
14
|
+
|
|
15
|
+
## LICENSE
|
|
16
|
+
|
|
17
|
+
[The MIT License](https://github.com/wenzhixin/multiple-select/blob/master/LICENSE)
|