@domoinc/dropdown

Dropdown

Configuration Options

chartName

Type: string
Default: "Dropdown"

Name of chart for Reporting.

domoScroll

Type: boolean
Default: false

Turn on domo Scroll?

height

Type: string
Default: "200px"

Max Height of the dropdown

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.

listIconFunction

Type: function
Default: "function () {}"

Function that runs on every list element

listIconPadding

Type: number
Default: 0

Padding for the list icons

selectedIndex

Type: number
Default: 0

Selected Index

selectedValue

Type: string
Default: "ConfigValue"

selectedValue

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

size

Type: string
Default: "medium"

Size of the dropdown.

updateSizeableConfigs

Type: boolean
Default: true

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

visible

Type: boolean
Default: true

Show/Hide the dropdown.

width

Type: string
Default: "250px"

Width of the dropdown

Data Definition

Label

Type: string

Default validate:

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

Default accessor:

function (line) { return String(line[0]); }

Value

Type: string

Default validate:

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

Default accessor:

function (line) { return String(line[1]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
    ['1'],
    ['Domo', 'value', 'otherfield', 'bunchafields', 'onthisguy'],
    ['Widgetasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['Test'],
    ['End'],
];

//Initialze the widget
var chart = d3.select("#vis").append('div')
    .style({
        'position':'absolute',
        'top':'100px',
        'left':'100px'
    })
    .chart("Dropdown")
    .c({
        width: '250px',
        // height: '250px',
        'size': 'large',
        domoScroll: true
    })
    // .selectedIndex(1);

chart.c('listIconFunction', function(iconDiv, d, i) {
    iconDiv.append('img')
        .attr({
            src: 'https://avatars0.githubusercontent.com/u/7373982?v=3&s=40'
        })
        .style({
            height: '16px',
            width: '16px',
        })
})

//Render the chart with data
chart.draw(data);

// setTimeout(function() {
//     chart.c('domoScroll', false)
//     chart.draw(data)
// }, 2000)

chart.on('click', function(d, i) {
    this.toggleVisibility();
    console.log(d)
});

//******************************************************************
//This is the code that allows you to put icons on the list items
//******************************************************************

d3.select('#vis')
    .append('div')
    .style({
        height: '100px',
        width: '100px',
        'background': '#BADA55',
        'position': 'absolute',
        'left': '400px'
    })
    .on('click', function() {
    chart.toggleVisibility();
        //chart.trigger('visibility');
    });