monster.ui.keyValueEditor()
Syntax
monster.ui.keyValueEditor($target, options);
Parameters
Key | Description | Type | Default | Required |
---|---|---|---|---|
$target | Container of the widget inserted with jQuery#append . | jQuery | true | |
options | List of initialization options. | Object (#options) | false |
options
Key | Description | Type | Default | Required |
---|---|---|---|---|
data | Key/value pairs to initialize the editor with. | Object | {} | false |
inputName | String to be set as prefix for the text fields’ name attribute. | String | data | false |
i18n | Override default i18n strings. | Object (#i18n) | false |
i18n
Key | Description | Type | Default | Required |
---|---|---|---|---|
addLink | Text to be displayed in the link button to add new data rows. | String | + Add Data Row | false |
keyPlaceholder | Text placeholder to be displayed in the key inputs. | String | Data key | false |
valuePlaceholder | Text placeholder to be displayed in the value inputs. | String | Data value | false |
Return value
A jQuery
object representing the key-value editor widget.
Errors
"$target" is not a jQuery object
:$target
is not a jQuery object"options.data" is not a plain object
:options.data
is not a plain object"options.inputName" is not a string
:options.inputName
is not aString
value"options.i18n.addLink" is not a string
:options.i18n.addLink
is not aString
value"options.i18n.keyPlaceholder" is not a string
:options.i18n.keyPlaceholder
is not aString
value"options.i18n.valuePlaceholder" is not a string
:options.i18n.valuePlaceholder
is not aString
value
Description
The monster.ui.keyValueEditor()
creates a widget to manage a dynamic list of key-value pair with the look and feel of Monster UI.
The key and value inputs are displayed as two same-length columns while the third, smaller column, contains an actionable element to delete each data row. It also provides a “Add Data Row” link button at the bottom allowing the addition of an unlimited number of extra rows.
By default, the widget will match the width of its $target
container.
When this widget is used inside a form, and monster.ui.getFormData()
is used to parse the form into an object, then inputName
will be the property under which key/value pairs are collected in an array.
Examples
Create an empty key-value editor, with default options
var $target = $('#data_container');
monster.ui.keyValueEditor($target);
Create an editor by providing all its options
var target = $('#custom_data_container');
var data = {
'Key 1': 'Value 1',
'Key 2': 'Value 2',
}
var options = {
data: data,
inputName: 'custom_data',
i18n: {
addLink: self.i18n.active().customData.addLink,
keyPlaceholder: self.i18n.active().customData.keyPlaceholder,
valuePlaceholder: self.i18n.active().customData.valuePlaceholder
}
};
monster.ui.keyValueEditor(target, options);