Select Filter (dropdown)
Last updated
Last updated
Collection Options
Demo with Localization
Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or more search term value.
Note
okButton option was added to add an OK button for simpler closing of the dropdown after selecting multiple options.
okButtonText was also added for locale (i18n)
offsetLeft option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen.
autoDropWidth option was added to automatically resize the dropdown with the same width as the select filter element.
UI Sample
There are 3 types of select filter
Filters.singleSelect which will filter the dataset with 1 value (uses EQ internally) with checkbox icons.
Filters.multipleSelect which will do a search with 1 or more values (uses IN internally) with radio icons.
Less recommended
Filters.select which will filter the dataset with 1 value (uses EQ internally), same as singleSelect but uses styling from the browser setup.
this one is less recommended, it is a simple and plain select dropdown. There are no styling applied and will be different in every browser. If you want a more consistent visual UI, it's suggested to use the other 2 filters (multipleSelect or singleSelect)
Simply set the flag filterable to True and and enable the filters in the Grid Options. Here is an example with a full column definition:
If you want to load the grid with certain default filter(s), you can use the following optional property:
searchTerms (array of values)
Note
Sample
LabelKey
For the Select (dropdown) filter, you can fill in the "labelKey" property, if found it will translate it right away. If no labelKey is provided nothing will be translated (unless you have enableTranslateLabel set to true), else it will use "label"
enableTranslateLabel
You could also use the enableTranslateLabel which will translate regardless of the label key name (so it could be used with label, labelKey or even a customStructure label).
What if your select options (collection) have totally different value/label pair? In this case, you can use the customStructure to change the property name(s) to use. You can change the label and/or the value, they can be passed independently.
What if you want to use customStructure and translate the labels? Simply pass the flag enableTranslateLabel: true
By default you cannot filter empty dataset values (unless you use a multipleSelect Filter). You might be wondering, why though? By default an empty value in a singleSelect Filter is equal to returning all values. You could however use this option emptySearchTermReturnAllValues set to false to add the ability to really search only empty values.
Note: the defaults for single & multiple select filters are different
single select filter default is emptySearchTermReturnAllValues: true
multiple select filter default is emptySearchTermReturnAllValues: false
You can also pre-sort or pre-filter the collection given to the multipleSelect/singleSelect Filters. Also note that if the enableTranslateLabel flag is set to True, it will use the translated value to filter or sort the collection. The supported filters are
equal: filters the collection for only the value provided in collectionFilterBy.value
notEqual: filters the collection for every value EXCEPT the value provided in collectionFilterBy.value
in: supports collectionFilterBy.property as a nested array, and if the collectionFilterBy.value exists in the nested array, the parent item will remain in the collection (NOT be filtered from the collection). For example: columnDef.filter.collection: [{ foo: ['bar'] }, { foo: ['foo'] }], collectionFilterBy.property: 'foo', collectionFilterBy.value: 'bar' will return the first item in the collection only
notIn:opposite of in
contains: assumes the collectionFilterBy.value is an array and will check if any of those values exists in the collectionFilterBy.property. For example: collection: [{ foo: 'bar' }, { foo: 'foo' }], collectionFilterBy.property: 'foo', collectionFilterBy.value: [ 'bar', 'foo' ] will return bot items
Full example:
Multiple FilterBy/SortBy
You can also pass multiple collectionFilterBy or collectionSortBy simply by changing these object to array of objects.
However please note that by default the collectionFilterBy will not merge the result after each pass, it will instead chain them and use the new returned collection after each pass (which means that if original collection is 100 items and 20 items are returned after 1st pass, then the 2nd pass will filter out of these 20 items and so on).
What if you wanted to merge the results instead? Then in this case, you can change the filterResultAfterEachPass flag defined in `collectionOptions
LabelPrefix / LabelSuffix
What if you want to use customStructure and translate the labels? Simply pass the flag enableTranslateLabel: true
You can also pre-sort or pre-filter the collection given to the multipleSelect/singleSelect Filters. Also note that if the enableTranslateLabel flag is set to True, it will use the translated value to filter or sort the collection. For example:
You can use labelPrefix and/or labelSuffix which will concatenate the multiple properties together (labelPrefix + label + labelSuffix) which will used by each Select Filter option label. You can also use the property separatorBetweenTextLabels to define a separator between prefix, label & suffix.
Note If enableTranslateLabel flag is set to True, it will also try to translate the Prefix / Suffix / OptionLabel texts.
For example, say you have this collection
You can display all of these properties inside your dropdown labels, say you want to show (symbol with abbreviation and country name). Now you can.
So you can create the multipleSelect Filter with a customStructure by using the symbol as prefix, and country as suffix. That would make up something like this:
$ USD USA
$ CAD Canada
with a customStructure defined as
By default HTML is not rendered and the label will simply show HTML as text. But in some cases you might want to render it, you can do so by enabling the enableRenderHtml flag.
NOTE: this is currently only used by the Filters that have a collection which are the MultipleSelect & SingleSelect Filters.
In some cases a blank entry at the beginning of the collection could be useful, the most common example for this is to use the first option as a blank entry to tell our Filter to show everything. So for that we can use the addBlankEntry flag in `collectionOptions
We can optionally add a custom entry at the beginning of the collection, the most common example for this is to use the first option as a blank entry to tell our Filter to show everything. So for that we can use the addCustomFirstEntry or addCustomLastEntry flag in `collectionOptions
You can also load the collection asynchronously, but for that you will have to use the collectionAsync property, which expect a Promise to be passed (it actually accepts 3 types: HttpClient, FetchClient or regular Promise).
Load the collection through an Http call
Using Async Load when Collection is inside an Object Property
What if my collection is nested under the response object? For that you can use collectionInsideObjectProperty to let the filter know how to get the collection.
Modifying the collection afterward
If you want to modify the collection afterward, you simply need to find the associated Column reference from the Column Definition and modify the collection property (not collectionAsync since that is only meant to be used on page load).
For example
We can enable the collection watch via the column filter enableCollectionWatch flag, or if you use a collectionAsync then this will be enabled by default. The collection watch will basically watch for any changes applied to the collection (any mutation changes like push, pop, unshift, ...) and will also watch for the filter.collection array replace, when any changes happens then it will re-render the Select Filter with the updated collection list.
MultipleSelectOption interface)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
okButton option was added to add an OK button for simpler closing of the dropdown after selecting multiple options.
okButtonText was also added for locale (i18n)
offsetLeft option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen.
autoDropWidth option was added to automatically resize the dropdown with the same width as the select filter element.
autoAdjustDropHeight (defaults to true), when set will automatically adjust the drop (up or down) height
autoAdjustDropPosition (defaults to true), when set will automatically calculate the area with the most available space and use best possible choise for the drop to show (up or down)
autoAdjustDropWidthByTextSize (defaults to true), when set will automatically adjust the drop (up or down) width by the text size (it will use largest text width)
to extend the previous 3 autoAdjustX flags, the following options can be helpful
minWidth (defaults to null, to use when autoAdjustDropWidthByTextSize is enabled)
maxWidth (defaults to 500, to use when autoAdjustDropWidthByTextSize is enabled)
adjustHeightPadding (defaults to 10, to use when autoAdjustDropHeight is enabled), when using autoAdjustDropHeight we might want to add a bottom (or top) padding instead of taking the entire available space
maxHeight (defaults to 275, to use when autoAdjustDropHeight is enabled)
useSelectOptionLabel` to show different selected label text (on the input select element itself)
useSelectOptionLabelToHtml is also available if you wish to render label text as HTML for these to work, you have define the optionLabel in the customStructure
Code
Display shorter selected label text
If we find that our text shown as selected text is too wide, we can choose change that by using optionLabel in Custom Structure.
What if your grid is displaying a certain field but you wish to query against another field? Well you could do that with 1 of the following 3 options:
queryField (query on a specific field for both the Filter and Sort)
queryFieldFilter (query on a specific field for only the Filter)
queryFieldSorter (query on a specific field for only the Sort)
Example
/
/
We use an external lib named .
For this filter to work you will need to add to your project. This is a customized version of the original (thought all the original are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to slickgrid-universal/dist/lib folder. This lib is required if you plan to use multipleSelect or singleSelect Filters. What was customized to (compare to the original)
Scroll down below to see the
You can change the multipleSelect and singleSelect styling with SASS for styling. For more info on how to use SASS in your project, read the
Even though the option of searchTerms it is much better to use the more powerful presets grid options, please refer to the for more info.
NOTE If you also have presets in the grid options, then your searchTerms will be ignored completely (even if it's a different column) since presets have higher priority over searchTerms. See from more info.
labelPrefix and labelSuffix were recently added, they are also supported by the customStructure and can also be overridden. See
All the available options that can be provided as filterOptions to your column definitions can be found under this and you should cast your filterOptions to that interface to make sure that you use only valid options of the multiple-select.js library.
You can use any options from and add them to your filterOptions property. However please note that this is a customized version of the original (all original are available so you can still consult the original site for all options).
Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork folder (which is our customized version of the original). This lib is required if you plan to use multipleSelect or singleSelect Filters. What was customized to (compare to the original) is the following: