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
{{ message }}
This repository was archived by the owner on Jun 1, 2025. It is now read-only.
-[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.
109
120
@@ -133,9 +144,10 @@ export class GridBasicComponent {
133
144
fetch: (searchText, updateCallback) => {
134
145
// assuming your API call returns a label/value pair
135
146
yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
Copy file name to clipboardExpand all lines: docs/column-functionalities/editors/Date-Editor-(flatpickr).md
+14-4Lines changed: 14 additions & 4 deletions
Display the source diff
Display the rich diff
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
+11Lines changed: 11 additions & 0 deletions
Display the source diff
Display the rich diff
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
+13Lines changed: 13 additions & 0 deletions
Display the source diff
Display the rich diff
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.
72
72
73
73
```ts
74
74
filter: {
@@ -118,14 +118,10 @@ export class GridBasicComponent implements OnInit {
118
118
editorOptions: {
119
119
minLength: 3, // minimum count of character that the user needs to type before it queries to the remote
120
120
fetch: (searchText, updateCallback) => {
121
-
$.ajax({
122
-
url: 'http://gd.geobytes.com/AutoCompleteCity',
123
-
dataType: 'jsonp',
124
-
data: {
125
-
q: searchText// geobytes requires a query with "q" queryParam representing the chars typed (e.g.: gd.geobytes.com/AutoCompleteCity?q=van
126
-
},
127
-
success: (data) =>updateCallback(data)
128
-
});
121
+
// assuming your API call returns a label/value pair
122
+
yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
123
+
.then(result=>updateCallback((results.length>0) ?results: [{ label: 'No match found.', value: '' }]))
124
+
.catch(error=>console.log('Error:', error));
129
125
}
130
126
},
131
127
},
@@ -138,18 +134,12 @@ export class GridBasicComponent implements OnInit {
138
134
filterOptions: {
139
135
minLength: 3, // minimum count of character that the user needs to type before it queries to the remote
140
136
fetch: (searchText, updateCallback) => {
141
-
$.ajax({
142
-
url: 'http://gd.geobytes.com/AutoCompleteCity',
143
-
dataType: 'jsonp',
144
-
data: {
145
-
q: searchText
146
-
},
147
-
success: (data) => {
148
-
updateCallback(data);
149
-
}
150
-
});
151
-
}
152
-
},
137
+
// assuming your API call returns a label/value pair
138
+
yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
139
+
.then(result=>updateCallback((results.length>0) ?results: [{ label: 'No match found.', value: '' }]))
Copy file name to clipboardExpand all lines: docs/column-functionalities/filters/Compound-Filters.md
+14Lines changed: 14 additions & 0 deletions
Display the source diff
Display the rich diff
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).
0 commit comments