You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Disabling specific cell Edit](#disabling-specific-cell-edit)
@@ -446,6 +447,34 @@ You can also use the Slick Grid events as shown below
446
447
}
447
448
```
448
449
450
+
## Editor Options
451
+
452
+
#### Column Editor `editorOptions`
453
+
Some of the Editors could receive extra options, which is mostly the case for Editors using external dependencies (e.g. `autocompleter`, `date`, `multipleSelect`, ...) you can provide options via the `editorOptions`, for example
454
+
455
+
```ts
456
+
this.columnDefinitions= [{
457
+
id: 'start', name: 'Start Date', field: 'start',
458
+
editor: {
459
+
model: Editors.date,
460
+
editorOptions: { minDate: 'today' }
461
+
}
462
+
}];
463
+
```
464
+
465
+
#### Grid Option `defaultEditorOptions
466
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
467
+
468
+
```ts
469
+
this.gridOptions= {
470
+
defaultEditorOptions: {
471
+
autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
472
+
date: { minDate: 'today' },
473
+
longText: { cols: 50, rows: 5 }
474
+
}
475
+
}
476
+
```
477
+
449
478
## Validators
450
479
Each Editor needs to implement the `validate()` method which will be executed and validated before calling the `save()` method. Most Editor will simply validate that the value passed is correctly formed. The Float Editor is one of the more complex one and will first check if the number is a valid float then also check if `minValue` or `maxValue` was passed and if so validate against them. If any errors is found it will return an object of type `EditorValidatorOutput` (see the signature on top).
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
109
+
110
+
```ts
111
+
this.gridOptions= {
112
+
defaultEditorOptions: {
113
+
autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
114
+
}
115
+
}
116
+
```
117
+
107
118
## Using External Remote API
108
119
You could also use external 3rd party Web API (can be JSONP query or regular JSON). This will make a much shorter result since it will only return a small subset of what will be displayed in the AutoComplete Editor or Filter. For example, we could use GeoBytes which provide a JSONP Query API for the cities of the world, you can imagine the entire list of cities would be way too big to download locally, so this is why we use such API.
Copy file name to clipboardExpand all lines: docs/column-functionalities/editors/Date-Editor-(flatpickr).md
+14-4
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
- See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...)
5
5
6
6
### Information
7
-
The Date Editor is provided through an external library named [Flatpickr](https://flatpickr.js.org/examples/) and all options from that library can be added to your `editorOptions` (see below[Editor Options]()), so in order to add things like minimum date, disabling dates, ... just review all the [Flatpickr Examples](https://flatpickr.js.org/examples/) and then add them into `editorOptions`. Also just so you know, `editorOptions` is use by all other editors as well to expose external library like Flatpickr, Multiple-Select.js, etc...
7
+
The Date Editor is provided through an external library named [Flatpickr](https://flatpickr.js.org/examples/) and all options from that library can be added to your `editorOptions` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Flatpickr Examples](https://flatpickr.js.org/examples/) and then add them into `editorOptions`. Also just so you know, `editorOptions` is use by all other editors as well to expose external library like Flatpickr, Multiple-Select.js, etc...
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
41
+
42
+
```ts
43
+
this.gridOptions= {
44
+
defaultEditorOptions: {
45
+
date: { minDate: 'today' }, // typed as FlatpickrOption
46
+
}
47
+
}
48
+
```
49
+
40
50
### Custom Validator
41
51
You can add a Custom Validator from an external function or inline (inline is shown below and comes from [Example 3](https://ghiscoding.github.io/Angular-Slickgrid/#/editor))
Copy file name to clipboardExpand all lines: docs/column-functionalities/editors/LongText-Editor-(textarea).md
+11
Original file line number
Diff line number
Diff line change
@@ -39,6 +39,17 @@ defineGrid() {
39
39
}
40
40
```
41
41
42
+
#### Grid Option `defaultEditorOptions
43
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
Copy file name to clipboardExpand all lines: docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md
+13
Original file line number
Diff line number
Diff line change
@@ -46,6 +46,19 @@ editor: {
46
46
} asMultipleSelectOption
47
47
}
48
48
```
49
+
50
+
#### Grid Option `defaultEditorOptions
51
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example
52
+
53
+
```ts
54
+
this.gridOptions= {
55
+
defaultEditorOptions: {
56
+
// Note: that `select` combines both multipleSelect & singleSelect
57
+
select: { minHeight: 350 }, // typed as MultipleSelectOption
58
+
}
59
+
}
60
+
```
61
+
49
62
### Complex Object
50
63
If your `field` string has a dot (.) it will automatically assume that it is dealing with a complex object. There are however some options you can use with a complex object, the following options from the `ColumnEditor` might be useful to you
All the available options that can be provided as `filterOptions` to your column definitions can be found under this [AutocompleterOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/autocompleterOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the jQueryUI autocomplete library.
71
+
All the available options that can be provided as `filterOptions` to your column definitions can be found under this [AutocompleterOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/autocompleterOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the autocomplete library.
Copy file name to clipboardExpand all lines: docs/column-functionalities/filters/Compound-Filters.md
+14
Original file line number
Diff line number
Diff line change
@@ -175,6 +175,20 @@ export class AppComponent {
175
175
}
176
176
```
177
177
178
+
#### Grid Option `defaultFilterOptions
179
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultFilterOptions` Grid Option. Note that they are set via the filter type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `filterOptions` (also note that each key is already typed with the correct filter option interface), for example
180
+
181
+
```ts
182
+
this.gridOptions= {
183
+
defaultFilterOptions: {
184
+
// Note: that `date`, `select` and `slider` are combining both compound & range filters together
185
+
date: { minDate: 'today' },
186
+
select: { minHeight: 350 }, // typed as MultipleSelectOption
187
+
slider: { sliderStartValue: 10 }
188
+
}
189
+
}
190
+
```
191
+
178
192
### Compound Operator List (custom list)
179
193
Each Compound Filter will try to define the best possible Operator List depending on what Field Type you may have (for example we can have StartsWith Operator on a string but not on a number). If you want to provide your own custom Operator List to a Compound Filter, you can do that via the `compoundOperatorList` property (also note that your Operator must be a valid OperatorType/OperatorString).
All the available options that can be provided as `filterOptions` to your column definitions can be found under this [FlatpickrOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/jQueryUiSliderOption.interface.ts)and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the jQueryUI Slider library.
109
+
##### Filter Options
110
+
All the available options that can be provided as `filterOptions` to your column definitions and you should try to cast your `filterOptions` to the specific interface as much as possible to make sure that you use only valid options of allowed by the targeted filter
112
111
113
112
```ts
114
113
filter: {
115
114
model: Filters.sliderRange,
116
115
filterOptions: {
117
-
min: 0,
118
-
step: 5
119
-
} asJQueryUiSliderOption
116
+
sliderStartValue: 5
117
+
} asSliderOption
118
+
}
119
+
```
120
+
121
+
#### Grid Option `defaultFilterOptions
122
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultFilterOptions` Grid Option. Note that they are set via the filter type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `filterOptions` (also note that each key is already typed with the correct filter option interface), for example
123
+
124
+
```ts
125
+
this.gridOptions= {
126
+
defaultFilterOptions: {
127
+
// Note: that `date`, `select` and `slider` are combining both compound & range filters together
128
+
date: { minDate: 'today' },
129
+
select: { minHeight: 350 }, // typed as MultipleSelectOption
Copy file name to clipboardExpand all lines: docs/column-functionalities/filters/Select-Filter.md
+11
Original file line number
Diff line number
Diff line change
@@ -565,6 +565,17 @@ filter: {
565
565
}
566
566
```
567
567
568
+
#### Grid Option `defaultFilterOptions
569
+
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultFilterOptions` Grid Option. Note that they are set via the filter type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `filterOptions` (also note that each key is already typed with the correct filter option interface), for example
570
+
```ts
571
+
this.gridOptions = {
572
+
defaultFilterOptions: {
573
+
// Note: that `select` combines both multipleSelect & singleSelect
574
+
select: { minHeight: 350 }, // typed as MultipleSelectOption
575
+
}
576
+
}
577
+
```
578
+
568
579
### Multiple-select.js Options
569
580
You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your `filterOptions` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options).
0 commit comments