@domoinc/domo-multi-select v4.0.1
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');