@domoinc/domo-multi-select

DomoMultiSelect

Configuration Options

chartName

Type: string
Default: "DomoMultiSelect"

Name of chart for Reporting.

dropdownHeight

Type: string
Default: "250px"

Height of the dropdown

height

Type: string
Default: "250px"

Sets the height and the dropdown height

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

maxSelectionCapacity

Type: number
Default: null

Number of values a use can select.

minimumQueryLength

Type: number
Default: 1

Length of the string to start querying options

numberOfSuggestions

Type: number
Default: 7

The number of options shown in the dropdown

placeholderText

Type: string
Default: "Search options"

Inputs placeholder text

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

size

Type: string
Default: "sz-sm"

The size theme of the tags

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: string
Default: "200px"

Sets the width and the dropdown width

Data Definition

Label

Type: string

Default validate:

function (d) {
	          return this.accessor(d) !== undefined;
	        }

Default accessor:

function (row) {
	          return (row[0] === undefined) ? undefined : String(row[0]);
	        }

Value

Type: string

Default validate:

function (d) {
	          return this.accessor(d) !== undefined;
	        }

Default accessor:

function (row) {
	          return (row[1] === undefined) ? undefined : String(row[1]);
	        }

Events

Dispatch Events

dispatch:tag
dispatch:selection

External Events

Example

//Setup some fake data
var sampleData = [
  ['North', 'North'],
  ['East', 'East'],
  ['South', 'South'],
  ['West', 'West']
];

//Initialze the widget
var chart = d3.select("#vis")
  .style({
    width: '500px',
    height: '500px'
  })
  .append('div')
  .style({
    position: 'absolute',
    top: '225px',
    left: '125px'
  })
  .chart("DomoMultiSelect")
  .c({
    width: 250,
    numberOfSuggestions: null,
    // height: 250
  });

//Render the chart with data
chart.draw(sampleData);
// chart.setSelectedValue('West');
// chart.setSelectedValue('East');