Monster.Components.Form. TreeSelect

This CustomControl creates a select element with a variety of options. It supports filtering, local and remote, multiple selection and has a template system for displaying the options.

Dependencies: the system uses functions of the monsterjs library as well as pooperjs.

You can create this control either by specifying the HTML tag <monster-select /> directly in the HTML or using Javascript via the document.createElement('monster-select'); method.

<monster-select></monster-select>

Or you can create this CustomControl directly in Javascript:

import {TreeSelect} from 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/treeselect.js';
document.createElement('monster-tree-select');

Constructor

new TreeSelect()

A highly configurable select control

Since
  • 1.9.0
Example
import {TreeSelect} from '@schukai/component-form/source/tree-select.mjs';

const treeSelect = document.createElement('monster-tree-select');
treeSelect.setOption('mapping.valueTemplate', '${name} (${alpha-2})')
treeSelect.setOption('mapping.labelTemplate', '${country-code}')
treeSelect.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
        "parent": undefined
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",
        "parent": undefined
    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
        "parent": undefined
    }
]);

document.body.appendChild(treeSelect);

Members

defaults

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.

The JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       shadowMode: 'open',
       delegatesFocus: true,
       templates: {
           main: undefined
       }
   })),'application/json',true).toString()

The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.

As value a selector must be specified, which belongs to a script tag and contains the configuration as json.

<script id="id-for-this-config" type="application/json">
   {
       "config-key": "config-value"
   }
</script>

The individual configuration values can be found in the table.

Properties
NameTypeDefaultDescription
toggleEventTypeObjectclick,touch

List of event types to be observed for opening the dropdown

delegatesFocusbooleanfalse

lorem see mozilla.org

optionsArray.<Object>

Selection of key identifier pairs available for selection and displayed in the dropdown.

options[].namestring

Label

options[].valuestring

Value

selectionArray

Selected options

showMaxOptionsinteger10

Maximum number of visible options before a scroll bar should be displayed.

typestringradio

Multiple (checkbox) or single selection (radio)

namestring(random

id) Name of the form field

urlstring

Load options from server per url

fetchObject

Fetch see Using Fetch mozilla.org

Properties
NameTypeDefaultDescription
redirectStringerror
methodStringGET
modeStringsame-origin
credentialsStringsame-origin
headersObject{"accept":"application/json"}}
featuresObject

List with features

Properties
NameTypeDefaultDescription
filterBooleantrue

Show option filter

remoteFilterBooleanfalse

Filtering causes the specified URL to be reloaded and the options to be displayed.

clearAllBooleantrue

Display of a delete button to delete the entire selection

clearBooleantrue

Display of a delete key for deleting the specific selection

templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

popperObject

PopperJS Options

Properties
NameTypeDefaultDescription
placementstringbottom

PopperJS placement

modifiersArray.<Object>{name:offset}

PopperJS placement

mappingObject
Properties
NameTypeDefaultDescription
selectorString*

Path to select the appropriate entries

labelTemplateString""

template with the label placeholders in the form ${name}, where name is the key (**)

valueTemplateString""

template with the value placeholders in the form ${name}, where name is the key

rootReferencesString['0',

undefined, null]

idTemplateStringid
parentTemplateStringparent
selectionString
filterMonster.Components.Form~exampleFilterCallback | undefined

Filtering of values via a function

formatterObject
Properties
NameTypeDefaultDescription
selectionMonster.Components.Form~formatterSelectionCallback | undefinedformatHierarchicalSelection

format selection label

separatorString"

/ "

Methods

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string

assembleMethodSymbol() → {Monster.Components.Form.Select}

importOptions(data) → {Select}

Import Select Options from dataset Not to be confused with the control defaults/options

.

Import Select Options from dataset Not to be confused with the control defaults/options

Parameters:
NameTypeDescription
dataarray | object | Map | Set
Since
  • 0.16.0
Throws:

map is not iterable

Type
Error
Returns:
Type: 
Select