@domoinc/dropdown/README.md

Dropdown - Domo Widget

# 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:  
```js
function (d) { return this.accessor(d) !== "undefined";}
```

Default accessor:  
```js
function (line) { return String(line[0]); }
```

#### Value
Type: `string`

Default validate:  
```js
function (d) { return this.accessor(d) !== "undefined";}
```

Default accessor:  
```js
function (line) { return String(line[1]); }
```

## Events


#### Dispatch Events

#### External Events


## Example

```js  
//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');
    });
```