Class: TreeSelect

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 '@schukai/component-form/source/treeselect.js';
document.createElement('monster-tree-select');

Constructor

new TreeSelect()

A highly configurable select control

Since: 1.9.0
Copyright: schukai GmbH

Fires:

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

To set the options via the html tag the attribute data-monster-options must be used.

Properties

Name Type Default Description

mapping.rootReferences

String

['0',

undefined, null]

mapping.idTemplate String id

mapping.parentTemplate String parent

mapping.selection String

formatter

Object

Properties

Name	Type	Default	Description
`separator`	String	"	/ "

See: https://monsterjs.org/en/doc/#configurate-a-monster-control The individual configuration values can be found in the table.

(static) instanceSymbol

This method is called by the instanceof operator.

Since: 2.1.0

Methods

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

Returns:

Type:: Monster.Components.Form.Select

importOptions(data) → {Select}

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

Parameters:

Name	Type	Description
`data`	array \| object \| Map \| Set

Since: 0.16.0

Throws:

map is not iterable
Type Error

Returns:

Type:: Select

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

Returns:

Type:: Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:

Type:: string