monster.ui.keyValueEditor()

Syntax

monster.ui.keyValueEditor($target, options);

Parameters

KeyDescriptionTypeDefaultRequired
$targetContainer of the widget inserted with jQuery#append.jQuerytrue
optionsList of initialization options.Object(#options)false

options

KeyDescriptionTypeDefaultRequired
dataKey/value pairs to initialize the editor with.Object{}false
inputNameString to be set as prefix for the text fields’ name attribute.Stringdatafalse
i18nOverride default i18n strings.Object(#i18n)false

i18n

KeyDescriptionTypeDefaultRequired
addLinkText to be displayed in the link button to add new data rows.String+ Add Data Rowfalse
keyPlaceholderText placeholder to be displayed in the key inputs.StringData keyfalse
valuePlaceholderText placeholder to be displayed in the value inputs.StringData valuefalse

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 a String value
  • "options.i18n.addLink" is not a string: options.i18n.addLink is not a String value
  • "options.i18n.keyPlaceholder" is not a string: options.i18n.keyPlaceholder is not a String value
  • "options.i18n.valuePlaceholder" is not a string: options.i18n.valuePlaceholder is not a String 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);

On this page