edit-select

Overview

To get started, see the introductory guide on editable object-table cells.

This editable cell type allows users to pick a value from a predetermined set of options. It is different to edit-typeahead in that it uses the underlying operating system select native UX to provide options.

Note: it is not possible to provide $object to an edit-select as the options are evaluated once per table, to guarantee good performance and remove latency. If $object is required and the options should to be dynamic, consider using an edit-typeahead cell instead.

Basic Example

main.view.xml

<object-table ...>
    <column display="{field}">
        <edit-select options="$:getColorOptions()" value="$object.favorite_color" on-change="$:updateFavoriteColor($object, newValue, oldValue)" />
    </column>
</object-table>

main.js

function getColorOptions() {
    return ["Red", "Purple", "Blue", "Green", "Yellow"];
}

function updateFavoriteColor(obj, newValue, oldValue) {
    obj.favorite_color = newValue;
    obj.save();
}

Standard Attributes

on-change

See edit-text > on-change

options

Required

Default: unset

Specifies an array of options to list when the user activates the edit-select cell.

There are three possible ways to provide options to edit-select:

1. Simple array (set)

This function is useful if the options represent the underlying data (display value == key value)

function getOptions(){
    return [ "apple", "pear", "orange" ]
}

2. Simple object (map)

This function is useful when the key and display values differ (display value != key value)

JS

function getOptions(){
    return {
        a: 'Apple',
        p: 'Pear',
        o: 'Orange'
    }
}

3. Advanced array (collection)

An advanced array enables one to build up a collection of objects dynamically. Having data in this format makes it easy to use 3rd party libraries such as Lodash or native map, filter or reduce functions.

JS

function getOptions(){
    return [
        { key: "a", value: "Apple" },
        { key: "p", value: "Pear" },
        { key: "o", value: "Orange" },
    ]
}

value

See edit-text > value

Advanced Attributes

disabled

See edit-text > disabled