multiDragListInputField

 

The multiDragListInputField allows you to drag and drop values from one list to another. You can drag items from the list of availableValues to the list of selectedValues to indicate which options are selected.

  • availableValues – An array containing the values available for selection. This follows the format "label:value".

    Example

    "multidragdrop": [
   {
      "label": "Any Type",
      "value": "anytype"
   },
   {
      "label": "Boolean",
      "value": "boolean"
   }
]
    JS
  • selectedValues – An array containing values displayed in the selected value list.
  • firstListName – The label that will appear above the list of available values.
  • secondListName – The label that will appear above the list of selected values.
  • firstListSortable – Enter "true" to allow the ability to drag and drop for reordering the list of available values. 
  • secondListSortable – Enter "true" to allow the ability to drag and drop for reordering the list of selected values. 
  • showSearchField – Enter "true" to display a search field at the top of the list of available values.  

This component uses a library called sortable.js ( https://github.com/RubaXa/Sortable ); it does not require jquery.

multiGroupDragListInputField

MultiGroupDragListInputField is similar to MultiDragListInputField. However, MultiGroupDragListInputField allows you to create groupings with headers so that when you drag options from left to right, the header comes over with it.

  • groupHeader – Name of the group.
  • groupId – The HTML ID of the group.
  • maxAvailable – The maximum number of options you can drag to the second list.
  • required - Marks this field as a required entry.

Example

getGroupDataForMultiGroup: function() {
      return [
        {
          groupHeader: 'First Group Header',
          groupId: 'First_Group_Id',
          maxAvailable: 5,
          required: true,
          data: [
            { key: 1, value: 'Recent', selected: false },
            { key: 2, value: 'Created by Me', selected: false },
            { key: 3, value: 'Private Reports', selected: true },
            { key: 4, value: 'Public Reports', selected: true },
            { key: 5, value: 'All Reports', selected: false },
            { key: 6, value: 'Shared with Me', selected: false }
          ]
        },
        {
          groupHeader: 'Second Group Header',
          groupId: 'Second_Group_Id',
          required: 2,
          data: [
            { key: 1, value: 'Recent', selected: false },
            { key: 2, value: 'Created by Me', selected: false },
            { key: 3, value: 'Private Reports', selected: false },
            { key: 4, value: 'Public Reports', selected: false },
            { key: 5, value: 'All Reports', selected: false },
            { key: 6, value: 'Shared with Me', selected: false }
          ]
        }
      ]
    }
JS