feat: add global defaultEditorOptions & defaultFilterOptions

Author: ghiscoding-SE

docs/column-functionalities/Editors.md

@@ -8,6 +8,7 @@
 - [onClick Action Editor (icon click)](#onclick-action-editor-icon-click)
 - [AutoComplete Editor](editors/AutoComplete-Editor.md)
 - [Select (single/multi) Editors](editors/Select-Dropdown-Editor-(single,multiple).md)
+- [Editor Options](#editor-options)
 - [Validators](#validators)
    - [Custom Validator](#custom-validator)
 - [Disabling specific cell Edit](#disabling-specific-cell-edit)
@@ -446,6 +447,34 @@ You can also use the Slick Grid events as shown below
   }
 ```
 
+## Editor Options
+
+#### Column Editor `editorOptions`
+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
+
+```ts
+this.columnDefinitions = [{
+  id: 'start', name: 'Start Date', field: 'start',
+  editor: { 
+    model: Editors.date,
+    editorOptions: { minDate: 'today' }
+  }
+}];
+```
+
+#### Grid Option `defaultEditorOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultEditorOptions: { 
+    autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
+    date: { minDate: 'today' },
+    longText: { cols: 50, rows: 5 } 
+  }
+}
+```
+
 ## Validators
 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).
 

docs/column-functionalities/editors/Autocomplete-Editor-(Kraaden-lib).md

@@ -79,7 +79,7 @@ this.columnDefinitions = [
       // example with a fixed Collection (or collectionAsync)
       editorOptions: {
         showOnFocus: true, // display the list on focus of the autocomplete (without the need to type anything)
-      },
+      } as AutocompleterOption,
       enableRenderHtml: true, // this flag only works with a fixed Collection
       // collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION),
       collection: [
@@ -104,6 +104,17 @@ editor: {
 }
 ```
 
+#### Grid Option `defaultEditorOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultEditorOptions: { 
+    autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
+  }
+}
+```
+
 ## Using External Remote API
 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.
 

docs/column-functionalities/editors/Date-Editor-(flatpickr).md

@@ -4,7 +4,7 @@
 - See the [Editors - Uncyclo](../Editors.md) for more general info about Editors (validators, event handlers, ...)
 
 ### Information
-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...
+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...
 
 ### Demo
 [Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/editor) | [Demo Component](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-editor.component.ts)
@@ -22,9 +22,8 @@ defineGrid() {
       editor: {
         model: Editors.date,
         editorOptions: {
-          editorOptions: {
-            minDate: 'today',
-            disable: [(date: Date) => this.isWeekendDay(date)], // disable weekend days (Sat, Sunday)
+          minDate: 'today',
+          disable: [(date: Date) => this.isWeekendDay(date)], // disable weekend days (Sat, Sunday)
         } as FlatpickrOption,
       },
     },
@@ -37,6 +36,17 @@ isWeekendDay(date: Date): boolean {
 }
 ```
 
+#### Grid Option `defaultEditorOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultEditorOptions: { 
+    date: { minDate: 'today' }, // typed as FlatpickrOption
+  }
+}
+```
+
 ### Custom Validator
 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))
 ```ts

docs/column-functionalities/editors/LongText-Editor-(textarea).md

@@ -39,6 +39,17 @@ defineGrid() {
 }
 ```
 
+#### Grid Option `defaultEditorOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultEditorOptions: {
+    longText: { cols: 50, rows: 5 }, // typed as LongTextEditorOption 
+  }
+}
+```
+
 ### Custom Validator
 You can add a Custom Validator, from an external function or inline.
 ```ts

docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md

@@ -46,6 +46,19 @@ editor: {
   } as MultipleSelectOption
 }
 ```
+
+#### Grid Option `defaultEditorOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultEditorOptions: { 
+    // Note: that `select` combines both multipleSelect & singleSelect
+    select: { minHeight: 350 }, // typed as MultipleSelectOption
+  }
+}
+```
+
 ### Complex Object
 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
 ```ts

docs/column-functionalities/filters/Autocomplete-Filter-(Kraaden-lib).md

@@ -68,7 +68,7 @@ export class GridBasicComponent implements OnInit {
 ```
 
 ### Filter Options (`AutocompleterOption` interface)
-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.
+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.
 
 ```ts
 filter: {

docs/column-functionalities/filters/Compound-Filters.md

@@ -175,6 +175,20 @@ export class AppComponent {
 }
 ```
 
+#### Grid Option `defaultFilterOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultFilterOptions: { 
+    // Note: that `date`, `select` and `slider` are combining both compound & range filters together
+    date: { minDate: 'today' },
+    select: { minHeight: 350 }, // typed as MultipleSelectOption
+    slider: { sliderStartValue: 10 }
+  }
+}
+```
+
 ### Compound Operator List (custom list)
 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).
 

docs/column-functionalities/filters/Range-Filters.md

@@ -2,7 +2,7 @@
 - [Using an Inclusive Range](#using-an-inclusive-range-default-is-exclusive)
 - [Using 2 dots (..) notation](#using-2-dots--notation)
 - [Using a Slider Range](#using-a-slider-range-filter)
-  - [Filter Options (`JQueryUiSliderOption` interface)](#filter-options-jqueryuislideroption-interface)
+  - [Filter Options](#filter-options)
 - [Using a Date Range](#using-a-date-range-filter)
    - [Filter Options (`FlatpickrOption` interface)](#filter-options-flatpickroption-interface)
 - [Update Filters Dynamically](Input-Filter.md#update-filters-dynamically)
@@ -71,7 +71,7 @@ The slider range filter is very useful if you can just want to use the mouse to
 
 ##### Component
 ```ts
-import { Filters, Formatters, GridOption, JQueryUiSliderOption, OperatorType } from 'angular-slickgrid';
+import { Filters, Formatters, GridOption, SliderRangeOption, OperatorType } from 'angular-slickgrid';
 
 export class GridBasicComponent implement OnInit {
   columnDefinitions: Column[];
@@ -93,9 +93,8 @@ export class GridBasicComponent implement OnInit {
           operator: OperatorType.rangeInclusive, // optional, defaults to exclusive
           params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
 
-          // you can also optionally pass any option of the jQuery UI Slider
-          // however you can't override the `change` and `slide` events since they are used by the lib
-          filterOptions: { min: 0, step: 5 } as JQueryUiSliderOption
+          // you can also optionally pass any option of the Slider filter
+          filterOptions: { sliderStartValue: 5 } as SliderRangeOption
         }
       },
     ];
@@ -107,16 +106,29 @@ export class GridBasicComponent implement OnInit {
 }
 ```
 
-##### Filter Options (`JQueryUiSliderOption` interface)
-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.
+##### Filter Options
+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
 
 ```ts
 filter: {
   model: Filters.sliderRange,
   filterOptions: {
-    min: 0,
-    step: 5
-  } as JQueryUiSliderOption
+    sliderStartValue: 5
+  } as SliderOption
+}
+```
+
+#### Grid Option `defaultFilterOptions
+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
+
+```ts
+this.gridOptions = {
+  defaultFilterOptions: { 
+    // Note: that `date`, `select` and `slider` are combining both compound & range filters together
+    date: { minDate: 'today' },
+    select: { minHeight: 350 }, // typed as MultipleSelectOption
+    slider: { sliderStartValue: 10 }
+  }
 }
 ```
 

docs/column-functionalities/filters/Select-Filter.md

@@ -565,6 +565,17 @@ filter: {
 }
 ```
 
+#### Grid Option `defaultFilterOptions
+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
+```ts
+this.gridOptions = {
+  defaultFilterOptions: { 
+    // Note: that `select` combines both multipleSelect & singleSelect
+    select: { minHeight: 350 }, // typed as MultipleSelectOption
+  }
+}
+```
+
 ### Multiple-select.js Options
 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).